Barrier

constraint-layout 1.1 版加入

Barrier 翻译过来有“障碍,屏障”的意思,在 ConstraintLayout 中它是一个虚拟的辅助控件,类似于 GuideLine 控件,它在实际的界面中是一条不可见的线,有横向和纵向两种。

GuideLine 不同的是,它的位置是根据关联的视图动态变化的

示例

假如在开发中我们遇到如下需求

如图,Title 1 和 Title 2 是两个文本,内容是动态变化的,呈纵向排列,Content 处于它们的右侧,我们希望无论 Title 1 或 Title 2 的文字有多长,Content 始终处于最长的文字的右侧。如何实现?

当然,最常规的做法可能是,将 Title 1 和 Title 2 用一个父布局进行包裹,宽度设置成 wrap_content ,然后让 Content 处于父布局的右侧。但这并不是最优的解决方案,因为这加深了布局的层级,这时我们可以在 ConstraintLayout 中使用 Barrier 来实现。

首先,我们按设计图在 ConstraintLayout i 中对 Title 1 和 Title 2 进行布局,然后就是加入 Barrier 控件了,可以通过下面的方式添加:

  • 在视图编辑器上点击鼠标右键 > Helpers > Add Vertical barrier
  • 或 点击视图编辑器上方的 GuideLines 按钮进行选择

注:操作基于 Android Studio 3.0,在之前的版本中并没有

此时,布局里多了一个 Barrier 控件,在视图编辑器器中我们并不能看到它,也没有任何效果。

标签中有个 app:barrierDirection 属性,可取值有:

  • left / start : 在关联视图的左侧
  • right / end : 在关联视图的右侧
  • top :在关联视图的顶部
  • bottom : 在关联视图的底部

按照需求,我们应该选择 right / end, Add Vertical barrier 默认是 left,我们需要手动修改成 right。可以在 Componet Tree 中点击刚生成的 barrier 控件,在 Attributes 中进行选择,或在 xml 里进行修改。

然后,我们需要用到 app:constraint_referenced_ids 属性,让其与其他视图进行关联,将需要关联的视图的 id 作为其属性值,多个用逗号分隔,这样就完成了关联。

关联完成后,我们点击下布局编辑器,这时可以看到在关联视图的右侧会出现一条纵向的阴影线(实际在视图中是不可见的)

这时,我们改变下 Title 1 的内容,是其变宽一些,看看有什么效果:

可以看到,随着内容的变化, barrier 的位置也随着发生了变化。

最后,我们添加一个 TextView,添加左侧约束到 barrier 上,就实现了需求。

评论