文章目錄

• LinearLayout ：線性布局
• • android:layout_gravity ：控件的對(duì)齊方式
  • android:layout_weight：權(quán)重
• RelativeLayout ：相對(duì)布局
• • 相對(duì)于父布局進(jìn)行定位
  • 相對(duì)于控件進(jìn)行定位
  • 邊緣對(duì)齊
• FrameLayout ：幀布局
• Percent ：百分比布局
• ConstraintLayout ：約束布局
• • 自定義控件
  • 封裝復(fù)用的頁面
  • 引入封裝好的布局
• 自定義控件

---

LinearLayout ：線性布局

線性布局有水平、垂直兩種排列方式：

• android:orientation="vertical" ：垂直方向排列，此時(shí)高度不可被指定為 match_parent。
• android:orientation="horizontal"：水平方向排列，此時(shí)不能將寬度指定為 match_parent。

android:layout_gravity ：控件的對(duì)齊方式

如果布局方式選擇 horizontal，之后設(shè)置 button1 為 top ；button2 為 center_vertical ； button3 為 bottom 。那么呈現(xiàn)效果如下：

---

android:layout_weight：權(quán)重

vertical 垂直布局時(shí)，layout_weight 可以覆蓋 layout_height 屬性，根據(jù)權(quán)重來分配控件高度：

PS：通過上圖應(yīng)該對(duì) “android:orientation="vertical" ：垂直方向排列，此時(shí)高度不可被指定為 match_parent。” 這句話有了深刻了解， match_parent 屬性會(huì)導(dǎo)致控件占滿整個(gè)屏幕……

horizontal 水平布局時(shí)，layout_weight 可以覆蓋 layout_height 屬性，根據(jù)權(quán)重來分配控件高度：

---

RelativeLayout ：相對(duì)布局

通過相對(duì)定位的方式可以使控件出現(xiàn)在布局的任何位置。

相對(duì)于父布局進(jìn)行定位

關(guān)于位置的屬性：

• layout_alignParentLeft ：處于父布局的左。
• layout_alignParentTop ：處于父布局的上。
• layout_alignParentRight ： 處于父布局的右。
• layout_alignParentBottom ：處于父布局的下。
• layout_centerInParent ：處于父布局的居中。

相對(duì)于控件進(jìn)行定位

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".SecondActivity"><Buttonandroid:id="@+id/button_1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/button_3"android:layout_toLeftOf="@id/button_3"android:text="Button 1"/><Buttonandroid:id="@+id/button_2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/button_3"android:layout_toRightOf="@id/button_3"android:text="Button 2"/><Buttonandroid:id="@+id/button_3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:text="Button 3"/><Buttonandroid:id="@+id/button_4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/button_3"android:layout_toLeftOf="@id/button_3"android:text="Button 4"/><Buttonandroid:id="@+id/button_5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/button_3"android:layout_toRightOf="@id/button_3"android:text="Button 5"/></RelativeLayout>

運(yùn)行結(jié)果：

• layout_above ：處于被引用控件之上。
• layout_below ：處于被引用控件之下。
• layout_toLeftOf ：處于被引用控件之左。
• layout_toRightOf ：處于被引用控件之右。

通過 android:layout_centerInParent 定位 button 3 之后，以其為基準(zhǔn)，定位其他四個(gè) button 的位置。

邊緣對(duì)齊

• layout_alignLeft ：該控件左邊緣與被引用控件左邊緣對(duì)齊。
• layout_alignRight：該控件右邊緣與被引用控件右邊緣對(duì)齊。
• layout_alignTop ：該控件頂部邊緣與被引用控件頂部邊緣對(duì)齊。
• layout_alignBottom ：該控件底部邊緣與被引用控件底部邊緣對(duì)齊。

---

FrameLayout ：幀布局

這種布局沒有方便的定位方式，所有的控件都默認(rèn)的擺放在布局的左上角。但可以類似于 LinearLayout 中通過 layout_gravity 來指定控件在布局中的對(duì)齊方式：

---

Percent ：百分比布局

layout_weight 屬性讓設(shè)計(jì)布局變得更方便，但可惜的是只有 LinearLayout 支持該功能，因此提供了 PercentFrameLayout 和 PercentRelativeLayout 分別解幀布局和相對(duì)布局的功能局限性。

具體來說，即可以不再使用 wrap_content 和 match_parent 等方式來指定控件大小，而是直接指定控件在布局中所占的百分比。

使用時(shí)，由于 Android 將百分比布局定義在了 support 庫中，因此只需在 app/build.gradle 文件中添加下面依賴，需要注意的是 support 庫在 Androidx 1.0.0 及更高版本中被 AndroidX 庫完全取代了……因此添加依賴時(shí)需如此實(shí)現(xiàn)：

• 只用完整路徑 androidx.percentlayout.widget.PercentFrameLayout 作為標(biāo)簽名，因?yàn)榘俜直炔季植幌衿渌齻€(gè)內(nèi)置在系統(tǒng)中。
• 必須定義一個(gè)命名空間 app 才能使用百分比布局的自定義屬性。
• 使用 layout_widthPercent 和 layout_heightPercent 兩個(gè)屬性來定義控件長(zhǎng)款，值以百分比形式表示。
• 繼承自 FrameLayout ，因此所有控件默認(rèn)擺放在左上角，可以借助 layout_gravity 來避免控件重疊。

---

ConstraintLayout ：約束布局

常被視作增強(qiáng)型的相對(duì)布局，ConstraintLayout 不僅可以解決 LinearLayout 常有的嵌套布局缺陷，還具備 RelativeLayout 的相對(duì)布局功能。

自定義控件

• 所有控件都是直接或者間接地繼承自 View 的，所有布局都是直接或間接繼承自 ViewGroup 的。
• View 是 Android 中最基本的一種 UI 組件，它可以在屏幕上繪制一塊矩形區(qū)域，響應(yīng)這塊區(qū)域的各種事件，封裝好的各種控件其實(shí)就是在 View 的基礎(chǔ)之上添加了各自特有的功能。
• ViewGroup 是一種特殊的 View，可以包含很多的 子View 和 子ViewGroup，是一個(gè)放置控件和布局的容器。

---

封裝復(fù)用的頁面

在前端頁面中有許多重復(fù)使用頻率高的頁面，如導(dǎo)航欄、底部欄等，對(duì)于這些頁面，可以一次編撰代碼并封裝，之后多次調(diào)用以實(shí)現(xiàn)復(fù)用。

這里通過約束布局實(shí)現(xiàn)標(biāo)題欄布局文件 title.xml ：

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/cmy4"><Buttonandroid:id="@+id/title_back"android:layout_width="0dp"android:layout_height="50dp"android:layout_margin="5dp"app:layout_constraintHorizontal_weight="1"android:background="@drawable/cmy1"android:text="Back"android:textColor="#fff"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/title_text" /><TextViewandroid:id="@+id/title_text"android:layout_width="0dp"android:layout_height="wrap_content"android:gravity="center"android:text="Title Text"app:layout_constraintHorizontal_weight="2.5"android:textColor="@color/teal_200"android:textSize="24sp"app:layout_constraintTop_toTopOf="@id/title_back"app:layout_constraintBottom_toBottomOf="@id/title_back"app:layout_constraintLeft_toRightOf="@id/title_back"app:layout_constraintRight_toLeftOf="@id/title_edit" /><Buttonandroid:id="@+id/title_edit"android:layout_width="0dp"android:layout_height="50dp"android:layout_margin="5dp"app:layout_constraintHorizontal_weight="1"android:background="@drawable/cmy1"android:text="Edit"android:textColor="@color/white"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toRightOf="@id/title_text"app:layout_constraintRight_toRightOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

android:background 不生效

在 res/values/themes.xml 中：

修改為：

相對(duì)定位

通過形如 layout_constraintTop_toTopOf 的屬性來定位控件，該類屬性值可為 parent 從而與父布局相適配。舉兩個(gè)例子，上述代碼中：

• title_back 中 app:layout_constraintLeft_toLeftOf="parent" ：意為將 title_back 的 左邊緣 約束到 父布局 的 左邊緣。
• title_edit 中 app:layout_constraintStart_toEndOf="@id/title_back" ：意為 title_edit 的 起始位置 即 title_back 的 結(jié)束位置。

相對(duì)定位中的 layout_constraintBaseline_toBaselineOf 意為 文本基線 對(duì)齊。

對(duì)齊前： 對(duì)齊后：

通過相對(duì)布局實(shí)現(xiàn)居中：

用一張圖總結(jié)相對(duì)定位：

鏈

如果兩個(gè)或以上控件通過下圖的方式約束在一起，就可以認(rèn)為是他們是一條鏈（圖為橫向的鏈，縱向同理）：

一條鏈的第一個(gè)控件是這條鏈的鏈頭，當(dāng)所有控件的 高/寬度 都為 固定值/wrap_content 時(shí)，可以在 鏈頭 中通過設(shè)置 layout_constraintHorizontal_chainStyle 來改變 鏈的樣式：

• spread ：展開元素 (默認(rèn))；
• spread_inside ：展開元素，但鏈的兩端貼近 parent；
• packed ：鏈的元素將被打包在一起。
  
  當(dāng)所有控件的 高/寬度 都為 0dp 時(shí)，可以在 每個(gè)控件 中通過設(shè)置 layout_constraintHorizontal_weight(constraintVertical為縱向) 來改變 鏈的權(quán)重。

界面顯示：

---

引入封裝好的布局

• 在布局文件中加上一句 <include layout="@layout/title"/> ；
• 隱藏系統(tǒng)自帶的標(biāo)題欄：

ActionBar actionBar = getSupportActionBar(); if (actionBar != null) actionBar.hide();

---

自定義控件

不光布局會(huì)被重復(fù)使用，某些控件其功能是固定的，比如返回按鈕，都是銷毀當(dāng)前活動(dòng)。因此也可以對(duì)其進(jìn)行封裝復(fù)用，創(chuàng)建一個(gè)自定義類 TitleLayout.java 繼承 LinearLayout，并且重寫里面的構(gòu)造方法：

public class TitleLayout extends LinearLayout {public TitleLayout(Context context, Attributes attrs){super(context, (AttributeSet) attrs);LayoutInflater.from(context).inflate(R.layout.title, this);} }

此時(shí)，在布局中引入 TitleLayout 控件就會(huì)調(diào)用這個(gè)構(gòu)造函數(shù)，因此使用 LayoutInflater 來實(shí)現(xiàn)動(dòng)態(tài)加載，from() 方法可以構(gòu)建出一個(gè) LinearLayout 對(duì)象，然后調(diào)用 inflate 可以動(dòng)態(tài)加載一個(gè)布局文件，里面?zhèn)魅雰蓚€(gè)參數(shù)：

• 加載布局文件的 id；
• 參數(shù)一的父布局。

現(xiàn)在可以在其他 xml 文件中（比如 second_layout.xml）添加這個(gè)自定義控件：

<com.example.activitytest.TitleLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"></com.example.activitytest.TitleLayout>

com.example.activitytest 是 TitleLayout 文件所在的完整路徑名。如此一來即可把 title 布局界面直接搬到 second_layout 布局中，那么 SecondActivity 其顯示的布局自然就是 title.xml 的樣子。

此時(shí)我們可以為布局中的控件注冊(cè)點(diǎn)擊事件：

總結(jié)

以上是生活随笔為你收集整理的Android入门（八） | 常用的界面布局 及 自定义控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。