讀前思考
學(xué)習(xí)一門技術(shù)或者看一篇文章最好的方式就是帶著問題去學(xué)習(xí)到腥，這樣才能在過程中有茅塞頓開朵逝、燈火闌珊的感覺，記憶也會更深刻乡范。
- 有哪些常用的布局配名？
- 每一種布局有何特點(diǎn)與不同啤咽？
- 布局上如何優(yōu)化？
1. 約束布局 ConstraintLayout
ConstraintLayout 是 Android Studio 2.2 中主要的新增功能之一渠脉，ConstraintLayout 使用約束的方式來指定各個控件的位置和關(guān)系的宇整，它有點(diǎn)類似于 RelativeLayout，但遠(yuǎn)比 RelativeLayout 要更強(qiáng)大芋膘，它可以有效地解決布局嵌套過多的問題鳞青。
本文主要講解通過 xml 的編寫實現(xiàn) ConstraintLayout，如果想要了解拖拽方式为朋，可參考 Android新特性介紹臂拓，ConstraintLayout完全解析
1. 首先用 ConstraintLayout 實現(xiàn)置頂，高自適應(yīng)习寸，寬 match_parent
<TextView
android:id="@+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="姓名"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
實現(xiàn)效果圖
2. 實現(xiàn)一個控件在另一個控件下方
<TextView
android:id="@+id/tv_mobile"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="手機(jī)號"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_name"
/>
實現(xiàn)效果圖
3. 實現(xiàn)控件上下左右居中顯示
<TextView
android:id="@+id/tv_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="年齡"
android:gravity="center"
android:textSize="30sp"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
實現(xiàn)效果
- 通過布局權(quán)重胶惰，實現(xiàn)百分比布局
<TextView
android:id="@+id/tab0"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="tab1"
android:textColor="@color/colorAccent"
android:textSize="20sp"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tab1" />
<TextView
android:id="@+id/tab1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="tab2"
android:textSize="20sp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tab0"
app:layout_constraintRight_toLeftOf="@+id/tab2"
app:layout_constraintTop_toTopOf="@+id/tab0" />
<TextView
android:id="@+id/tab2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="tab3"
app:layout_constraintHorizontal_weight="1"
android:textColor="@color/colorPrimary"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tab1"
app:layout_constraintRight_toLeftOf="@id/tab3"
app:layout_constraintTop_toTopOf="@+id/tab0" />
<TextView
android:id="@+id/tab3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="tab4"
android:textSize="20sp"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tab2"
app:layout_constraintRight_toLeftOf="@+id/tab4"
app:layout_constraintTop_toTopOf="@+id/tab0" />
<TextView
app:layout_constraintHorizontal_weight="1"
android:id="@+id/tab4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="tab5"
android:textColor="@color/colorPrimary"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/tab3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/tab0" />
實現(xiàn)效果圖
2. 線性布局 LinearLayout
線性布局是按照水平或垂直的順序?qū)⒆釉?可以是控件或布局)依次按照順序排列，每一個元素都位于前面一個元素之后霞溪。線性布局分為兩種：水平方向和垂直方向的布局孵滞。分別通過屬性 android:orientation="vertical" 和 android:orientation="horizontal" 來設(shè)置。 android:layout_weight 表示子元素占據(jù)的空間大小的比例威鹿。
接下來我們來實現(xiàn)如下效果
具體代碼實現(xiàn)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/msg"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="">
</EditText>
</LinearLayout>
// 第二行為 mc m+ m- mr 四個Button構(gòu)成一個水平布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mc" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="m+" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="m-" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mr" android:layout_weight="1">
</Button>
</LinearLayout>
</LinearLayout>
3. 相對布局 RelativeLayout
RelativeLayout 繼承于 android.widget.ViewGroup剃斧，其按照子元素之間的位置關(guān)系完成布局的轨香，作為 Android 系統(tǒng)五大布局中最靈活也是最常用的一種布局方式忽你，非常適合于一些比較復(fù)雜的界面設(shè)計。
接下來我們來實現(xiàn)如下效果
具體代碼如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:text="Button1"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/btn1"
android:layout_toLeftOf="@id/btn1"
android:text="Button2"
/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/btn1"
android:layout_toRightOf="@id/btn1"
android:text="Button3"
/>
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/btn2"
android:layout_toLeftOf="@id/btn3"
android:layout_toRightOf="@id/btn2"
android:text="Button4"
/>
</RelativeLayout>
由于我在項目中很少使用下面的布局臂容，就不過多介紹了
4. 表格布局 TableLayout
表格布局科雳，適用于多行多列的布局格式，每個 TableLayout 是由多個 TableRow 組成脓杉，一個 TableRow 就表示 TableLayout 中的每一行糟秘，這一行可以由多個子元素組成。實際上 TableLayout 和 TableRow 都是 LineLayout 線性布局的子類球散。但是 TableRow 的參數(shù) android:orientation 屬性值固定為 horizontal尿赚，且 android:layout_width=MATCH_PARENT，android:layout_height=WRAP_CONTENT蕉堰。所以 TableRow 實際是一個橫向的線性布局凌净，且所以子元素寬度和高度一致。
5. 框架布局 FrameLayout
FrameLayout 是最簡單的布局了屋讶。所有放在布局里的控件冰寻，都按照層次堆疊在屏幕的左上角。后加進(jìn)來的控件覆蓋前面的控件皿渗。
在 FrameLayout 布局里斩芭，定義任何空間的位置相關(guān)的屬性都毫無意義轻腺。控件自動的堆放在左上角划乖，根本不聽你的控制贬养。但是控件本身是可以控制自己內(nèi)部的布局的。
6. AbsoluteLayou 絕對布局
絕對布局中將所有的子元素通過設(shè)置 android:layout_x 和 android:layout_y 屬性迁筛，將子元素的坐標(biāo)位置固定下來煤蚌，即坐標(biāo) (android:layout_x, android:layout_y) ，layout_x 用來表示橫坐標(biāo)细卧，layout_y 用來表示縱坐標(biāo)尉桩。屏幕左上角為坐標(biāo) (0,0)，橫向往右為正方贪庙，縱向往下為正方蜘犁。實際應(yīng)用中，這種布局用的比較少止邮，因為 Android 終端一般機(jī)型比較多这橙，各自的屏幕大小。分辨率等可能都不一樣导披，如果用絕對布局屈扎，可能導(dǎo)致在有的終端上顯示不全等。
布局優(yōu)化
- 使用 include 標(biāo)簽加載重復(fù)布局
- 使用 merge 標(biāo)簽減少布局嵌套
- 使用 ViewStub 動態(tài)控制布局顯示
由于篇幅問題就不對上述做具體實例撩匕，自己可以嘗試著實現(xiàn)鹰晨。
文章已經(jīng)讀到末尾了，不知道最初的幾個問題你都會了嗎止毕？如果不會的話模蜡？可以再針對不會的問題進(jìn)行精讀哦！答案都在文中扁凛，相信你肯定可以解決的忍疾！
