深入了解各种布局技术

布局介绍

     Android布局是应用界面开发的重要一环，在Android中，共有四种布局方式，

分别是：FrameLayout( 帧布局 )、LinearLayout (线性布局)、TableLayout(表格布局)、RelativeLayout(相对布局)。

1.LinearLayout

       线性布局LinearLayout 在单一方向上对齐所有的子视图-竖向或者横向，这依赖于你怎么定义方向orientation 属性。所有子视图依次堆积，所以一个竖向列表每行只有一个子视图，不管它们有多宽，而一个横向列表将只有一行高（最高子视图的高度，加上填充）。一个线性布局LinearLayout 会考虑子视图之间的边缘空白margins以及每个子视图的引力属性（靠右，居中，或者靠左）。

2.RelativeLayout

       相对布局RelativeLayout允许子视图指定它们和父视图或彼此之间的相对位置（通过ID指定）。因此你可以按正确的顺序对齐两个元素，或者让一个视图在另外一个下面，居于屏幕中间，左边的中间，等等。元素通过给定顺序来绘制，因此如果这第一个元素在屏幕中间，其他以它对齐的元素都会对齐到屏幕中间。同样，因为这个顺序，如果使用XML来指定这个布局，你将引用的元素（为了定位其它视图对象）必须被列在XML文件中，在你通过引用ID从其他视图中引用它之前。

       其中一些特性直接由元素支持，另外一些由它的LayoutParams成员变量支持（为所有这个屏幕中的元素子类化RelativeLayout，因为所有元素都是RelativeLayout父对象的子元素）。已定义的相对布局RelativeLayout参数是：width,height,below,alignTop,toLeft,padding[Bottom|Left|Right|Top]，以及 margin[Bottom|Left|Right|Top]。注意其中一些参数明确支持相对布局位置-它们的数值必须是你的相对位置元素的ID。

 1  <? xml version="1.0" encoding="utf-8" ?>
 2  < RelativeLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
 3                  android:layout_width ="fill_parent"  
 4                  android:layout_height ="wrap_content"
 5                  android:background ="@drawable/blue"
 6                  android:padding ="10px"   >
 7 
 8       < TextView  android:id ="@+id/label"  
 9                android:layout_width ="fill_parent"  
10                android:layout_height ="wrap_content"  
11                android:text ="Type here:"   />
12 
13       < EditText  android:id ="@+id/entry"  
14                android:layout_width ="fill_parent"  
15                android:layout_height ="wrap_content"  
16                android:background ="@android:drawable/editbox_background"
17                android:layout_below ="@id/label"   />
18    
19       < Button  android:id ="@+id/ok"  
20              android:layout_width ="wrap_content"  
21              android:layout_height ="wrap_content"  
22              android:layout_below ="@id/entry"
23              android:layout_alignParentRight ="true"
24              android:layout_marginLeft ="10px"
25              android:text ="OK"   />
26 
27       < Button  android:layout_width ="wrap_content"  
28              android:layout_height ="wrap_content"
29              android:layout_toLeftOf ="@id/ok"
30              android:layout_alignTop ="@id/ok"
31              android:text ="Cancel"   />
32  </ RelativeLayout >
33 

3.TableLayout

      表格布局TableLayout把它的子视图定位到行和列中。表格布局容器不显示行，列和单元的边界线。表的列和最多行单元数一样多。一个表可以有空单元，但是单元不能像HTML里面那样跨列。

       TableRow 对象是一个TableLayout的子视图（每个TableRow定义了表中的一个单独行）。每行有0或多个单元，可用任何其他视图定义。因此，行单元可能由各个视图对象组成，如ImageView或TextView对象。一个单元也可以是一个ViewGroup对象（比如，你可以嵌入另一个表布局作为一个单元）。

 1  <? xml version="1.0" encoding="utf-8" ?>
 2  < TableLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
 3      android:layout_width ="fill_parent"
 4      android:layout_height ="fill_parent"
 5      android:stretchColumns ="1" >
 6       < TableRow >
 7           < TextView
 8               android:text ="@string/table_layout_4_open"
 9              android:padding ="3dip"   />
10           < TextView
11               android:text ="@string/table_layout_4_open_shortcut"
12              android:gravity ="right"
13              android:padding ="3dip"   />
14       </ TableRow >
15 
16       < TableRow >
17           < TextView
18               android:text ="@string/table_layout_4_save"
19              android:padding ="3dip"   />
20           < TextView
21               android:text ="@string/table_layout_4_save_shortcut"
22              android:gravity ="right"
23              android:padding ="3dip"   />
24       </ TableRow >
25  </ TableLayout >

4.FrameLayout

         FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象 — 比如，一张你要发布的图片。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住（除非后一个子元素是透明的）。

main.xml

 1  <? xml version="1.0" encoding="utf-8" ?>
 2  < FrameLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
 3      android:layout_width ="fill_parent"
 4      android:layout_height ="fill_parent" >
 5 
 6       < ImageView
 7           android:layout_width ="fill_parent"
 8          android:layout_height ="wrap_content"
 9          android:src ="@drawable/movie"
10          android:contentDescription ="@string/movie" />
11       < ImageView
12           android:layout_width ="wrap_content"
13          android:layout_height ="wrap_content"
14          android:src ="@drawable/paly"
15          android:layout_gravity ="center"
16          android:contentDescription ="@string/play" />
17  </ FrameLayout >

string.xml

1  <? xml version="1.0" encoding="utf-8" ?>
2  < resources >
3 
4       < string  name ="hello" > Hello World, FrameLayoutActivity! </ string >
5       < string  name ="app_name" > FrameLayout布局 </ string >
6       < string  name ="movie" > 复仇者联盟 </ string >
7       < string  name ="play" > 播放按钮 </ string >
8 
9  </ resources >