Android入門教程 | UI佈局之LinearLayout 線性佈局

Android有幾種佈局？

• LinearLayout（線性佈局）
• RelativeLayout（相對佈局）
• FrameLayout（幀佈局）
• TableLayout（表格佈局）
• GridLayout（網格佈局）
• AbsoluteLayout（絕對佈局）

LinearLayout

LinearLayout 又稱作線性佈局，是一種非常常用的佈局。

LinearLayout 裡面可以放置多個 view（這裡稱為子view，子項）。 子 view 可以是TextView，Button，或者是 LinearLayout，RelativeLayout 等等。 它們將會按順序依次排布為一列或一行。 接下來介紹一些在 xml 中的設定。

先在 xml 中放一個 LinearLayout。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"></LinearLayout>

下面介紹一些屬性。

豎直排布與水平排布

透過設定 orientation 來確定水平或豎直排布子 view。 可選值有 vertical 和 horizontal。

豎直排布

設定 orientation 為 vertical。

android:orientation="vertical"

水平排布

設定 orientation 為 horizontal。

android:orientation="horizontal"

排布方式 gravity

決定子 view 的排布方式。 gravity有“重力”的意思，我們引申為子view會向哪個方向靠攏。  gravity有幾個選項可以選擇，我們常用的有start，end，left，right，top，bottom。

例如:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="start"
    android:orientation="vertical"></LinearLayout>

下面是 gravity 的選項。我們會把 LinearLayout 叫做“父view”或者“容器”。

常量	定義值	描述
top	30	把view推到容器裡的頂部。不會改變view的尺寸。
bottom	50	把view推到容器的底部。不會改變view的尺寸。
center	11	子view水平與豎直都居中。不會改變view的尺寸。
center_horizontal	1	子view水平居中。不會改變view的尺寸。
center_vertical	10	子view垂直居中。不會改變view的尺寸。
start	800003	把view推到容器裡最開始的地方。不會改變view的尺寸。
end	800005	把子view放到容器的最尾部。不改變view的尺寸。
left	3	子view從容器的左邊開始排布。不會改變view的尺寸。
right	5	子view從容器的右邊開始排布。不會改變view的尺寸。

start 和 left，end 和 right 並不一定是同樣的效果。 對於 RTL（right to left）型別的手機，比如某些阿拉伯文的系統。start 是從右到左的。 我們日常生活中很少見到RTL，一般都是 LTR。但還是建議多用 start 而不是 left。

gravity可以同時設定多個值，用或符號 |來連線。比如 android:gravity="end|center_vertical"。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:gravity="end|center_vertical"
    android:orientation="vertical"></LinearLayout>

子 view 的 layout_gravity

layout_gravity 看起來和 gravity 有些相似。

• android:gravity 控制自己內部的子元素。
• android:layout_gravity 是告訴父元素自己的位置。

取值範圍和gravity是一樣的。代表的含義也相似。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#90CAF9"
            android:text="none" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#9FA8DA"
            android:text="center" />
    </LinearLayout>

分割佔比layout_weight

可以在設定子 view 的 layout_weight，來確定空間佔比。 設定  layout_weight 的時候，一般要設定  layout_width="0dp"。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#FFCC80"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#eaeaea"
            android:gravity="center"
            android:text="1" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="2" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#eaeaea"
            android:text="1" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:background="#BEC0D1"
            android:text="3" />
    </LinearLayout>

分割佔比之和 weightSum

android:weightSum 定義子 view 的 weight 之和的最大值。如果不直接指定，它會是所有子 view 的  layout_weight 之和。 如果想給單獨的一個子 view 一半的空間佔比，可以設定子 view 的 layout_weight 為0.5，並且設定 LinearLayout 的 weightSum 為1.0。

取值可以是浮點數，比如 9.3。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#4DB6AC"
        android:weightSum="9.3"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="4.6"
            android:background="#eaeaea"
            android:gravity="center"
            android:text="4.6" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#7986CB"
            android:layout_weight="2.5"
            android:text="2.5" />
    </LinearLayout>

分割線 divider

設定 divider 與 showDividers 屬性。

<pre id="__code_8" style="box-sizing: inherit; color: var(--md-code-fg-color); font-feature-settings: &quot;kern&quot;; font-family: &quot;Roboto Mono&quot;, SFMono-Regular, Consolas, Menlo, monospace; direction: ltr; position: relative; margin: 1em 0px; line-height: 1.4;"> `android:divider="@drawable/divider_linear_1"
    android:showDividers="middle"

直接給divider設定顏色是無效的。

在drawable目錄裡新建一個xml，叫做 divider_linear_1.xml。

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="
    <solid android:color="#7986CB" />
    <size
        android:width="1dp"
        android:height="1dp" /></shape>

size 必須指定，否則當做 divider 來用時會顯示不出來。

LinearLayout 設定 divider。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#eaeaea"
        android:divider="@drawable/divider_linear_1"
        android:orientation="vertical"
        android:showDividers="middle">        ....

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:background="#FFD9D9"
        android:divider="@drawable/divider_linear_1"
        android:orientation="horizontal"
        android:showDividers="middle">        ...

showDividers有幾種可選：

• middle 中間的分割線
• beginning 開始的分割線
• end 結束的分割線
• none 沒有分割線