1. 程式人生 > 其它 >Android入門教程 | UI佈局之LinearLayout 線性佈局

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="http://schemas.android.com/apk/res/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 沒有分割線

LinearLayout 線性佈局入門視訊參考