ConstraintLayout 1.1

• 图文解释查看地址

• 官方的文档范例地址

• 所有代码提交

Percents

允许View在布局中占用的对应的比例，让宽度去适配比例，layout_width = 0dp，并且需要用 layout_constraintEnd_toEndOf 和 layout_constraintStart_toStartOf 限定左右的边界，最后才用layout_constraintWidth_percent 表示在边界范围内占的比例情况，例子如下：

<Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="70% width"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.7"/>

Chains

链式风格的布局，只有元素>=3个时才会生效，分为 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 两种链式风格，分别有 spread_inside, spread, packed 三种布局，且只需要对第一个元素 设置即可，其他设置与否无任何影响。无论在哪个方向，都需要针对parent有边界限制，如下：

<Button
    android:id="@+id/chains1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="chains1"
    app:layout_constraintHorizontal_chainStyle="spread_inside" // 在此第一个设置即可
    app:layout_constraintLeft_toLeftOf="parent" // 左边界,要不统一成 start_toStartOf模式
    app:layout_constraintRight_toLeftOf="@+id/chains2" // 右链 chains2
    app:layout_constraintTop_toBottomOf="@+id/percents"/>
<Button
    android:id="@+id/chains2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="chains2"
    app:layout_constraintLeft_toRightOf="@id/chains1" // 左链 chains1
    app:layout_constraintRight_toLeftOf="@id/chains3" // 右链 chains3
    app:layout_constraintTop_toBottomOf="@+id/percents"/>
<Button
    android:id="@+id/chains3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="chains3"
    app:layout_constraintLeft_toRightOf="@id/chains2" // 左链 chains2
    app:layout_constraintRight_toRightOf="parent" // 左边界,要不统一成 end_toEndOf
    app:layout_constraintTop_toBottomOf="@+id/percents"/>�

Barrier

定义某些元素的边界，主要是 Barrier 类的使用，定义了 app:barrierDirection 方向(left,start,top,right,end,bottom)，以及 app:constraint_referenced_ids 关联相应view的 id
例如将 给 textView1, textView2定义右边界barrier, textView3 根据右边界限制缩放：

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="warehouse"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/chains1" />
<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:text="hospital"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView1" />
<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="textView2,textView1" />
<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:text="@string/lorem"
    app:layout_constraintStart_toEndOf="@+id/barrier"
    app:layout_constraintTop_toBottomOf="@id/chains2"/>�

Group

在不增加view层级的前提下，对view进行 tag边界，做统一的操作，只需要通过app:constraint_referenced_ids配置需要组合的id，如下代码只需要通过 barrier_group 来控制整个group中相关的元素

<android.support.constraint.Group
    android:id="@+id/barrier_group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="textView3,textView2,textView1"
    />�

Circular Constraints

以往的 ConstraintLayout 都是在 Horizontal 和 Vertical 方向对元素进行限制，1.1 新增了 layout_constraintCircleRadius 和 layout_constraintCircleAngle通过 angle 和 radius 在一个圆轨迹上做限制。 角度是从顶部开始，且顺时针布局, 其他元素只需要通过 layout_constraintCircle 执行中心元素的id即可。

<Button
    android:id="@+id/center"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:text="O"
    app:layout_constraintTop_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintCircleRadius="50dp"
    app:layout_constraintCircleAngle="315"
    />
<Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:text="A"
    app:layout_constraintCircleRadius="100dp"
    app:layout_constraintCircle="@+id/center"
    app:layout_constraintCircleAngle="315"
    />
<Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:text="B"
    app:layout_constraintCircleRadius="100dp"
    app:layout_constraintCircle="@+id/center"
    app:layout_constraintCircleAngle="270"
    />
<Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:text="C"
    app:layout_constraintCircleRadius="100dp"
    app:layout_constraintCircle="@+id/center"
    app:layout_constraintCircleAngle="225"
    />�

Bias(1.0)

左右、上下约束布局

    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.5"

�上述代码设置了左右约束布局，因此Horizontal_bias有效，且 0.5表示居中，默认就是0.5
上下约束布局同理如下：

  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5"