展会信息港展会大全

安卓界面布局基础知识
来源:互联网   发布日期:2015-10-03 15:19:51   浏览:2424次  

导读:关于界面一些常用布局;一、 界面布局之线性布局(LinearLayout)之前的例子的学习已经多次使用到了LinearLayout这个布局控件,线性布局分为:(1)、垂直线性布局;(2)、水平线性布局;针对这两种区别,只是......

关于界面一些常用布局;

一、界面布局之线性布局(LinearLayout)

之前的例子的学习已经多次使用到了LinearLayout这个布局控件,线性布局分为:

(1)、垂直线性布局;

(2)、水平线性布局;

针对这两种区别,只是一个属性的区别

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

</LinearLayout>

水平线性布局的话,android:orientation="horizontal" 即可。

二、界面布局之相对布局(RelativeLayout)

一般线性布局满足不了们实际项目中的需要,就是一般做Web界面的UI设计一样,也是存在相对元素的一些CSS样式的布局。RelativeLayout参数有:Width,Height,Below,AlignTop,ToLeft,Padding,和MerginLeft。

关键源码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:id="@+id/label"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="请输入:"/>

<EditText

android:id="@+id/entry"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@android:drawable/editbox_background"

android:layout_below="@id/label"/>

<Button

android:id="@+id/ok"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/entry"

android:layout_alignParentRight="true"

android:layout_marginLeft="10dip"

android:text="确定" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toLeftOf="@id/ok"

android:layout_alignTop="@id/ok"

android:text="取消" />

</RelativeLayout>

其中,android:layout_below= @id/label 设置了EditText处于TextView下方;在Button中android:layout_below= @id/entry 设置该Button位于EditText下。

实例效果:

三、界面布局之表单布局(TableLayout)

TableLayout由许多TableRow组成,每个TableRow都会定义一个Row。TableLayout容器不会显示Row,Column或Cell的边框线,每个Row拥有0个或多个Cell,每个Cell拥有一个View对象。表格由行和列组成许多单元个,允许单元格为空。但是单元格不能跨列,这与Html不同。

<View

android:layout_height="2dip"

android:background="#FF909090" />

<TableRow>

<TextView

android:text="*"

android:padding="3dip" />

<TextView

android:text="导入..."

android:padding="3dip" />

</TableRow>

<TableRow>

<TextView

android:text="*"

android:padding="3dip" />

<TextView

android:text="导出..."

android:padding="3dip" />

<TextView

android:text="Ctrl-E"

android:gravity="right"

android:padding="3dip" />

</TableRow>

实例效果:

四、界面布局之 切换卡(TabWidget)

切换卡经常用在一下选项上,类似于电话簿界面,通过多个标签切换显示不同内容。而其中,TabHost是一个用来存放Tab标签的容器,通过getTabHost方法来获取TabHost的对象,通过addTab方法向容器里添加Tab。Tab在切换时都会产生一个事件,可以通过TabActivity的事件监听setOnTabChangedListener.

【扩展点】TabHost

类概述

提供选项卡(Tab页)的窗口视图容器。此对象包含两个子对象:一组是用户可以选择指定Tab页的标签;另一组是FrameLayout用来显示该Tab页的内容。个别元素通常控制使用这个容器对象,而不是设置在子元素本身的值。

(译者madgoat注:即使使用的是单个元素,也最好把它放到容器对象ViewGroup里)

内部类

interface TabHost.OnTabChangeListener

接口定义了当选项卡更改时被调用的回调函数

interface TabHost.TabContentFactory

当某一选项卡被选中时生成选项卡的内容

class TabHost.TabSpec

单独的选项卡,每个选项卡都有一个选项卡指示符,内容和tag标签,以便于记录.。

关键源码:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:id="@+id/textview1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="this is a tab" />

<TextView

android:id="@+id/textview2"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="this is another tab" />

<TextView

android:id="@+id/textview3"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="this is a third tab" />

</FrameLayout>

</LinearLayout>

</TabHost>

处理类:

//声明TabHost对象

TabHost mTabHost;

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

//取得TabHost对象

mTabHost = getTabHost();

/* 为TabHost添加标签 */

//新建一个newTabSpec(newTabSpec)

//设置其标签和图标(setIndicator)

//设置内容(setContent)

mTabHost.addTab(mTabHost.newTabSpec("tab_test1")

.setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1))

.setContent(R.id.textview1));

mTabHost.addTab(mTabHost.newTabSpec("tab_test2")

.setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2))

.setContent(R.id.textview2));

mTabHost.addTab(mTabHost.newTabSpec("tab_test3")

.setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3))

.setContent(R.id.textview3));

//设置TabHost的背景颜色

mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));

//设置TabHost的背景图片资源

//mTabHost.setBackgroundResource(R.drawable.bg0);

//设置当前显示哪一个标签

mTabHost.setCurrentTab(0);

//标签切换事件处理,setOnTabChangedListener

mTabHost.setOnTabChangedListener(new OnTabChangeListener(){

public void onTabChanged(String tabId) {

Dialog dialog = new AlertDialog.Builder(Examples_04_29Activity.this)

.setTitle("提示")

.setMessage("当前选中:"+tabId+"标签")

.setPositiveButton("确定",

new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int whichButton){

dialog.cancel();

}

}).create();//创建按钮

dialog.show();

}

});

}

实例效果:

好吧,基础的控件与布局学完

赞助本站

人工智能实验室
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港