ConstraintLayout 中的 Barrier 和 Chains

1. Barrier

是一个准则，可以说是对其的规则，这样说还不够名义，我们可以列表一些比较常见的场景； 官网 Barrier。

1. 具体看图

 “第二行的label”和“第二行value”是一个整体，他们距离上面是 100dp ，但是有可能“第二行value”的值为空或者是空，也需要“第二行label”距离上面的距离是 100dp ，由于我们知道“第二行value”的高度高于第一个，所以采用的是“第二行label”跟“第二行value”对其，“第二行value”距离上边 100dp 的距离，但是由于“第二行value”有可能为空，所以当“第二行value”为空的时候就会出现下面的效果：

 我们发现达不到预期，现在能想到的办法有，首先在代码控制的时候随便把“第二行label”的 marginTop 也添加进去；还有就是换布局，将“第二行label”和“第二行value”放到一个布局中，比如 LinearLayout ，这样上边的 marginTop 由 LinearLayout 控制；这样的话即便“第二行value”消失了也会保持上边的效果。

除了上边的方法还能使用其他的嘛，比如我们不使用代码控制，我们不使用其他的布局，因为我们知道布局嵌套太多性能也会相应的下降，所以在编写的时候能减少嵌套的情况下尽可能的减少，当然也不能为了减少嵌套让代码变得格外的复杂。

为了满足上面的需求， Barrier 出现了，它能做到隐藏的也能依靠它，并且与它的距离保持不变对于隐藏的“第二行value”来说，虽然消失了，但保留了 marginTop 的数值。下面看看布局：

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


  <TextView

      android:id="@+id/textView4"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="头部"

      android:textSize="36sp"

      app:layout_constraintBottom_toTopOf="@id/barrier3"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toTopOf="parent" />



  <androidx.constraintlayout.widget.Barrier

      android:id="@+id/barrier3"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      app:barrierDirection="top"

      android:layout_marginTop="100dp"

      app:constraint_referenced_ids="textView2,textView3" />


  <TextView

      android:id="@+id/textView2"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginStart="4dp"

      android:text="第二行label"

      android:textSize="36sp"

      app:layout_constraintBottom_toBottomOf="@+id/textView3"

      app:layout_constraintStart_toStartOf="@+id/textView4"

      app:layout_constraintTop_toTopOf="@+id/textView3"

      app:layout_constraintVertical_bias="0.538" />


  <TextView

      android:id="@+id/textView3"

      android:layout_width="wrap_content"

      android:layout_height="100dp"

      android:layout_marginStart="12dp"

      android:layout_marginTop="100dp"

      android:text="第二行value"

      android:textSize="36sp"

      app:layout_constraintStart_toEndOf="@+id/textView2"

      app:layout_constraintTop_toBottomOf="@+id/barrier3" />


</androidx.constraintlayout.widget.ConstraintLayout>

这样即便将“第二行value”消失，那么总体的布局仍然达到预期，并且也没有添加很多布局内容。在代码中：

<androidx.constraintlayout.widget.Barrier

      android:id="@+id/barrier3"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      app:barrierDirection="top"

      android:layout_marginTop="100dp"

      app:constraint_referenced_ids="textView2,textView3" />

这里主要有两个属性 app:barrierDirection 和 app:constraint_referenced_ids ：

• app:barrierDirection 是代表位置，也就是在包含内容的哪一个位置，我这里写的是 top ，是在顶部，还有其他的属性 top,bottom,left,right,start 和 end 这几个属性，看意思就很明白了。
• app:constraint_referenced_ids 上面说的内容就是包含在这里面的，这里面填写的是 id 的名称，如果有多个，那么使用逗号隔开；这里面的到 Barrier 的距离不会改变，即便隐藏了也不会变。

这里可能会有疑惑，为啥我写的 id 为 textView4 的也依赖于 Barrier ，这是因为本身 Barrier 只是规则不是实体，它的存在只能依附于实体，不能单独存在于具体的位置，如果我们只有“第二行value”依赖于它，但是本身“第二行value”没有上依赖，也相当于没有依赖，这样只会导致“第二行label”和“第二行value”都消失，如果 textView4 依赖于 Barrier ，由于 textView4 的位置是确定的，所以 Barrier 的位置也就确定了。

2. 类似表格的效果。看布局效果：

 我要做成上面的样子。也就是右边永远与左边最长的保持距离。下面是我的代码：

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



  <TextView

      android:id="@+id/textView4"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginStart="8dp"

      android:text="头部"

      android:textSize="36sp"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toTopOf="parent" />


  <TextView

      android:id="@+id/textView2"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginStart="4dp"

      android:text="第二行"

      android:textSize="36sp"

      app:layout_constraintBottom_toBottomOf="@+id/textView3"

      app:layout_constraintStart_toStartOf="@+id/textView4"

      app:layout_constraintTop_toTopOf="@+id/textView3" />


  <TextView

      android:id="@+id/textView3"

      android:layout_width="wrap_content"

      android:layout_height="50dp"

      android:layout_marginStart="20dp"

      android:layout_marginTop="10dp"

      android:text="第二行value"

      android:textSize="36sp"

      app:layout_constraintStart_toEndOf="@+id/barrier4"

      app:layout_constraintTop_toBottomOf="@+id/textView4" />



  <TextView

      android:id="@+id/textView5"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginStart="4dp"

      android:text="第三次测试"

      android:textSize="36sp"

      app:layout_constraintBottom_toBottomOf="@+id/textView6"

      app:layout_constraintStart_toStartOf="@+id/textView4"

      app:layout_constraintTop_toTopOf="@+id/textView6" />


  <TextView

      android:id="@+id/textView6"

      android:layout_width="wrap_content"

      android:layout_height="50dp"

      android:layout_marginStart="20dp"

      android:layout_marginTop="10dp"

      android:text="第三行value"

      android:textSize="36sp"

      app:layout_constraintStart_toEndOf="@+id/barrier4"

      app:layout_constraintTop_toBottomOf="@+id/textView3" />


  <androidx.constraintlayout.widget.Barrier

      android:id="@+id/barrier4"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      app:barrierDirection="end"

      app:constraint_referenced_ids="textView2,textView5"

      tools:layout_editor_absoluteX="411dp" />



</androidx.constraintlayout.widget.ConstraintLayout>

添加好了，记得让右边的约束指向 Barrier 。这里的 Barrier ，我们看到包含 textView2 和 textView5 ，这个时候就能做到谁长听谁的，如果此时 textView2 变长了，那么就会将就 textView2 。

2. Chains

我们特别喜欢使用线性布局，因为我们发现 UI 图上的效果使用线性布局都可以使用，当然也有可能跟大部分人的思维方式有关系。比如我们非常喜欢的，水平居中，每部分的空间分布等等都非常的顺手。既然线性布局这么好用，那为啥还有约束布局呢，因为线性布局很容易写出嵌套很深的布局，但约束布局不会，甚至大部分情况都可以不需要嵌套就能实现，那是不是代表线性布局有的约束布局也有，答案是肯定的。

使用普通的约束关系就很容易实现水平居中等常用效果，其他的如水平方向平均分布空间，使用一般的约束是实现不了的，于是就要使用 Chains ，这个就很容易实现下面的效果：

 其实上一篇中我已经把官网的教程贴上去了，这里主要写双向约束怎么做，一旦双向约束形成，那么就自然进入到 Chains 模式。

1）在视图模式中操作

如果直接操作，那么只能单向约束，如果要形成这样的约束，需要选择相关的的节点，比如我这里就是同时选择 A 和 B ，然后点击鼠标右键，就可以看到 Chains → Create Horizontal Chain 。

对应的操作

选择图中的选项即可完成从 A 指向 B ，修改的示意图为：

我们发现已经实现了水平方向的排列效果了。至于怎么实现上面的效果，主要是改变 layout_constraintVertical_chainStyle 和 layout_constraintHorizontal_chainStyle 属性。至于权重则是属性 layout_constraintHorizontal_weight 。

layout_constraintHorizontal_chainStyle 属性说明：

• spread 默认选项，效果就是上面的那种，也就是平均分配剩余空间；
• spread_inside 两边的紧挨着非 Chains 的视图，中间的平均分配；

• packed 所有的都在中间

 注意了， layout_constraintHorizontal_weight 这个属性只有在 A 身上设置才可以，也就是首节点上设置才可行，同时 layout_constraintHorizontal_weight 是代表水平方向，只能在水平方向才发生作用，如果水平的设置了垂直则不生效。

layout_constraintHorizontal_weight 这个属性只有在当前视图的宽或者高是 0dp 。至于这个的取值跟线性布局相同。

2）代码的方式 跟上面的差别就是在做双向绑定，用代码就很容易实现双向绑定，可平时添加约束相同。