文章目錄

• • 1. 鏈 簡介
  • • ( 1 ) Chains ( 鏈 ) 簡介
  • 2. 創(chuàng)建 鏈 及 分析 生成的代碼
  • • ( 1 ) 創(chuàng)建水平鏈
    • ( 2 ) 鏈創(chuàng)建后的代碼及樣式
    • ( 3 ) 鏈創(chuàng)建后 生成的 代碼
    • ( 4 ) 生成的 鏈 代碼分析
  • 3. 鏈頭 及 鏈的間距
  • • ( 1 ) 鏈頭設(shè)置
    • ( 2 ) 鏈 間距
  • 4. 鏈 的 三種風(fēng)格
  • • ( 1 ) 鏈 風(fēng)格設(shè)置
    • ( 2 ) 鏈 的 三種風(fēng)格
    • ( 3 ) CHAIN_SPREAD 樣式 代碼示例 及 效果
    • ( 4 ) CHAIN_SPREAD_INSIDE 樣式 代碼示例 及 效果
    • ( 5 ) CHAIN_PACKED 樣式 代碼示例 及 效果
  • 5. 鏈的權(quán)重設(shè)置
  • • ( 1 ) 鏈 的 權(quán)重設(shè)置
    • ( 2 ) 鏈 的 權(quán)重設(shè)置 代碼示例

1. 鏈 簡介

( 1 ) Chains ( 鏈 ) 簡介

Chains 簡介 :

• 1.實(shí)現(xiàn)的約束功能 : Chains 約束 提供了一種機(jī)制 , 通過 該機(jī)制 可以在單個(gè)方向 ( 垂直 或 水平 ) 上 控制一組組件的排列分布 ; 與此同時(shí) , 另外一個(gè)方向上的 約束行為 不受 Chains 影響 , 兩個(gè)方向的約束是獨(dú)立的 ;
• 2.分組共享空間 : Chains 提供了一個(gè)類似于 分組的功能 , 其 包含了多個(gè)組件 , 這些組件共享 水平 或 垂直 方向的空間 ;
• 3.類似于 LinearLayout 的 weight 功能 : Chains 的功能 與 線性布局 的 weight 屬性 設(shè)置類似 , 但其功能要比線性布局 強(qiáng)大很多 ;
• 4.Chains 約束方向 : 使用前需要限定一個(gè)方向 , 水平方向 , 或者 垂直方向 , 一組組件共享 該方向上的空間 ;

---

2. 創(chuàng)建 鏈 及 分析 生成的代碼

( 1 ) 創(chuàng)建水平鏈

創(chuàng)建 水平 Chains :

• 1.創(chuàng)建多個(gè) 組件 : 先 在 界面中 創(chuàng)建 多個(gè)組件 , 其方向 呈 水平放置 , 或 垂直放置 , 此處創(chuàng)建 水平方向的 Chains ( 鏈 ) ;

• 2.具體創(chuàng)建方法 : 選中 一組 組件 , 然后 右鍵 選擇 Chains -> Create Horizontal Chain , 即 創(chuàng)建了一個(gè) 水平方向的 Chains ( 鏈?zhǔn)郊s束 ) ;

---

( 2 ) 鏈創(chuàng)建后的代碼及樣式

Chains 創(chuàng)建后 代碼 及 樣式 : 下圖是 官方配圖 , 表示一個(gè) 最小的 鏈 , 只有兩個(gè) 控件 , 控件兩端 約束于 父控件 , 控件之間 互相約束 ;

• 1.創(chuàng)建完畢后的樣式 : Chains 創(chuàng)建完畢后 , 在 Blueprint ( 藍(lán)圖 ) 和 Design ( 設(shè)計(jì) ) 界面的樣式 ; 最左側(cè) 和 最右側(cè) 是 普通的約束 , 中間 和 兩側(cè)的元素 是 使用 鏈 連接起來 的 ;
  

( 3 ) 鏈創(chuàng)建后 生成的 代碼

鏈創(chuàng)建完畢后自動(dòng)生成的代碼 : 之后 逐個(gè) 控件分析 其生成的代碼 ;

<?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>

---

( 4 ) 生成的 鏈 代碼分析

Chains 約束 下的 控件 代碼 分析 : 兩側(cè) 組件 約束與 父控件 , 中間的組件 互相約束 ;

• 1.左側(cè)按鈕布局分析 : 其 左側(cè) 約束于 父組件 , 右側(cè)約束于 中間按鈕控件 ;

<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" />

• 2.中間按鈕布局分析 : 其 左側(cè) 約束于 左邊按鈕控件 , 右側(cè) 約束于 右側(cè)按鈕控件 ;

<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" />

• 3.右側(cè)按鈕布局分析 : 其 左側(cè) 約束于 中間按鈕控件 , 右側(cè) 約束于 父控件 ;

<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" />

---

3. 鏈頭 及 鏈的間距

( 1 ) 鏈頭設(shè)置

鏈頭 ( Chains Head ) 設(shè)置 :

• 1.鏈的行為控制 : 通過設(shè)置 鏈 的 第一個(gè) 控件 的 參數(shù)的屬性 , 可以控制 Chains 約束 的各種行為 ; 這個(gè) 控件 成為 Chains Head ( 鏈頭 ) ;
• 2.鏈頭元素選定 :
  • ① 水平方向 : 水平方向上 , 鏈頭 是 最左側(cè)的 控件 ;
  • ② 垂直方向 : 垂直方向上 , 鏈頭 是 最頂部的 控件 ;
    

---

( 2 ) 鏈 間距

鏈 的 間距 :

• 1.設(shè)置邊距 : 鏈 中的控件 , 如果設(shè)置了 鏈 的 某個(gè)方向上的邊距 , 邊距效果會(huì)體現(xiàn)出來 ,
• 2.空間計(jì)算 : 在 CHAIN_SPREAD 樣式下 , 如果設(shè)置了 Margin , 該距離會(huì)從剩余的空間中扣除 ;

---

4. 鏈 的 三種風(fēng)格

( 1 ) 鏈 風(fēng)格設(shè)置

鏈 ( Chain ) 的 風(fēng)格 設(shè)置 : 通過為 鏈 設(shè)置不同的風(fēng)格 , 可以控制 鏈的行為 ;

• 1.鏈風(fēng)格設(shè)置 : 設(shè)置 鏈頭 ( 鏈的 第一個(gè)控件 ) 的屬性 , 即可為 鏈 設(shè)置不同的風(fēng)格 ;
• 2.垂直方向 鏈 風(fēng)格設(shè)置 : 設(shè)置 鏈頭 控件 的 layout_constraintHorizontal_chainStyle 屬性 , 即 添加 垂直方向 鏈 的風(fēng)格 ;
• 3.水平方向 鏈 風(fēng)格設(shè)置 : 設(shè)置 鏈頭 控件 的 layout_constraintHorizontal_chainStyle 屬性 , 即 添加 水平方向 鏈 的風(fēng)格 ;

---

( 2 ) 鏈 的 三種風(fēng)格

鏈 ( Chain ) 的 風(fēng)格 : 設(shè)置鏈頭的屬性即可 ;

• 1.CHAIN_SPREAD 風(fēng)格 : 鏈中的控件 , 均勻分布在 垂直 或 水平 的 空間中 , 設(shè)置鏈頭屬性值 " spread " ; 設(shè)置鏈頭如下屬性 :

app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintVertical_chainStyle="spread"

• 2.CHAIN_SPREAD_INSIDE 風(fēng)格 : 與 CHAIN_SPREAD 類似 , 但是 鏈 兩端的控件緊貼被約束的控件位置 , 三個(gè)控件還是平均占用指定方向的空間 ; 設(shè)置鏈頭如下屬性 :

app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintVertical_chainStyle="spread_inside"

• 3.CHAIN_PACKED 風(fēng)格 : 鏈 上的控件 被打包在一起 , 三個(gè)控件 的位置可以 通過控制 app:layout_constraintHorizontal_bias 或 app:layout_constraintVertical_bias 屬性值改變 來修改 ; 設(shè)置鏈頭如下屬性 :

app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintHorizontal_bias="0.5"app:layout_constraintVertical_chainStyle="packed" app:layout_constraintVertical_bias="0.5"

---

( 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"><!-- 鏈頭 控件 中設(shè)置 Chain 風(fēng)格 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"><!-- 鏈頭 控件 中設(shè)置 Chain 風(fēng)格 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"><!-- 鏈頭 控件 中設(shè)置 Chain 風(fēng)格 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. 鏈的權(quán)重設(shè)置

( 1 ) 鏈 的 權(quán)重設(shè)置

Chain ( 鏈 ) 的 Weight ( 權(quán)重 ) 設(shè)置 :

• 1.前提 ( CHAIN_SPREAD 風(fēng)格 ) : Weight 權(quán)重 設(shè)置 是在 CHAIN_SPREAD 風(fēng)格下設(shè)置的 ;
• 2.單個(gè) 控件 設(shè)置 MATCH_CONSTRAINT 尺寸 : 將 鏈 上控件 的尺寸設(shè)置為 MATCH_CONSTRAINT 屬性值 , 該控件會(huì)將 鏈上的 水平 或 垂直 方向的剩余空間 全部占滿 ;
• 3.多個(gè) 控件 設(shè)置 MATCH_CONSTRAINT 尺寸 : 如果為 鏈 上的 多個(gè)控件的尺寸設(shè)置 MATCH_CONSTRAINT 屬性 , 那么這些控件將平均占用鏈上的剩余空間 ;
• 4.MATCH_CONSTRAINT 尺寸說明 : MATCH_CONSTRAINT 尺寸 等價(jià)于 0dip ;
• 4.多個(gè) 控件 設(shè)置 Weight 屬性 : 要設(shè)置權(quán)重的控件 , 對(duì)應(yīng)方向的尺寸設(shè)置 0dip , 下面的示例 , 中間控件設(shè)置權(quán)重 2 , 兩側(cè)控件設(shè)置權(quán)重 1 ; 該行為與 LinearLayout 中設(shè)置 Weight 屬性類似 ;

//設(shè)置水平方向的權(quán)重 app:layout_constraintHorizontal_weight="1" //設(shè)置垂直方向的權(quán)重 app:layout_constraintVertical_weight="1"

( 2 ) 鏈 的 權(quán)重設(shè)置 代碼示例

<?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"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"><!-- 鏈頭 控件 中設(shè)置 Chain 風(fēng)格 spread_inside 的 weight 權(quán)重設(shè)置 --><Buttonandroid:id="@+id/button1"android:layout_width="0dip"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"app:layout_constraintHorizontal_weight="1"/><Buttonandroid:id="@+id/button2"android:layout_width="0dip"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"app:layout_constraintHorizontal_weight="2"/><Buttonandroid:id="@+id/button3"android:layout_width="0dip"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"app:layout_constraintHorizontal_weight="1"/></android.support.constraint.ConstraintLayout>

總結(jié)

以上是生活随笔為你收集整理的【约束布局】ConstraintLayout 之 Chains 链式约束 ( Chains 简介 | 代码 及 布局分析 | 链头设置 | 间距设置 | 风格设置 | 权重设置 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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