上一篇文章中主要介紹了ui的控制元件，這裡就學習下佈局吧。android的基本佈局在layout下主要如圖：

    從上圖可以看出有FrameLayout（單幀佈局），LinearLayout（線性佈局），TableLayout（表格佈局），RelativeLayout（相對佈局），GridLayout（網格佈局）等。具體的佈局樣式，在上圖中也可以簡單地看出來。

    這裡先介紹下android的View，ViewGroup，Layout。

    1、View：代表了使用者介面的一塊可繪製區域。每個View在螢幕上佔據一個矩形區域。在這個區域內，View物件負責圖形繪製和事件處理。View是小控制元件widgets和ViewGroup的父類。

    2、ViewGroup：ViewGroup是一個特殊的View物件，其功能是裝載和管理一組View和ViewGroup。它是一組容器，允許控制元件放置其中，並提供對控制元件的管理。

    3、Layout：即使上面講的佈局，它是ViewGroup的子類。

    如下圖，一個容器可以放置和管理多個容器和控制元件，其中可以把VIewGroup看作佈局，View看作控制元件即可。

    基本上了解了佈局和控制元件的關係，那麼就來一個一個地學習下了。

    1、LinearLayout（線性佈局）：控制元件成線性排列，水平或者垂直方向上。還是來個例子吧，新建LayoutTest工程，並且修改程式碼如下：

    其中android:orientation表示的就是水平還是垂直排列，這裡是垂直：vertical，那麼水平就是：horizontal了。如下圖：

    接著看一下android:layout_gravity屬性，不過只有在horizontal的時候才可以在垂直方向上有效，同樣vertical的時候在水平方向上有效，修改各個button的這個屬性，分別為top，center，和bottom，執行效果如下：

    接著學習android:layout_weight屬性，這個主要是控制控制元件比例大小的，比如有一個EditText用來輸入內容，一個button用來發送，那麼一般button包含了Send內容後，其餘的都是由EditText來填充了，修改程式碼如下：

    這裡是比例1:0，也就是button在send這個字被包含了除外的地方都是edit_text的，如果比例為1:1，那麼如下圖所示，平分width：

    2、RelativeLayout（相對佈局）:通過相對定位的方式讓控制元件出現在佈局的任何位置。也就是前面我們學習的所有都是基於相對佈局的。相信有些屬性也有所瞭解了，這裡再講解下。這裡編寫5個button，分別位於左上，右上，中間，左下，右下，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" />

    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" />

    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"/>

    <Button
        android:id="@+id/button5"
        android:text="Button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

    由上述程式碼可知，android:layout_alignParentLeft，android:layout_alignParentRight，android:layout_alignParentBottom，android:layout_centerInParent這麼幾個屬性，其實也很好理解，就是在父view的左邊，右邊，下面，中間，當然還有Top了，這裡預設是Top的。

    當然這些都是相對於父view的，那麼控制元件也是可以相對於控制元件的，這裡都相對於center的button，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"/>

    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"/>
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"/>

    <Button
        android:id="@+id/button5"
        android:text="Button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"/>

</RelativeLayout>

    效果如下所示：

    其實相對的佈局還是比較容易理解的，就是相對於一個控制元件或者View的位置，有左，右，上，下之分，只要ui設計好了，就可以充分利用了。

    3、FrameLayout（單幀佈局）：這個用得比較少，是後面的控制元件覆蓋前面的空間。

    4、TableLayout（表格佈局）：用表格的方式來排列控制元件，表格當然有行列之分，應該儘量讓每一行擁有相同的列數，這樣比較簡單，下面看一個登陸介面的例子：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="使用者名稱"/>
        <EditText
            android:id="@+id/Account"
            android:layout_height="wrap_content"
            android:hint="請輸入使用者名稱"/>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="密碼"/>
        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:hint="請輸入密碼"/>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/login"
            android:text="登陸"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>


</TableLayout>

    從程式碼可以得之，TableLayout是由很多的TableRow組成，每一個TableRow表示一行，這一行可以有許多的子元素控制元件組成，從上圖可知，這裡分了3行，兩列。其中android:layout_span表示登陸按鈕佔了兩列，所以可以和1、2兩行對齊。這裡明顯看出來右邊還有很多的空餘空間，顯得格格不入，所以這裡可以使用android:stretchColumns 屬性，該屬性表示的是如果表格不能佔滿控制元件，那麼指定的那列拉伸到佔滿表格為止。修改程式碼新增android:stretchColumns=1，表示把第2列拉伸，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="使用者名稱"/>
        <EditText
            android:id="@+id/Account"
            android:layout_height="wrap_content"
            android:hint="請輸入使用者名稱"/>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="密碼"/>
        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:hint="請輸入密碼"/>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/login"
            android:text="登陸"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>


</TableLayout>

    這樣，基本上登陸介面就很漂亮了。

    關於佈局基本上就這些了，匆匆寫完這篇文章，然後整理東西，準備回家了。明天就是年三十了，新的一年希望可以把android學習完，然後再寫幾個app，多鑽研設計模式，架構，android原始碼，以及linux。好了，今年的部落格基本上到此結束了。

    2016，新的開始，加油！^_^

附：參考《第一行程式碼》