ConstraintLayout介绍之Barrier

Barrier(1.1版本引入)

Barrier引用多个小部件作为输入，并创建一条基于指定侧的最极端的控件的虚拟指南。

使用场景

1.png

如果我们遇到上面的几种情况，我们看到的控件A，控件B，控件C，我们的控件A，控件B中的内容的占位的控件不定，如果我们需要根据A，B来约束C则比较的麻烦，可能我们需要将A、B再嵌套一层D，使用D来约束C。

LIS58SP0Q(OKRL{GNQGRCY9.png

如果我们是使用A、B中的任何一个进行约束，都有可能造成C布局和A或者B重合了的问题

00.png

这种情形下，如果我们使用Barrier控件，则可以很容易的解决问题

0NYON{CHK5I}%H05VC@{992.png

<Button
    android:id="@+id/btn01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="内容A"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="内容B内容B内容B内容B内容B内容B"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btn01" />

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C"
    app:layout_constraintLeft_toRightOf="@+id/barrier"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="btn01,btn02" />

3.png

 <Button
    android:id="@+id/btn01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="内容A"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="内容B内容B内容B内容B内容B内容B"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btn01" />

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C"
    app:layout_constraintRight_toLeftOf="@+id/barrier"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="start"
    app:constraint_referenced_ids="btn01,btn02" />

4.png

<Button
    android:id="@+id/btn01"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:text="内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A内容    A内容A内容A内容A内容A"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:text="内容B内容B内容B内容B内容B内容B"
    app:layout_constraintLeft_toRightOf="@+id/btn01"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/barrier" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="btn01,btn02" />

5.png

<Button
    android:id="@+id/btn01"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    android:text="内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A内容A"
    app:layout_constraintLeft_toLeftOf="parent" />

<Button
    android:id="@+id/btn02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:text="内容B内容B内容B内容B内容B内容B"
    app:layout_constraintBottom_toBottomOf="@+id/btn01"
    app:layout_constraintLeft_toRightOf="@+id/btn01" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C内容C容C内容C内容C内容容C内容C内容C内容容C内容C内容C内容"
    app:layout_constraintBottom_toTopOf="@+id/barrier"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="top"
    app:constraint_referenced_ids="btn01,btn02" />