读书人

Android格局详解

发布时间: 2012-07-02 17:46:22 作者: rapoo

Android布局详解

?

图1、继承自ViewGroup的一些布局类

其实,所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类。其它的一些布局都扩展自这5个类。下面分小节分别介绍View的七种布局显示方式。

2、线性布局(Linear Layout)

线性布局:是一个ViewGroup以线性方向显示它的子视图(view)元素,即垂直地水平地。之前我们的Hello World!程序中view的布局方式就是线性布局的,一定不陌生!如下所示res/layour/main.xml:?

<?xml version="1.0" encoding="utf-8"?>?
<LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"?
??????????????android:layout_width="fill_parent"?
??????????????android:layout_height="fill_parent"?
??????????????android:orientation="horizontal"><!-- have an eye on ! -->?
????<Button?android:id="@+id/button1"?
????????????android:layout_width="wrap_content"?
????????????android:layout_height="wrap_content"????????????
????????????android:text="Hello, I am a Button1"?
????????????android:layout_weight="1"?
????????????/>?
????<Button?android:id="@+id/button2"?
????android:layout_width="wrap_content"?
????android:layout_height="wrap_content"?
????android:text="Hello, I am a Button2"?
????android:layout_weight="1"?
????/>?
????<Button?android:id="@+id/button3"?
????android:layout_width="wrap_content"?
????android:layout_height="wrap_content"?
????android:text="Hello, I am a Button3"?
????android:layout_weight="1"?
????/>?
????<Button?android:id="@+id/button4"?
????android:layout_width="wrap_content"?
????android:layout_height="wrap_content"?
????android:text="Hello, I am a Button4"?
????android:layout_weight="1"?
????/>?
????<Button?android:id="@+id/button5"?
????android:layout_width="wrap_content"?
????android:layout_height="wrap_content"?
????android:text="Hello, I am a Button5"?
????android:layout_weight="1"?
????/>?
</LinearLayout>

从上面可以看出根LinearLayout视图组(ViewGroup)包含5个Button,它的子元素是以线性方式(horizontal,水平的)布局,运行效果如下图所示:

Android格局详解

图2、线性布局(水平或者说是横向)

?

?

如果你在android:orientation="horizontal"设置为vertical,则是是垂直或者说是纵向的,如下图所示:

Android格局详解

?

图3、线性布局(垂直或者说是纵向)

2.1、Tips:android:layout_weight="1"

?这个属性很关键,如果你没有显示设置它,它默认为0。把上面布局文件(水平显示的那个)中的这个属性都去掉,运行会得出如下结果:

Android格局详解

图4、layout_weight属性

没有了这个属性,我们本来定义的5个Button运行后却只显示了2个Button,为什么呢??

"weight"顾名思义是权重的意思,layout_weight 用于给一个线性布局中的诸多视图的重要程度赋值。所有的视图都有一个layout_weight值,默认为零,意思是需要显示多大的视图就占据多大的屏幕空间。这就不难解释为什么会造成上面的情况了:Button1~Button5都设置了layout_height和layout_width属性为wrap_content即包住文字内容,他们都没有设置layout_weight 属性,即默认为0.,这样Button1和Button2根据需要的内容占据了整个屏幕,别的就显示不了啦!

若赋一个高于零的值,则将父视图中的可用空间分割,分割大小具体取决于每一个视图的layout_weight值以及该值在当前屏幕布局的整体layout_weight值和在其它视图屏幕布局的layout_weight值中所占的比率而定。举个例子:比如说我们在 水平方向上有一个文本标签和两个文本编辑元素。该文本标签并无指定layout_weight值,所以它将占据需要提供的最少空间。如果两个文本编辑元素每一个的layout_weight值都设置为1,则两者平分在父视图布局剩余的宽度(因为我们声明这两者的重要度相等)。如果两个文本编辑元素其中第一个的layout_weight值设置为1,而第二个的设置为2,则剩余空间的三分之二分给第一个,三分之一分给第二个(数值越小,重要度越高)。?

3、相对布局(Relative Layout)

相对布局:是一个ViewGroup以相对位置显示它的子视图(view)元素,一个视图可以指定相对于它的兄弟视图的位置(例如在给定视图的左边或者下面)或相对于RelativeLayout的特定区域的位置(例如底部对齐,或中间偏左)。

相对布局是设计用户界面的有力工具,因为它消除了嵌套视图组。如果你发现你使用了多个嵌套的LinearLayout视图组后,你可以考虑使用一个RelativeLayout视图组了。看下面的res/layour/main.xml:?

<?xml version="1.0" encoding="utf-8"?>?
<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="Type here:"/>?
????<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"/><!-- have an eye on ! -->?
????<Button?
????????android:id="@+id/ok"?
????????android:layout_width="wrap_content"?
????????android:layout_height="wrap_content"?
????????android:layout_below="@id/entry"? <!-- have an eye on ! -->?
???????android:layout_alignParentRight="true" <!-- have an eye on ! -->?
????????android:layout_marginLeft="10dip"?
????????android:text="OK"?/>?
????<Button?
????????android:layout_width="wrap_content"?
????????android:layout_height="wrap_content"?
????????android:layout_toLeftOf="@id/ok" <!-- have an eye on ! -->?
????????android:layout_alignTop="@id/ok" <!-- have an eye on ! -->
?
????????android:text="Cancel"?/>?
</RelativeLayout>?

从上面的布局文件我们知道,RelativeLayout视图组包含一个TextView、一个EditView、两个Button,注意标记了<!-- have an eye on ! -->的属性,在使用相对布局方式中就是使用这些类似的属性来定位视图到你想要的位置,它们的值是你参照的视图的id。这些属性的意思很简单,就是英文单词的直译,就不多做介绍了。运行之后,得如下结果:

Android格局详解

图5、相对布局

4、 表格布局(Table Layout)

表格布局:是一个ViewGroup以表格显示它的子视图(view)元素,即行和列标识一个视图的位置。其实Android的表格布局跟HTML中的表格布局非常类似,TableRow?就像HTML表格的<tr>标记。

用表格布局需要知道以下几点

读书人网 >Android

热点推荐