1.屏障Barrier简介

1.屏障Barrier中，包含了多个组件，基于这些组件在某个方向(如：上，下，左,右)上创建的一条虚拟的线，屏障线的位置是其指定方向的最外侧的位置；如3个组件的右屏障位置是，最右侧组件的右边缘位置；
2.Barrier是一条隐藏的线，注意是1条线，不是4条。
3.Barrier是不可见的，仅用于约束视图组件；
4.Barrier ( 屏障 ) 没有位置定义 , 其位置由组成屏障的多个组件的位置确定 , 如果某个组件的位置改变 , 其 Barrier 的位置也有可能随之改变 ; ( 不是一定改变 )。
5.其作用与 Guideline 引导线一样 , 只是 屏障线 Barrier 生成方式与 Guideline 不一样 , Guideline 是指定好位置 , Barrier 是通过多个组件生成的位置 ;

2.Barrier和GuideLine对比

1 . 屏障线 Barrier 与 引导线 Guideline 区别 : 主要是生成方式不一样 , 用于约束其它组件的方式基本一致 ;

① 屏障线 : 如多个组件某个方向 ( 右侧 ) 的线 是屏障线 , 如果其中最右边的组件 , 向右移动 , 屏障线会随着该组件向右移动 ;
② 引导线 : 引导线的位置是定死的 , 是相对于父容器边缘的位置 ;

2 . 屏障线 Barrier 与 引导线 Guideline 联系 : 二者用于约束其它组件的方式基本一样 ;

① 垂直方向的 屏障线 与 引导线 : 用于组件的水平方向的约束 ;
② 水平方向的 屏障线 与 引导线 : 用于组件的垂直方向的约束 ;

3.Barrier使用场景

1 . 屏障 Barrier 适用场景 : 被约束组件 , 在某个方向上 , 被多个组件约束的情况 ;

① 单个组件约束 : 某个组件被单个组件约束 , 没有必要使用 屏障 , 直接使用该单个组件约束另外一个组件就可以 ;
② 多个组件约束 : 某个组件被多个组件约束 , 此时非常适合使用屏障 ;

2 . 示例 : 组件 C CC , 在水平方向上 , C CC 组件的左侧必须在 A , B A , BA,B 两个组件的右侧 ;

① 屏障线 : 中间的白色虚线是屏障线 ;
② 屏障组件 : 该屏障 Barrier 包含 A , B A,BA,B 两个视图 ;
③ 屏障方向 : 该屏障的方向是右侧 , 其屏障线的位置是 A , B A,BA,B 两个组件中 , 最右侧的组件的右边缘位置 ;

image.png

3 . 屏障 Barrier 线条数 : 每个 Barrier 组件 , 代表一个方向的屏障 , 如果要使用屏障将多个组件包裹起来 , 需要创建 4 个 Barrier 组件 , 分别设置 4 个不同的方向 ;

4 . 注意 : 一个屏障 Barrier 只能在一个方向上起作用 , 如果想要在 4个方向同时建立屏障 , 需要创建 4 个 Barrier , 分别设置 左 ( LEFT ) , 上 ( TOP ) , 右 ( RIGHT ) , 下 ( BOTTOM ) , 四个方向的属性 ;

4.Barrier位置说明

1 . 屏障的位置 : 是根据其 包含的组件 在某个方向 最远的边缘 确定 ;

示例 : 如下图 屏障 包含组件 A , B , 屏障的方向是右侧 , 那么屏障位置就是 A , B 两个组件最右边的边缘位置 ; 如下图所示 , 组件 A 的右侧边缘就是屏障线位置 ;

image.png

2 . 屏障线 移动 : 如果 屏障 包含的组件 A , B A, BA,B 的右侧位置 , 发生了改变 , 那么 右侧方向的 屏障线 也会随之进行变化 ;

示例 : 如下图所示 , 下图中的 组件 A , B 的右侧边缘改变 , B 组件的右侧突出 , 屏障位置是两个组件的最右侧边缘 , 那么此时屏障线就变为 B 组件最右侧 ;

image.png

5.Barrier相关属性

1 . Barrier ( 屏障 ) 组件 : 设置该 屏障 是哪几个组件的屏障 ; 属性值是组件的 id , 如果有多个 id , 使用逗号隔开 ;

app:constraint_referenced_ids="button2,button1"

2 . Barrier ( 屏障 ) 方向 : 设置该 屏障线 , 是这些组件哪个方向的屏障 , 可以选择四个方向 , 分别是 上 , 下 , 左 , 右 , 四个方向 ;

可选属性值 : left ( start ) , right ( end ) , top , bottom ;

app:barrierDirection="top"

6.Barrier总结

① 设置组件包含 : app:constraint_referenced_ids=“button2,button1” ; 组件 ID 之间使用逗号隔开 ;
② 设置方向 : app:barrierDirection=“top” ; 可选属性值 left ( start ) , right ( end ) , top , bottom ;