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=" <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 沒有分割線
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70008155/viewspace-2839678/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Android入門教程 | UI佈局之RelativeLayout 相對佈局AndroidUI
- Android入門教程:ConstraintLayout約束佈局AndroidAI
- DirectionalLayout線性佈局
- css 佈局入門CSS
- 你需要的Grid佈局入門教程
- 彈性佈局(伸縮佈局)
- Android 佈局Android
- HarmonyOS Java UI之DirectionalLayout佈局JavaUI
- grid佈局快速入門
- Android開發之常用佈局Android
- flex彈性佈局 響應式佈局Flex
- css之彈性佈局(flex)CSSFlex
- Android中常見的佈局和佈局引數Android
- Android學習筆記之檔案分類和線性佈局Android筆記
- 三欄佈局之自適應佈局
- 移動佈局基礎之 流式佈局
- CSS 三欄佈局之聖盃佈局和雙飛翼佈局CSS
- Flutter線性佈局Row和ColumnFlutter
- 阿里Android開發規範:UI 與佈局阿里AndroidUI
- Android學習—— Android佈局Android
- UI設計教程學習分享:APP佈局UIAPP
- Android 佈局優化Android優化
- android --巧用 flexboxLayout 佈局AndroidFlex
- React Native基礎&入門教程:初步使用Flexbox佈局React NativeFlex
- css佈局-float佈局CSS
- CSS佈局 --- 居中佈局CSS
- CSS:三欄佈局之雙飛翼佈局CSS
- flex佈局屬性Flex
- Flutter佈局——Flex、FittedBox、Stack、Container佈局教程【超詳細】FlutterFlexAI
- Android效能優化之佈局優化Android優化
- Android系統修改之Notification佈局修改Android
- java:佈局方法(流佈局)Java
- qt 佈局---表單佈局QT
- 居中佈局、三欄佈局
- Android開發 - 檢視佈局屬性解析Android
- 寫給 Android 開發的小程式佈局指南,Flex 佈局!AndroidFlex
- CSS入門指南-4:頁面佈局CSS
- Android FlexboxLayout 佈局詳解AndroidFlex