本系列文章目錄：更多精品文章分類
本系列持續更新中….
一個界面總是要由許多的控件來組成的，如何讓這些控件可以在界面上有條不絮的擺放呢？這就需要佈局來實現了。佈局是一種可以放置很多控件的容器，可以讓這些控件按照一定的規律來排列。
佈局內即可以放置普通控件也可以放置佈局，可以有多層嵌套。關係圖
接下來介紹 Android 中 4 中常用的基本佈局
3.3.1 線性佈局
Linerlayout 又稱為線性佈局，是一種非常常用的佈局，這個佈局會將它所包含的所有控件在線性方向上排列。
既然是線性那麼肯定就不止一個方向了，通過 android:orientation 屬性來指定排列的方向。vertical 代表垂直排列，horizontal 是水平排列。
代碼：
1
2<linearlayout> 3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical">
6 <button> 7 android:layout_width="wrap_content"
8 android:layout_height="wrap_content"
9 android:text="@string/app_name"/>
10 <button>11 android:layout_width="wrap_content"
12 android:layout_height="wrap_content"
13 android:text="@string/app_name"/>
14 <button>15 android:layout_width="wrap_content"
16 android:layout_height="wrap_content"
17 android:text="@string/app_name"/>
18/<button>/<button>/<button>/<linearlayout>
上面是垂直排列，然後我們把 android:orientation="vertical" 修改為 android:orientation="horizontal"
效果：
注意如果把排列設置為 vertical 則內部控件的高度就不能設置成 match_parent 因為如果你這樣設置的話，其他控件就沒有空間了。同樣的如果排列為 horizontal 的話內部控件的寬度就不能指定為 match_parent
android:gravity 用於指定文字在本控件中的對齊方式。
android:layout_gravity 用於指定本控件在佈局中的對齊方式。
注意如果排列方向是 horizontal 的話，則 layout_gravity 只有垂直方向上的對齊方式才會生效，因為此時水平方向上的長度是不固定的，每添加一個控件水平方向上的長度都會改變。同樣道理，排列方向是 vertical 的時候，layout_gravity 只有在水平方向上對齊方式才會有效。
android:layout_weight 屬性允許我使用比例的方式來指定控件的大小，在屏幕適配方面有非常重要的作用。
3.3.2 相對佈局
RelativeLayout 稱作相對佈局，它是通過相對定位的方式讓控件出現在佈局的任何位置。
重要屬性：
android:layout_alignParentLeft android:layout_alignParentRight android:layout_alignParentTop android:layout_alignParentBottom android:layout_centerInParent 這幾個屬性都是內部控件相對於父控件的排列位置。
同樣也有相對於控件進行定位的 layout_above layout_below layout_toLeftOf layout_toRightOf
alignLeft 表示讓一個控件的左邊和另一個控件的左邊對齊
alignRight 表示一個控件的右邊和另一個控件的右邊對齊
alignTop alignBottom 道理也是一樣
3.3.3 幀佈局
FrameLayout 稱作幀佈局。應用場景較少，所有控件都默認擺放在佈局的左上角。
1
2<framelayout> 3android:layout_width="match_parent"
4android:layout_height="match_parent">
5<button> 6 android:layout_width="wrap_content"
7 android:layout_height="wrap_content"
8 android:text="@string/app_name"/>
9<imageview>10 android:layout_width="wrap_content"
11 android:layout_height="wrap_content"
12 android:class="lazy" data-original="@mipmap/ic_launcher"/>
13/<imageview>/<button>/<framelayout>
效果
可以看到後面添加的 ImageView 被遮擋了。
layout_gravity 屬性在控件中還是生效的。
3.3.4 百分比佈局
前面三種佈局都是在 Android 1.0 版本中就支持了。一直沿用到現在。在 LinearLayout 中支持使用 layout_weight 屬性來實現按照比例來控制控件的大小，其他兩種佈局就不支持了。為此 Android 引入了全新的佈局方式來解決此問題-----百分比佈局。在 API 24.1.0 新添加的，不過在 API 26 中就不推薦使用了。
由於 LinearLayout 本身已經支持按照比例指定控件大小了，因此百分比佈局只是為了 FrameLayout 和 RelativeLayout 進行了功能擴展，提供了 PercentFrameLayout 和 PercentRelativeLayout 兩個全新的佈局。
由於百分比佈局是在後來添加的，所以為了兼容之前版本，Android 團隊將百分比佈局定義在了 support 庫 中（如果你現在使用了 androidx 就沒有這些問題了，這些支持庫都統一放在了 androidx 中）。因此我們需要先引入一下（如果你使用的是 androidx 就不用引用了）
1// 在 app/build.gradle文件中
2dependencies{
3 // 添加
4 compile 'com.android.support:percent:24.2.1'
5}
1
2<androidx.percentlayout.widget.percentframelayout> 3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 xmlns:app="http://schemas.android.com/apk/res-auto">
6
7 <button> 8 android:layout_gravity="left"
9 app:layout_widthPercent = "50%"
10 app:layout_heightPercent = "50%"
11 android:layout_height="wrap_content"
12 android:text="@string/app_name" />
13 <button>14 app:layout_widthPercent = "50%"
15 app:layout_heightPercent = "50%"
16 android:layout_gravity="right"/>
17 <button>18 app:layout_widthPercent = "50%"
19 app:layout_heightPercent = "50%"
20 android:layout_gravity="left|bottom"/>
21
22 <button>23 app:layout_widthPercent = "50%"
24 app:layout_heightPercent = "50%"
25 android:layout_gravity="right|bottom"/>
26/<button>/<button>/<button>/<button>/<androidx.percentlayout.widget.percentframelayout>
效果圖：
由於 PercentFrameLayout 不是系統 SDK 中的，因此有些屬性還要用 app 這種命名空間。我們之所以能夠使用 app 前綴的屬性就是因為我們在開頭加入了定義 app 的命名空間，當然我們一直使用 android 前綴的屬性也是同樣的道理，只不過是系統幫我們自動添加了。
使用百分比佈局主要就是這兩個屬性 app:widthPercent 和 app:heightPercent 使用的時候 Android Studio 的佈局編輯頁面可以會有紅色下劃線提醒，這是因為我們沒有使用 android:layout_width 和 android:layout_height 。不過這不影響運行程序。
PercentRelativeLayout 的用法也是類似，繼承了 RelativeLayout 的所有屬性。
這樣幾種常用的佈局就講完了，還有 AbsoluteLayout TableLayout 等佈局不常使用就不講解了。
3.4 系統控件不夠用？創建自定義控件
上一節我們學習了 Android 中的一些常用的控件和佈局的用法。這裡我們來看一下他們的關係圖
可以看到說有的控件都是直接或者間接繼承 View ，所有的佈局都是直接或者間接繼承 ViewGroup 。
View 是 Android 中最基本的一種 UI 組件，它可以在屏幕上繪製一塊矩形區域，並且能夠響應這塊區域的各種事件，因此，我們使用的各種控件其實就是在 View 的基礎的又添加了一些特有的功能。而 ViewGroup 是一種特殊的 View ，它可以包含很多子 View 和 子 ViewGroup，是一個用於放置控件和佈局的容器。
那麼當系統給我提供的控件不能滿足我們的需要的時候，我們也可以自己創建符合我們自己需求的控件。
3.4.1 引入佈局
我們知道現在的應用程序幾乎在界面頂部都有一個標題欄，雖然 Android 系統已經給我們提供了，但是這裡我們不用它，我們自己創建一個。
我們自己創建一個佈局
1
2<linearlayout> 3 android:layout_width="match_parent"
4 android:layout_height="wrap_content"
5 android:background="@color/colorPrimary"
6 android:orientation="horizontal">
7
8 <button> 9 android:layout_width="wrap_content"
10 android:layout_height="wrap_content"
11 android:id="@+id/title_back"
12 android:background="@color/colorAccent"
13 android:layout_gravity="center"
14 android:text="back"
15 android:textAllCaps="false"
16 android:textColor="#FFFFFF"/>
17 <textview>18 android:layout_gravity="center"
19 android:layout_width="0dp"
20 android:layout_weight="1"
21 android:textSize="24sp"
22 android:layout_height="wrap_content"
23 android:text="Text Title"
24 android:id="@+id/title_text"
25 android:gravity="center"
26 />
27 <button>28 android:layout_width="wrap_content"
29 android:layout_height="wrap_content"
30 android:layout_gravity="center"
31 android:layout_margin="5dp"
32 android:background="@color/colorPrimaryDark"
33 android:text="Edit"
34 android:textAllCaps="false"/>
35/<button>/<textview>/<button>/<linearlayout>
就這樣這個簡單的標題欄佈局就寫好了，那麼如何使用呢？很簡單，在需要使用的佈局中。
1 <include>
就添加上面一句話就把剛剛的佈局引入了。
使用的時候不要忘了隱藏自帶的標題欄
1 @Override
2 protected void onCreate(@Nullable Bundle savedInstanceState) {
3 super.onCreate(savedInstanceState);
4 setContentView(R.layout.activity_ui);
5 ActionBar actionBar = getSupportActionBar();
6 if (actionBar !=null){
7 actionBar.hide();
8 }
9 initView();
10
11 }
3.4.2 創建自定義控件
引入佈局的技巧確實解決了重複編寫佈局代碼的問題，但是佈局中有一些控件還需要響應事件，這種情況就需要我們來自定義控件了。
新建 TitleLayout 繼承自 LinearLayout，讓它作為我們自定義標題欄的控件。
1public class TitleLayout extends LinearLayout {
2
3 public TitleLayout(Context context, @Nullable AttributeSet attrs) {
4 super(context, attrs);
5 LayoutInflater.from(context).inflate(R.layout.title,this);
6 Button btBack = findViewById(R.id.title_back);
7 Button btEdit = findViewById(R.id.bt_edit);
8 btBack.setOnClickListener(new OnClickListener() {
9 @Override
10 public void onClick(View v) {
11 ((Activity)getContext()).finish();
12 }
13 });
14 btEdit.setOnClickListener(new OnClickListener() {
15 @Override
16 public void onClick(View v) {
17 // 你自己想做的事情
18 }
19 });
20 }
21}
好了這樣一個標題欄自定義控件就完成了。
閱讀更多 Android程序猿 的文章
