四種基本佈局

一個豐富的界面總是要由很多個控件組成的，那我們如何才能讓各個控件都有條不紊地擺放在界面上，而不是亂糟糟的呢？這就需要藉助佈局來實現了。佈局是一種可用於放置很多控件的容器，它可以按照一定的規律調整內部控件的位置，從而編寫出精美的界面。

一:LinearLayout

LinearLayout又稱作線性佈局，是一種非常常用的佈局。正如它名字所描述的一樣，這個佈局會將它所包含的控件在線性方向上依次排列。

我們通過android:orientation屬性指定了排列方向是vertical，如果指定的是horizontal，控件就會在水平方向上排列了。

1.修改activity_main.xml代碼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

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

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

</LinearLayout>

2.修改activity_main.xml代碼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

3.再次修改activity_main.xml

<LinearLayout 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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button 3" />

</LinearLayout>

4.再次修改activity_main裏面的代碼

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something" />

    <Button
        android:id="@+id/send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Send" />

</LinearLayout>

由於我們使用了android:layout_weight屬性，此時控件的寬度就不應該再由android:layout_width來決定，這裏指定成0是一種比較規範的寫法。

然後我們在EditText和Button裏都將android:layout_weight屬性的值指定爲1，這表示EditText和Button將在水平方向平分寬度

5.再次修改activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something"
        />

    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        />

</LinearLayout>

二:RelativeLayout

RelativeLayout又稱作相對佈局，也是一種非常常用的佈局。和LinearLayout的排列規則不同，RelativeLayout顯得更加隨意一些，它可以通過相對定位的方式讓控件出現在佈局的任何位置。也正因爲如此，RelativeLayout中的屬性非常多，不過這些屬性都是有規律可循的，其實並不難理解和記憶。

修改activity_main裏面的代碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

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

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

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

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

</RelativeLayout>

2.再次修改activity_main.xml裏面的代碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="Button 2" />

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

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

</RelativeLayout>

三:FrameLayout

FrameLayout相比於前面兩種佈局就簡單太多了，因此它的應用場景也少了很多。這種佈局沒有任何的定位方式，所有的控件都會擺放在佈局的左上角。

修改activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

</FrameLayout>

四:TableLayout

TableLayout允許我們使用表格的方式來排列控件，這種佈局也不是很常用，你只需要瞭解一下它的基本用法就可以了。既然是表格，那就一定會有行和列，在設計表格時我們儘量應該讓每一行都擁有相同的列數，這樣的表格也是最簡單的。不過有時候事情並非總會順從我們的心意，當表格的某行一定要有不相等的列數時，就需要通過合併單元格的方式來應對。

修改activity_main.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>

        <TextView
            android:layout_height="wrap_content"
            android:text="Account:" />

        <EditText
            android:id="@+id/account"
            android:layout_height="wrap_content"
            android:hint="Input your account" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_height="wrap_content"
            android:text="Password:" />

        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/login"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="Login" />
    </TableRow>

</TableLayout>

在TableLayout中每加入一個TableRow就表示在表格中添加了一行，然後在TableRow中每加入一個控件，就表示在該行中加入了一列，TableRow中的控件是不能指定寬度的。這裏我們將表格設計成了三行兩列的格式，第一行有一個TextView和一個用於輸入賬號的EditText，第二行也有一個TextView和一個用於輸入密碼的EditText，我們通過將android:inputType屬性的值指定爲textPassword，把EditText變爲密碼輸入框。可是第三行只有一個用於登錄的按鈕，前兩行都有兩列，第三行只有一列，這樣的表格就會很難看，而且結構也非常不合理。這時就需要通過對單元格進行合併來解決這個問題，使用android:layout_span="2"讓登錄按鈕佔據兩列的空間，就可以保證表格結構的合理性了。

修改activity_main.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">