Android ：约束布局ConstraintLayout 之 Chains 链式约束
生活随笔
收集整理的這篇文章主要介紹了
Android ：约束布局ConstraintLayout 之 Chains 链式约束
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ConstraintLayout
- Chains 鏈式約束
- 1. 鏈 簡介
- ( 1 ) Chains ( 鏈 ) 簡介
- 2. 創建 鏈 及 分析 生成的代碼
- ( 1 ) 創建水平鏈
- ( 2 ) 鏈創建后的代碼及樣式
- ( 3 ) 鏈創建后 生成的 代碼
- 3. 鏈頭 及 鏈的間距
- ( 1 ) 鏈頭設置
- ( 2 ) 鏈 間距
- 4. 鏈 的 三種風格
- ( 1 ) 鏈 風格設置
- ( 2 ) 鏈 的 三種風格
- ( 3 ) CHAIN_SPREAD 樣式 代碼示例 及 效果
- ( 4 ) CHAIN_SPREAD_INSIDE 樣式 代碼示例 及 效果
- ( 5 ) CHAIN_PACKED 樣式 代碼示例 及 效果
- 5. 鏈的權重設置
- ( 1 ) 鏈 的 權重設置
- ( 2 ) 鏈 的 權重設置 代碼示例
- 6. 常見問題
- 參考
Chains 鏈式約束
1. 鏈 簡介
( 1 ) Chains ( 鏈 ) 簡介
-
1.實現的約束功能 : Chains 約束 提供了一種機制 , 通過 該機制 可以在單個方向 ( 垂直 或 水平 ) 上 控制一組組件的排列分布 ; 與此同時 , 另外一個方向上的 約束行為 不受 Chains 影響 , 兩個方向的約束是獨立的 ;
-
2.分組共享空間 : Chains 提供了一個類似于 分組的功能 , 其 包含了多個組件 , 這些組件共享 水平 或 垂直 方向的空間 ;
-
3.類似于 LinearLayout 的 weight 功能 : Chains 的功能 與 線性布局 的 weight 屬性 設置類似 , 但其功能要比線性布局 強大很多 ;
-
4.Chains 約束方向 : 使用前需要限定一個方向 , 水平方向 , 或者 垂直方向 , 一組組件共享 該方向上的空間 。
2. 創建 鏈 及 分析 生成的代碼
( 1 ) 創建水平鏈
創建 水平 Chains :
- 1.創建多個 組件 : 先 在 界面中 創建 多個組件 , 其方向 呈 水平放置 , 或 垂直放置 , 此處創建 水平方向的 Chains ( 鏈 ) ;
- 2.具體創建方法 : 選中 一組 組件 , 然后 右鍵 選擇 Chains -> Create Horizontal Chain , 即 創建了一個 水平方向的 Chains ( 鏈式約束 ) ;
( 2 ) 鏈創建后的代碼及樣式
Chains 創建后 代碼 及 樣式 : 下圖是 官方配圖 , 表示一個 最小的 鏈 , 只有兩個 控件 , 控件兩端 約束于 父控件 , 控件之間 互相約束 ;
1.創建完畢后的樣式 : Chains 創建完畢后 , 在 Blueprint ( 藍圖 ) 和 Design ( 設計 ) 界面的樣式 ; 最左側 和 最右側 是 普通的約束 , 中間 和 兩側的元素 是 使用 鏈 連接起來 的 ;
( 3 ) 鏈創建后 生成的 代碼
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"tools:layout_editor_absoluteY="25dp"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button2"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"tools:layout_editor_absoluteY="114dp" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button3"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button1"tools:layout_editor_absoluteY="114dp" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button2"tools:layout_editor_absoluteY="114dp" /></android.support.constraint.ConstraintLayout>注意：
bias屬性，表示子控件相對父控件的位置傾向，可以使用屬性：
layout_constraintHorizontal_bias layout_constraintVertical_bias假設設置控件A相對父控件橫向偏差是30%：
<android.support.constraint.ConstraintLayout ...><Button android:id="@+id/button" ...app:layout_constraintHorizontal_bias="0.3"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/> </android.support.constraint.ConstraintLayout>app:layout_constraintHorizontal_bias詳解
布局代碼分析如下：
1、Chains 約束 下的 控件 代碼 分析 : 兩側 組件 約束與 父控件 , 中間的組件 互相約束 ;
- 1.左側按鈕布局分析 : 其 左側 約束于 父組件 , 右側約束于 中間按鈕控件 ;
- 2.中間按鈕布局分析 : 其 左側 約束于 左邊按鈕控件 , 右側 約束于 右側按鈕控件 ;
- 3.右側按鈕布局分析 : 其 左側 約束于 中間按鈕控件 , 右側 約束于 父控件 ;
3. 鏈頭 及 鏈的間距
( 1 ) 鏈頭設置
鏈頭 ( Chains Head ) 設置 :
-
1.鏈的行為控制 : 通過設置 鏈 的 第一個 控件 的 參數的屬性 , 可以控制 Chains 約束 的各種行為 ; 這個 控件 成為 Chains Head ( 鏈頭 ) ;
-
2.鏈頭元素選定 :
- ① 水平方向 : 水平方向上 , 鏈頭 是 最左側的 控件 ;
- ② 垂直方向 : 垂直方向上 , 鏈頭 是 最頂部的 控件 ;
( 2 ) 鏈 間距
鏈 的 間距 :
- 1.設置邊距 : 鏈 中的控件 , 如果設置了 鏈 的 某個方向上的邊距 , 邊距效果會體現出來 ,
- 2.空間計算 : 在 CHAIN_SPREAD 樣式下 , 如果設置了 Margin , 該距離會從剩余的空間中扣除 ;
4. 鏈 的 三種風格
( 1 ) 鏈 風格設置
通過為 鏈 設置不同的風格 , 可以控制 鏈的行為 ;
- 1.鏈風格設置 : 設置 鏈頭 ( 鏈的 第一個控件 ) 的屬性 , 即可為 鏈 設置不同的風格 ;
- 2.垂直方向 鏈 風格設置 : 設置 鏈頭 控件 的 layout_constraintVertical_chainStyle 屬性 , 即 添加 垂直方向 鏈 的風格 ;
- 3.水平方向 鏈 風格設置 : 設置 鏈頭 控件 的 layout_constraintHorizontal_chainStyle 屬性 , 即 添加 水平方向 鏈 的風格 ;
( 2 ) 鏈 的 三種風格
1、CHAIN_SPREAD 風格 : 鏈中的控件 , 均勻分布在 垂直 或 水平 的 空間中 , 設置鏈頭屬性值 " spread " ; 設置鏈頭如下屬性 :
app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintVertical_chainStyle="spread"
2.CHAIN_SPREAD_INSIDE 風格 : 與 CHAIN_SPREAD 類似 , 但是 鏈 兩端的控件緊貼被約束的控件位置 , 三個控件還是平均占用指定方向的空間 ; 設置鏈頭如下屬性spread_inside :
3.CHAIN_PACKED 風格 : 鏈 上的控件 被打包在一起 , 三個控件 的位置可以 通過控制 app:layout_constraintHorizontal_bias 或 app:layout_constraintVertical_bias 屬性值改變 來修改 ; 設置鏈頭如下屬性packed :
( 3 ) CHAIN_SPREAD 樣式 代碼示例 及 效果
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"tools:layout_editor_absoluteY="25dp"><!-- 鏈頭 控件 中設置 Chain 風格 spread --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button2"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"tools:layout_editor_absoluteY="114dp"app:layout_constraintHorizontal_chainStyle="spread"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button3"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button1"tools:layout_editor_absoluteY="114dp" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button2"tools:layout_editor_absoluteY="114dp" /></android.support.constraint.ConstraintLayout>( 4 ) CHAIN_SPREAD_INSIDE 樣式 代碼示例 及 效果
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"tools:layout_editor_absoluteY="25dp"><!-- 鏈頭 控件 中設置 Chain 風格 spread_inside --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button2"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"tools:layout_editor_absoluteY="114dp"app:layout_constraintHorizontal_chainStyle="spread_inside"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button3"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button1"tools:layout_editor_absoluteY="114dp" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button2"tools:layout_editor_absoluteY="114dp" /></android.support.constraint.ConstraintLayout>( 5 ) CHAIN_PACKED 樣式 代碼示例 及 效果
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"tools:layout_editor_absoluteY="25dp"><!-- 鏈頭 控件 中設置 Chain 風格 packed--><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button2"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toStartOf="parent"tools:layout_editor_absoluteY="114dp"app:layout_constraintHorizontal_chainStyle="packed"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button3"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button1"tools:layout_editor_absoluteY="114dp" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.5"app:layout_constraintStart_toEndOf="@+id/button2"tools:layout_editor_absoluteY="114dp" /></android.support.constraint.ConstraintLayout>5. 鏈的權重設置
//設置水平方向的權重 app:layout_constraintHorizontal_weight="1" //設置垂直方向的權重 app:layout_constraintVertical_weight="1"( 1 ) 鏈 的 權重設置
Chain ( 鏈 ) 的 Weight ( 權重 ) 設置 :
-
1.前提 ( CHAIN_SPREAD 風格 ) : Weight 權重 設置 是在 CHAIN_SPREAD 風格下設置的 ;
-
2.單個 控件 設置 MATCH_CONSTRAINT 尺寸 : 將 鏈 上控件 的尺寸設置為 MATCH_CONSTRAINT 屬性值 , 該控件會將 鏈上的 水平 或 垂直 方向的剩余空間 全部占滿 ;
-
3.多個 控件 設置 MATCH_CONSTRAINT 尺寸 : 如果為 鏈 上的 多個控件的尺寸設置 MATCH_CONSTRAINT 屬性 , 那么這些控件將平均占用鏈上的剩余空間 ;
-
4.MATCH_CONSTRAINT 尺寸說明 : MATCH_CONSTRAINT 尺寸 等價于 0dip ;
-
5、.多個 控件 設置 Weight 屬性 : 要設置權重的控件 , 對應方向的尺寸設置 0dip , 下面的示例 , 中間控件設置權重 2 , 兩側控件設置權重 1 ; 該行為與 LinearLayout 中設置 Weight 屬性類似 ;
( 2 ) 鏈 的 權重設置 代碼示例
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/btn1"android:layout_width="@dimen/dimen_0dp"android:layout_height="@dimen/dimen_40dp"android:text="button1"app:layout_constraintRight_toLeftOf="@id/btn2"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintHorizontal_chainStyle="spread_inside"app:layout_constraintHorizontal_weight="1"/><Buttonandroid:id="@+id/btn2"android:layout_width="@dimen/dimen_0dp"android:layout_height="@dimen/dimen_40dp"android:text="button2"app:layout_constraintLeft_toRightOf="@id/btn1"app:layout_constraintRight_toLeftOf="@id/btn3"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintHorizontal_weight="2"/><Buttonandroid:id="@+id/btn3"android:layout_width="@dimen/dimen_0dp"android:layout_height="@dimen/dimen_40dp"android:text="button3"app:layout_constraintLeft_toRightOf="@id/btn2"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintHorizontal_weight="1"/></androidx.constraintlayout.widget.ConstraintLayout>6. 常見問題
不過如果某個控件的寬度設置的不是wrap_content，而是一個具體的寬度dp。還比較大。這個時候布局就會有問題。
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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="wrap_content"android:background="@color/colorAccent"><Buttonandroid:id="@+id/sbBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="sb"app:layout_constraintEnd_toStartOf="@+id/sbBtn01"app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><Buttonandroid:id="@+id/sbBtn01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="sb01"app:layout_constraintEnd_toStartOf="@+id/sbBtn02"app:layout_constraintStart_toEndOf="@+id/sbBtn"app:layout_constraintTop_toTopOf="parent" /><Buttonandroid:id="@+id/sbBtn02"android:layout_width="200dp"android:layout_height="wrap_content"android:text="sb02"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/sbBtn01"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>解決：我們需要把控件的寬度都設置為0dp， 這樣能保證控件依然均分,某個控件的內容如果超出寬度也不會影響均分效果。
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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="wrap_content"android:background="@color/colorAccent"><Buttonandroid:id="@+id/sbBtn"android:layout_width="0dp"android:layout_height="wrap_content"android:text="sb"app:layout_constraintEnd_toStartOf="@+id/sbBtn01"app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><Buttonandroid:id="@+id/sbBtn01"android:layout_width="0dp"android:layout_height="wrap_content"android:text="sb01"app:layout_constraintEnd_toStartOf="@+id/sbBtn02"app:layout_constraintStart_toEndOf="@+id/sbBtn"app:layout_constraintTop_toTopOf="parent" /><Buttonandroid:id="@+id/sbBtn02"android:layout_width="0dp"android:layout_height="wrap_content"android:text="小星星小星星小星星小星星小星星吃吃吃吃吃吃吃吃吃"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/sbBtn01"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
當然你也可以一些控件自適應wrap_content，剩下的控件0dp，這樣就能保證自適應的控件內容顯示正常（不換行），但是設置為0dp的控件就會被強制各種壓迫:
參考
1、Chains 鏈式約束
2、約束布局ConstraintLayout看這一篇就夠了
總結
以上是生活随笔為你收集整理的Android ：约束布局ConstraintLayout 之 Chains 链式约束的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html页面tree方法,etree.h
- 下一篇： 【2021-12-11】在 Window