文章目錄

• • • • I . 屏障 Barrier 約束 簡介
      • II . 屏障線 Barrier 與 引導(dǎo)線 Guideline 對比
      • III . 屏障 Barrier 適用場景
      • IV . 屏障 Barrier 位置說明
      • V . 屏障 Barrier 相關(guān)屬性
      • VI . 屏障 Barrier 可視化操作
      • VII . 屏障 Barrier 代碼示例
      • VIII . 屏障 Barrier 總結(jié)

I . 屏障 Barrier 約束 簡介

---

屏障 Barrier 簡介 :

① 屏障 Barrier 概念 : 屏障 Barrier 中 , 包含了多個組件 , 基于這些組件在某個方向 ( 如 : 上,下,左,右 ) 上創(chuàng)建的一條虛擬的線 , 屏障線的位置是其指定方向的最外側(cè)的位置 ; 如 $3$ 個組件的右屏障位置是 , 最右側(cè)組件的右邊緣位置 ;

② 本質(zhì) : Barrier ( 屏障 ) 是一條隱藏的線 , 注意是 $1$ 條線 , 不是 $4$ 條 ;

③ 可見性 : Barrier ( 屏障 ) 是不可見的 , 僅用于約束視圖組件 ;

④ 位置 : Barrier ( 屏障 ) 沒有位置定義 , 其位置由組成屏障的多個組件的位置確定 , 如果某個組件的位置改變 , 其 Barrier 的位置也有可能隨之改變 ; ( 不是一定改變 )

⑤ 作用 : 其作用與 Guideline 引導(dǎo)線一樣 , 只是 屏障線 Barrier 生成方式與 Guideline 不一樣 , Guideline 是指定好位置 , Barrier 是通過多個組件生成的位置 ;

II . 屏障線 Barrier 與 引導(dǎo)線 Guideline 對比

---

1 . 屏障線 Barrier 與 引導(dǎo)線 Guideline 區(qū)別 : 主要是生成方式不一樣 , 用于約束其它組件的方式基本一致 ;

① 屏障線 : 如多個組件某個方向 ( 右側(cè) ) 的線 是屏障線 , 如果其中最右邊的組件 , 向右移動 , 屏障線會隨著該組件向右移動 ;

② 引導(dǎo)線 : 引導(dǎo)線的位置是定死的 , 是相對于父容器邊緣的位置 ;

2 . 屏障線 Barrier 與 引導(dǎo)線 Guideline 聯(lián)系 : 二者用于約束其它組件的方式基本一樣 ;

① 垂直方向的 屏障線 與 引導(dǎo)線 : 用于組件的水平方向的約束 ;

② 水平方向的 屏障線 與 引導(dǎo)線 : 用于組件的垂直方向的約束 ;

III . 屏障 Barrier 適用場景

---

1 . 屏障 Barrier 適用場景 : 被約束組件 , 在某個方向上 , 被多個組件約束的情況 ;

① 單個組件約束 : 某個組件被單個組件約束 , 沒有必要使用 屏障 , 直接使用該單個組件約束另外一個組件就可以 ;

② 多個組件約束 : 某個組件被多個組件約束 , 此時非常適合使用屏障 ;

2 . 示例 : 組件 $C$ , 在水平方向上 , $C$ 組件的左側(cè)必須在 $A,B$ 兩個組件的右側(cè) ;

① 屏障線 : 中間的白色虛線是屏障線 ;

② 屏障組件 : 該屏障 Barrier 包含 $A,B$ 兩個視圖 ;

③ 屏障方向 : 該屏障的方向是右側(cè) , 其屏障線的位置是 $A,B$ 兩個組件中 , 最右側(cè)的組件的右邊緣位置 ;

3 . 屏障 Barrier 線條數(shù) : 每個 Barrier 組件 , 代表一個方向的屏障 , 如果要使用屏障將多個組件包裹起來 , 需要創(chuàng)建 $4$ 個 Barrier 組件 , 分別設(shè)置 $4$ 個不同的方向 ;

4 . 注意 : 一個屏障 Barrier 只能在一個方向上起作用 , 如果想要在 $4$ 個方向同時建立屏障 , 需要創(chuàng)建 $4$ 個 Barrier , 分別設(shè)置 左 ( LEFT ) , 上 ( TOP ) , 右 ( RIGHT ) , 下 ( BOTTOM ) , 四個方向的屬性 ;

IV . 屏障 Barrier 位置說明

---

1 . 屏障的位置 : 是根據(jù)其 包含的組件 在某個方向 最遠(yuǎn)的邊緣 確定 ;

示例 : 如下圖 屏障 包含組件 $A,B$ , 屏障的方向是右側(cè) , 那么屏障位置就是 $A,B$ 兩個組件最右邊的邊緣位置 ; 如下圖所示 , 組件 $A$ 的右側(cè)邊緣就是屏障線位置 ;

2 . 屏障線 移動 : 如果 屏障 包含的組件 $A,B$ 的右側(cè)位置 , 發(fā)生了改變 , 那么 右側(cè)方向的 屏障線 也會隨之進(jìn)行變化 ;

示例 : 如下圖所示 , 下圖中的 組件 $A,B$ 的右側(cè)邊緣改變 , $B$ 組件的右側(cè)突出 , 屏障位置是兩個組件的最右側(cè)邊緣 , 那么此時屏障線就變?yōu)?$B$ 組件最右側(cè) ;

V . 屏障 Barrier 相關(guān)屬性

---

1 . Barrier ( 屏障 ) 組件 : 設(shè)置該 屏障 是哪幾個組件的屏障 ; 屬性值是組件的 id , 如果有多個 id , 使用逗號隔開 ;

app:constraint_referenced_ids="button2,button1"

2 . Barrier ( 屏障 ) 方向 : 設(shè)置該 屏障線 , 是這些組件哪個方向的屏障 , 可以選擇四個方向 , 分別是 上 , 下 , 左 , 右 , 四個方向 ;

可選屬性值 : left ( start ) , right ( end ) , top , bottom ;

app:barrierDirection="top"

VI . 屏障 Barrier 可視化操作

---

1 . 添加屏障線 : 如下圖所示 , 選擇 “Add Vertical Barrier” 選項 , 可以添加垂直方向的屏障 ; 選擇 “Add Horizontal Barier” 選項 , 可以添加水平方向的屏障 ;

2 . 為屏障配置包含的組件 : 在 Component Tree 面板中 , 鼠標(biāo)左鍵按住左鍵 , 拖動到 Barrier 中 , 即可為 Barrier 屏障 添加包含的組件 ;

3 . 設(shè)置屏障方向 : 選中要編輯的 屏障 Barrier 組件 , 在 Attributes 面板中的 Common Attributes 選項卡中的 barrierDirection 中選擇 $6$ 個方向 ;

VII . 屏障 Barrier 代碼示例

---

1 . 代碼示例 :

<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><!-- 屏障中較小的組件 --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /><!-- 屏障中較大的組件 --><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World! Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toBottomOf="@id/button1"app:layout_constraintVertical_bias="0.2" /><!-- 左側(cè)屏障 --><androidx.constraintlayout.widget.Barrierandroid:id="@+id/barrier2"android:layout_width="wrap_content"android:layout_height="wrap_content"app:barrierDirection="left"app:constraint_referenced_ids="button2,button1" /><!-- 頂部屏障 --><androidx.constraintlayout.widget.Barrierandroid:id="@+id/barrier3"android:layout_width="wrap_content"android:layout_height="wrap_content"app:barrierDirection="top"app:constraint_referenced_ids="button1,button2" /></androidx.constraintlayout.widget.ConstraintLayout>

2 . 效果展示 :

VIII . 屏障 Barrier 總結(jié)

---

屏障 Barrier 總結(jié) :

① 設(shè)置組件包含 : app:constraint_referenced_ids=“button2,button1” ; 組件 ID 之間使用逗號隔開 ;

② 設(shè)置方向 : app:barrierDirection=“top” ; 可選屬性值 left ( start ) , right ( end ) , top , bottom ;

總結(jié)

以上是生活随笔為你收集整理的【约束布局】ConstraintLayout 屏障 Barrier 约束 ( 简介 | 屏障适用场景 | 位置说明 | 相关属性 | 可视化操作 | 代码示例 | 总结 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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