ConstraintLayout使用具体参考：

• 约束布局ConstraintLayout看这一篇就够了
• ConstraintLayout 完全解析 快来优化你的布局吧
• Android新特性介绍，ConstraintLayout完全解析

偏移量

• 水平偏移：layout_constraintHorizontal_bias
• 垂直偏移：layout_constraintVertical_bias

将TextView置底居中显示：

<TextView
        android:id="@+id/tv6"
        style="@style/TEXT"
        android:text="下方居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

效果：

image

PS： layout_constraintHorizontal_bias有效果的前提是有左右相对定位同时存在，即layout_constraintStart_toXxxOf和layout_constraintEnd_toXxxOf，或者layout_constraintLeft_toXxxOf和layout_constraintRight_toXxxOf成对出现。两对各使用其中之一是不奏效的。例如：

将layout_constraintRight_toLeftOf替代layout_constraintEnd_toEndOf:

 <TextView
        android:id="@+id/tv6"
        style="@style/TEXT"
        android:text="下方居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintRight_toLeftOf="parent"/>

image

layout_constraintHorizontal_bias取值0~1，0表示TextView的左侧和其layout_constraintStart_toXxxOf 对应的左侧重合，0表示TextView的右侧和其layout_constraintEnd_toXxxOf 对应的右侧重合，0.5表示显示在layout_constraintStart_toXxxOf 和layout_constraintEnd_toXxxOf 的中间。例如：

    <TextView
        android:id="@+id/tv6"
        style="@style/TEXT"
        android:background="@android:color/darker_gray"
        android:text="下方居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="parent"/>

    <TextView
        android:id="@+id/tv7"
        style="@style/TEXT"
        android:background="@android:color/background_dark"
        android:text="BIAS"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv6"/>

效果图：

image

可见：layout_constraintHorizontal_bias = 1，有根据属性 layout_constraintRight_toLeftOf="@id/tv6" 即 BIAS 这个 TextView 的右侧刚好和 tv6 的左侧重合。

假设将layout_constraintRight_toLeftOf="@id/tv6" 改为 layout_constraintRight_toRightOf="@id/tv6"，那么即 BIAS 这个 TextView 的右侧就会和 tv6 的右侧重合：

image

尺寸

0dp 配合 layout_constraintEnd_toEndOf="parent"和layout_constraintStart_toStartOf="parent"这一对或者layout_constraintLeft_toLeftOf="parent"和layout_constraintRight_toRightOf="parent"这一对使用，达到match_parent 的效果。

当 layout_width 或 layout_height 有一方为 0dp时，可以使用layout_constraintDimensionRatio 来达到宽度成一定比例显示的效果：例如，

<TextView
        android:id="@+id/tv_tv"
        style="@style/TEXT"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:text="上方居中"
        app:layout_constraintDimensionRatio="H,1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

效果如下：

image

其中，假设写成 app:layout_constraintDimensionRatio="1:2"，表示宽高比例为 1:2 ，而且基本单位以宽高二者最小的长度为准。

假设写成 app:layout_constraintDimensionRatio="H,1:2" ，即本例，宽高比为 2:1

链

    <TextView
        android:id="@+id/tv8"
        style="@style/TEXT"
        android:background="@android:color/darker_gray"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv9"/>

    <TextView
        android:id="@+id/tv9"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        app:layout_constraintLeft_toRightOf="@id/tv8"
        app:layout_constraintRight_toLeftOf="@id/tva"/>

    <TextView
        android:id="@+id/tva"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintLeft_toRightOf="@id/tv9"
        app:layout_constraintRight_toRightOf="parent"/>

3 个 TextView 构成一条链，如下：

image

例外，ConstraintLayout 还有属性可以对链的样式进行设置，分别为layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle。测试之后发现，只有将 layout_constraintXxx_chainStyle 属性设置在链的第一个 View 上才有效果。例如本例中只有将 layout_constraintHorizontal_chainStyle 设置在 id 为 tv8 的 TextView 上才有效果。layout_constraintXxx_chainStyle 有 3 个取值，分别为spread , spread_inside 和 packed 。效果图如下：

app:layout_constraintHorizontal_chainStyle="spread"

image

app:layout_constraintHorizontal_chainStyle="spread_inside"

image

app:layout_constraintHorizontal_chainStyle="packed"

image

权重

当宽度或高度为 0dp 时，可以使用 layout_constraintHorizontal_weight 或 layout_constraintVertical_weight 进行比重划分。本例使用layout_constraintHorizontal_weight:

 <TextView
        android:id="@+id/tv8"
        style="@style/TEXT"
        android:layout_width="0dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv9"/>

    <TextView
        android:id="@+id/tv9"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/tv8"
        app:layout_constraintRight_toLeftOf="@id/tva"/>

    <TextView
        android:id="@+id/tva"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/tv9"
        app:layout_constraintRight_toRightOf="parent"/>

效果图如下：

image

可见，layout_constraintXxx_weight 只有在对应属性为 0dp 时才会起作用。例外，layout_constraintXxx_chainStyle 在这种场景下没有了作用。

Barrier

Barrier（屏障）引用多个控件作为输入，基于这些控件的最极端做一个虚拟的屏障。

例如，假设两个按钮 A 和 B 的宽度是不固定的，想要在这两个按钮的右侧添加一个 View ，这个时候需要知道 A 和 B 哪个的右侧更靠近右边。Barrier 就可以达到这个目的。

[图片上传失败...(image-2a9a25-1547267639363)]

 <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="button1,button2" />

[图片上传失败...(image-61a7d7-1547267639363)]

然后就可以根据 Barrier 来确定新添加的 View 的位置。

constraint_referenced_ids 表示需要对其基准的所有控件，引用多个控件使用 , 隔开。
barrierDirection 的取值有：

• BOTTOM
• TOP
• LEFT
• RIGHT
• START
• END

Group

此类控制一组引用的窗口小部件的可见性。 通过添加到逗号分隔的id列表来引用窗口小部件。

<android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:constraint_referenced_ids="tva,tv9"/>

两个 TextView 被隐藏，效果如下：

image

Placeholder

占位符提供可以定位现有对象的虚拟对象。

当在占位符上设置另一个视图的 id 时( 使用 setContent()) ，占位符有效地成为内容视图。 如果内容视图存在于屏幕上，则将其视为从其原始位置 gone。

 <android.support.constraint.Placeholder
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/tv8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <TextView
        android:id="@+id/tv8"
        style="@style/TEXT"
        android:text="Placeholder"
        android:background="@android:color/darker_gray"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

效果图：

image

Guideline

ConstraintLayout 的布局辅助对象。 辅助对象不会显示在设备上（它们标记为View.GONE），仅用于布局目的。 它们仅在 ConstraintLayout 中工作。

可以通过三种不同的方式定位Guideline：

• 指定布局左侧或顶部的固定距离（layout_constraintGuide_begin）
• 指定布局右侧或底部的固定距离（layout_constraintGuide_end）
• 指定布局的宽度或高度的百分比（layout_constraintGuide_percent）

例：在距离左上角 x = 30%，y=50% 的地方显示一个 TextView ：

<android.support.constraint.Guideline
        android:id="@+id/guideline_0.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline_0.2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <TextView
        android:id="@+id/tvb"
        style="@style/TEXT"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintLeft_toRightOf="@+id/guideline_0.3"
        app:layout_constraintTop_toBottomOf="@+id/guideline_0.2"/>

效果如下：

image

guideline_0.3 的方向为 vertical，表示这是一根竖直的辅助线。那对于 TextView 来说，可用来确定自身的水平方向的起点。app:layout_constraintGuide_percent="0.3" 表示guideline_0.3 距离 parent 左侧的距离为整个 ConstraintLayout 的 30%;同理，guideline_0.2 距离 parent 顶部的距离为 50%。