Android Layout 布局

一個Android視圖有很多控制項，那麼怎麼來控制它們的位置排列呢?我們需要容器來存放這些控制項並控制它們的位置排列，就像HTML中div, table一樣，Android布局也起到同樣的作用。

Android布局主要有以下幾種: LinearLayout, RelativeLayout,TableLayout,AbsoluteLayout. 最後一種AbsoluteLayout是通過指定控制項的x/y座標來定位的，不太靈活所以已經不推薦使用了。

 

(1) LinearLayout

LinearLayout線性布局，包含在LinearLayout裡面的控制項按順序排列成一行或者一列，類似於Swing裡的FlowLayout和Silverlight裡的StackPanel，它的常用的屬性主要包括：

Orientation方向，即指定LinearLayout是代表一行還是一列，可以為horizontal或vertical，如android:orientation="vertical"，當然也在可以在代碼裡通過setOrientation()方法來設定。

Fill Mode填充方式，所有在LinearLayout的控制項都必須指定它的填充方式, 即設定android:layout_width和android:layout_height，可以為三種值(1)具體的像素值，如20px (2) wrap_content, 表示按控制項文本實際長度顯示 (3) fill_parent, 表示填充剩下的所有可用空間。

Weight權重，如果你想讓一行或一列的控制項按比例顯示，這時候權重就起到作用了，如想讓一行裡面兩控制項其中一控制項佔兩倍於另一控制項的空間，可以把其中一控制項的android:layout_weight設定為1, 另一個為2 即可。

 

在前面一篇Android訊息提示框和對話方塊也有個LinearLayout的例子, 現在來看一下Android官方的一個Demo:

<?xml version="1.0" encoding="utf-8"?><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"android:layout_width="fill_parent" android:layout_height="fill_parent"android:layout_weight="1"><TextView android:text="red" android:gravity="center_horizontal"android:background="#aa0000" android:layout_width="wrap_content"android:layout_height="fill_parent" android:layout_weight="1" /><TextView android:text="green" android:gravity="center_horizontal"android:background="#00aa00" android:layout_width="wrap_content"android:layout_height="fill_parent" android:layout_weight="1" /><TextView android:text="blue" android:gravity="center_horizontal"android:background="#0000aa" android:layout_width="wrap_content"android:layout_height="fill_parent" android:layout_weight="1" /><TextView android:text="yellow" android:gravity="center_horizontal"android:background="#aaaa00" android:layout_width="wrap_content"android:layout_height="fill_parent" android:layout_weight="1" /></LinearLayout><LinearLayout android:orientation="vertical"android:layout_width="fill_parent" android:layout_height="fill_parent"android:layout_weight="1"><TextView android:text="row one" android:textSize="15pt"android:layout_width="fill_parent" android:layout_height="wrap_content"android:layout_weight="1" /><TextView android:text="row two" android:textSize="15pt"android:layout_width="fill_parent" android:layout_height="wrap_content"android:layout_weight="1" /><TextView android:text="row three" android:textSize="15pt"android:layout_width="fill_parent" android:layout_height="wrap_content"android:layout_weight="1" /><TextView android:text="row four" android:textSize="15pt"android:layout_width="fill_parent" android:layout_height="wrap_content"android:layout_weight="1" /></LinearLayout></LinearLayout>

可以看到父類LinearLayout包含了一個水平布局的LinearLayout和一個垂直布局的LinearLayout，它們分別包含了四個平分寬度和高度的TextView，運行效果如下：

 

 

(2) RelativeLayout

相對布局，它是依靠與父容器，同一容器中其它控制項的相對位置來排列顯示的。主要常用的屬性如下：

 

相對父容器的屬性：

android:layout_alignParentTop: 控制項的頂部與父容器的頂部對齊，類似的幾個屬性從名字可以看出它們的作用：android:layout_alignParentBottom, android:layout_alignParentLeft, android:layout_alignParentRight.

 

相對同一容器中其它控制項的屬性：

android:layout_above: 表示此控制項在另一控制項的上面，類似的還有android:layout_below, android:layout_toLeftOf, android:layout_toRightOf.

android:layout_alignTop: 表示此控制項與另一控制項頂部對齊，類似的還有android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight.

 

既然是相對於另一個控制項，就必須在定義這控制項時候指定是哪個控制項，如控制項A的ID為@+id/widget_a, 控制項B若要在控制項A下面可以這樣設定android:layout_below="@id/widget_a"。

 

來看一下官方的一個Demo:

<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" /><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="OK" /><Button android:layout_width="wrap_content"android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok"android:layout_alignTop="@id/ok" android:text="Cancel" /></RelativeLayout>

 

運行效果如下：

 

(3) TableLayout

表格版面配置，類似於HTML的Table和Silverlight的Grid。通過TableRow來定義一行，如果一個控制項佔用多列可以設定android:layout_span, 類似於HTML的colspan。預設情況下一個控制項是按順序放置在每一列的(column 0, column 1….), 也可以通過android:layout_column指定放在哪一列。如果一列內容過長或者過短，可以通過android:stretchColumns和android:shrinkColumns來增加或者減少此列的寬度。

 

來看一下官方的一個Demo:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"android:stretchColumns="1"><TableRow><TextView android:layout_column="1" android:text="Open..."android:padding="3dip" /><TextView android:text="Ctrl-O" android:gravity="right"android:padding="3dip" /></TableRow><TableRow><TextView android:layout_column="1" android:text="Save..."android:padding="3dip" /><TextView android:text="Ctrl-S" android:gravity="right"android:padding="3dip" /></TableRow><TableRow><TextView android:layout_column="1" android:text="Save As..."android:padding="3dip" /><TextView android:text="Ctrl-Shift-S" android:gravity="right"android:padding="3dip" /></TableRow><View android:layout_height="2dip" android:background="#FF909090" /><TableRow><TextView android:text="X" android:padding="3dip" /><TextView android:text="Import..." android:padding="3dip" /></TableRow><TableRow><TextView android:text="X" android:padding="3dip" /><TextView android:text="Export..." android:padding="3dip" /><TextView android:text="Ctrl-E" android:gravity="right"android:padding="3dip" /></TableRow><View android:layout_height="2dip" android:background="#FF909090" /><TableRow><TextView android:layout_column="1" android:text="Quit"android:padding="3dip" /></TableRow></TableLayout>

 

這個表格有三列，通過設定android:stretchColumns="1"來增加了第二列的寬度。運行效果如下：

 

 

希望本文對您有所協助，其它與Android相關文章如下：

Android程式調試時產生main.out.xml檔案

使用Git和Repo擷取Android源碼

Introducing Android

Hello Android

Android Project Structure(項目結構)

Android訊息提示框和對話方塊

 

參考書籍：Beginning Android 2 和Android官方文檔