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: "kern"; font-family: "Roboto Mono", 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 沒有分割線