走马观花-ConstraintLayout

ConstraintLayout使用具体参考：

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

偏移量

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

将TextView置底居中显示：

效果：

image

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

将layout_constraintRight_toLeftOf替代layout_constraintEnd_toEndOf:

image

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

效果图：

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 来达到宽度成一定比例显示的效果：例如，

效果如下：

image

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

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

链

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:

效果图如下：

image

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

Barrier

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

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

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

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

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

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

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

Group

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

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

image

Placeholder

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

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

效果图：

image

Guideline

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

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

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

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

效果如下：

image

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