一、簡介

如下圖所示，按照介面編寫的方式，可以分為傳統佈局和新型佈局兩種。

**1.線性佈局：**是平常練習demo時最常用的佈局，分為水平、垂直方向兩種線性佈局，即設定其屬性orientation："vertical或horizontal"。【注：在不指定方向時，預設為horizontal，即水平方向】

**2.相對佈局：**依據某一控制元件的位置，來確定另一控制元件的位置，即另一控制元件相對於當前控制元件的位置。

**3.表格佈局：**適用於多行多列的佈局方式，通過表格方式來佈局控制元件的位置，並且每個TableLayout由多個TableRow（表示行）組成。

**4.網格佈局：**是在Android4.0之後引入的一個新佈局，和上面的TableLayout有點類似，但GridLayout比TableLayout更加好用、靈活。

**5.幀佈局：**放入的所有控制元件都會被依次放在左上區域，因此下一個控制元件會重疊覆蓋上一個控制元件，且無法為控制元件指定一個確切的位置。一般用於瀏覽單張圖片。

**6.絕對佈局：**這個佈局一般不會使用。螢幕的左上角為原點（0,0），橫軸為x軸且向右為遞增，縱軸為y軸且向下為遞增，依據layout_x及layout_y屬性分別設定控制元件的X及Y座標。

**7.約束佈局：**先說一下約束佈局相對於傳統佈局的優勢：①採用視覺化的介面，拖拽控制元件即可完成介面的佈局；②解決佈局巢狀過多的問題，採用約束的方式來指定各個控制元件的位置和關係的，它有點類似於RelativeLayout，但遠比RelativeLayout要更強大。

二、常用屬性

2.1 所有佈局的公有屬性

2.2 各個佈局的特有屬性

2.2.1 線性佈局

• 在不指定線性佈局方向的情況下，預設採用水平佈局。

• 為了完全按比例分配剩餘空間，我們一般將控制元件的layout_width或layout_height設定為0dp，然後分別設定其權重值。【這裡僅考慮常用的，至於寬設定為wrap_content或match_parent請自行嘗試即可】

例：水平方向上有3個TextView，設定權重為1:1:1，則程式碼如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"><!--不指定方向的情況下預設為水平方向-->

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FF7F"
            android:text="text1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00BFFF"
            android:text="text2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FA8072"
            android:text="text3" />
    </LinearLayout>
 

執行結果如下：

將權重比例改為1:2:3，執行結果如下。

2.2.2 相對佈局

2.2.3 表格佈局

例：xml佈局程式碼如下：

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

    <TextView
        android:layout_height="wrap_content"
        android:background="#ff1493"
        android:text="我獨佔一行" /><!--這裡的文字框沒有設定寬度，預設為父容器的寬度-->

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button android:text="button1" />

        <Button android:text="btn2" />

        <Button android:text="button3" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--設定layout_column屬性，這裡是跳過第1列，從第2列開始放置控制元件-->
        <Button
            android:layout_column="1"
            android:text="button44444" /><!--該按鈕文字最長，決定了該列的寬度-->

        <Button android:text="b5" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button android:text="button6" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--設定layout_span屬性，這裡是合併3個單元格，即該按鈕佔3個單元格-->
        <Button
            android:layout_span="3"
            android:text="button7" />

        <Button android:text="button8" />
    </TableRow>

</TableLayout>

執行結果如下：

由上面的演示可以看出：

1. 如果直接在TableLayout中新增控制元件，則該控制元件將佔滿一行，如第一行的文字框獨佔一行。

2. 若要在一行上放置多個控制元件，則需要在控制元件的外層新增一個TableRow容器，如第2、3、4、5行放置了不同個數的的按鈕。

3. TableRow容器中控制元件的個數決定了該行有多少列（如圖分別有1，3，2，1，2列），而TableLayout的列數由控制元件最多的TableRow決定（整個佈局有3列）。

4. TableLayout的列的寬度由該列中最寬的單元格決定，如Button44444按鈕決定了第二列的寬度。

5. 設定layout_column屬性，這裡是跳過第1列，從第2列開始放置控制元件。

6. 設定layout_span屬性，這裡是合併3個單元格，即該按鈕佔3個單元格。

請依次新增新增以下佈局屬性： ① 收縮1、2列：

android:shrinkColumns="0,1"

執行結果如下：顯示不完全的button8顯示完全了，並且Button1、Button44444、Button6按鈕有收縮。

②隱藏第1列：

android:collapseColumns="0"

執行結果如下：由於第4行僅有一個按鈕，則整個第四行隱藏。

③ 伸展第3列：

android:stretchColumns="2"

執行結果如下：由於僅有第2、3行有第三列，並且Button3與B5有拉伸。

2.2.4 網格佈局 GridLayout相關屬性如下：

2.2.5 幀佈局

• 幀佈局是這幾種佈局中最簡單的佈局，新增到其中的控制元件預設會放到佈局區域的左上角；

• 幀佈局沒有任何的定位方式，後一個控制元件會覆蓋前一個控制元件；

• 幀佈局的大小有控制元件中最大的控制元件決定；

注：設定前景影象的位置可以兩個屬性疊加，例如右下角：bottom|right。

2.2.6 絕對佈局 絕對佈局很少使用，一般有兩個常用控制元件屬性：

2.2.7 約束佈局 約束佈局是Google推薦的一種佈局，有關於其拖拽控制元件、新增約束、藉助Inspector設定屬性、Gidelines的使用以及自動新增約束的功能

最後

如果你看到了這裡，覺得文章寫得不錯就給個讚唄！歡迎大家評論討論！如果你覺得那裡值得改進的，請給我留言。一定會認真查詢，修正不足，定期免費分享技術乾貨。感興趣的小夥伴可以點一下關注哦。謝謝！

相關推薦