I . 屏障 Barrier 约束 简介
屏障 Barrier 简介 :
① 屏障 Barrier 概念 : 屏障 Barrier 中 , 包含了多个组件 , 基于这些组件在某个方向 ( 如 : 上,下,左,右 ) 上创建的一条虚拟的线 , 屏障线的位置是其指定方向的最外侧的位置 ; 如 3 33 个组件的右屏障位置是 , 最右侧组件的右边缘位置 ;
② 本质 : Barrier ( 屏障 ) 是一条隐藏的线 , 注意是 1 11 条线 , 不是 4 44 条 ;
③ 可见性 : Barrier ( 屏障 ) 是不可见的 , 仅用于约束视图组件 ;
④ 位置 : Barrier ( 屏障 ) 没有位置定义 , 其位置由组成屏障的多个组件的位置确定 , 如果某个组件的位置改变 , 其 Barrier 的位置也有可能随之改变 ; ( 不是一定改变 )
⑤ 作用 : 其作用与 Guideline 引导线一样 , 只是 屏障线 Barrier 生成方式与 Guideline 不一样 , Guideline 是指定好位置 , Barrier 是通过多个组件生成的位置 ;
II . 屏障线 Barrier 与 引导线 Guideline 对比
1 . 屏障线 Barrier 与 引导线 Guideline 区别 : 主要是生成方式不一样 , 用于约束其它组件的方式基本一致 ;
① 屏障线 : 如多个组件某个方向 ( 右侧 ) 的线 是屏障线 , 如果其中最右边的组件 , 向右移动 , 屏障线会随着该组件向右移动 ;
② 引导线 : 引导线的位置是定死的 , 是相对于父容器边缘的位置 ;
2 . 屏障线 Barrier 与 引导线 Guideline 联系 : 二者用于约束其它组件的方式基本一样 ;
① 垂直方向的 屏障线 与 引导线 : 用于组件的水平方向的约束 ;
② 水平方向的 屏障线 与 引导线 : 用于组件的垂直方向的约束 ;
III . 屏障 Barrier 适用场景
1 . 屏障 Barrier 适用场景 : 被约束组件 , 在某个方向上 , 被多个组件约束的情况 ;
① 单个组件约束 : 某个组件被单个组件约束 , 没有必要使用 屏障 , 直接使用该单个组件约束另外一个组件就可以 ;
② 多个组件约束 : 某个组件被多个组件约束 , 此时非常适合使用屏障 ;
2 . 示例 : 组件 C CC , 在水平方向上 , C CC 组件的左侧必须在 A , B A , BA,B 两个组件的右侧 ;
① 屏障线 : 中间的白色虚线是屏障线 ;
② 屏障组件 : 该屏障 Barrier 包含 A , B A,BA,B 两个视图 ;
③ 屏障方向 : 该屏障的方向是右侧 , 其屏障线的位置是 A , B A,BA,B 两个组件中 , 最右侧的组件的右边缘位置 ;
3 . 屏障 Barrier 线条数 : 每个 Barrier 组件 , 代表一个方向的屏障 , 如果要使用屏障将多个组件包裹起来 , 需要创建 4 44 个 Barrier 组件 , 分别设置 4 44 个不同的方向 ;
4 . 注意 : 一个屏障 Barrier 只能在一个方向上起作用 , 如果想要在 4 44 个方向同时建立屏障 , 需要创建 4 44 个 Barrier , 分别设置 左 ( LEFT ) , 上 ( TOP ) , 右 ( RIGHT ) , 下 ( BOTTOM ) , 四个方向的属性 ;
IV . 屏障 Barrier 位置说明
1 . 屏障的位置 : 是根据其 包含的组件 在某个方向 最远的边缘 确定 ;
示例 : 如下图 屏障 包含组件 A , B A,BA,B , 屏障的方向是右侧 , 那么屏障位置就是 A , B A,BA,B 两个组件最右边的边缘位置 ; 如下图所示 , 组件 A AA 的右侧边缘就是屏障线位置 ;
2 . 屏障线 移动 : 如果 屏障 包含的组件 A , B A, BA,B 的右侧位置 , 发生了改变 , 那么 右侧方向的 屏障线 也会随之进行变化 ;
示例 : 如下图所示 , 下图中的 组件 A , B A,BA,B 的右侧边缘改变 , B BB 组件的右侧突出 , 屏障位置是两个组件的最右侧边缘 , 那么此时屏障线就变为 B BB 组件最右侧 ;
V . 屏障 Barrier 相关属性
1 . Barrier ( 屏障 ) 组件 : 设置该 屏障 是哪几个组件的屏障 ; 属性值是组件的 id , 如果有多个 id , 使用逗号隔开 ;
app:constraint_referenced_ids="button2,button1"
2 . Barrier ( 屏障 ) 方向 : 设置该 屏障线 , 是这些组件哪个方向的屏障 , 可以选择四个方向 , 分别是 上 , 下 , 左 , 右 , 四个方向 ;
可选属性值 : left ( start ) , right ( end ) , top , bottom ;
app:barrierDirection="top"
