第五章：Android佈局

View的佈局顯示方式有下面幾種：線性佈局（Linear Layout）、相對佈局（Relative Layout）、表格佈局（Table Layout）、幀佈局（FrameLayout）、絕對佈局（AbsoluteLayout）。

1、線性佈局（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，水平的）佈局，執行效果如下圖所示：

 

 

2、相對佈局（Relative Layout）

相對佈局：是一個ViewGroup以相對位置顯示它的子檢視（view）元素，一個檢視可以指定相對於它的兄弟檢視的位置（例如在給定檢視的左邊或者下面）或相對於RelativeLayout的特定區域的位置（例如底部對齊，或中間偏左）。

相對佈局是設計使用者介面的有力工具，因為它消除了巢狀檢視組。

<?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。這些屬性的意思很簡單，就是英文單詞的直譯，就不多做介紹了。執行之後，得如下結果：

3、 表格佈局（Table Layout）

表格佈局：是一個ViewGroup以表格顯示它的子檢視（view）元素，即行和列標識一個檢視的位置。其實Android的表格佈局跟HTML中的表格佈局非常類似，TableRow 就像HTML表格的<tr>標記。

用表格佈局需要知道以下幾點：

• android:shrinkColumns，對應的方法：setShrinkAllColumns(boolean)，作用：設定表格的列是否收縮（列編號從0開始，下同），多列用逗號隔開（下同），如android:shrinkColumns="0,1,2"，即表格的第1、2、3列的內容是收縮的以適合螢幕，不會擠出螢幕。
• android:collapseColumns，對應的方法：setColumnCollapsed(int,boolean)，作用：設定表格的列是否隱藏
• android:stretchColumns，對應的方法：setStretchAllColumns(boolean)，作用：設定表格的列是否拉伸

<?xml version="1.0" encoding="utf-8"?> 
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:shrinkColumns="0,1,2"><!-- have an eye on ! --> 
    <TableRow><!-- row1 --> 
    <Button android:id="@+id/button1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button1" 
            android:layout_column="0" 
            /> 
       <Button android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button2" 
     android:layout_column="1" 
     /> 
     </TableRow> 
    <TableRow><!-- row2 --> 
    <Button android:id="@+id/button3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button3" 
            android:layout_column="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_column="1" 
     /> 
</TableRow> 
<TableRow>    
     <Button android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button5" 
     android:layout_column="2" 
     /> 
</TableRow> 
</TableLayout> 

 4、 幀佈局(FrameLayout)

原理是在控制元件中繪製任何一個控制元件都可以被後繪製的控制元件覆蓋，最後繪製的控制元件會蓋住之前的控制元件。如圖所示介面中先繪製的ImageView 然後在繪製的TextView和EditView 所以後者就覆蓋在了前者上面。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/g"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="雨鬆MOMO"
                android:background="#FF0000"
                android:textColor="#000000" 
        android:textSize="18dip" 
        />
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image"
                android:layout_gravity="bottom"
        />
        <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="快樂生活每一天喔"
        android:layout_gravity="bottom"
        />
</FrameLayout>

5、絕對佈局（AbsoluteLayout）

絕對佈局：是一個ViewGroup以絕對方式顯示它的子檢視（view）元素，即以座標的方式來定位在螢幕上位置。

這種佈局方式很好理解，在佈局檔案或程式設計地設定View的座標，從而絕對地定位。如下所示佈局檔案：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:id="@+id/AbsoluteLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >
   <TextView android:id="@+id/txtIntro"
     android:text="絕對佈局"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_x="20dip"<!-- have an eye on ! -->
     android:layout_y="20dip"><!-- have an eye on ! -->
   </TextView>
</AbsoluteLayout>

 

Android五大布局的基本使用方法已經介紹完，最後筆者在這裡強調一下在開發與學習中建議大家使用相對佈局，首先它的方法屬性是最強大的其次它基本可以實現其它4大布局的效果，當然這裡說的不是全部 有時候還是須要使用其他佈局， 所以筆者建議大家開發中以實際情況定奪，以上五種佈局可以使用佈局巢狀的方式可以做出更好看的更美觀的佈局。