ConstraintLayout 的使用

本文基于 Android Studio 3.4
官网介绍：https://developer.android.google.cn/training/constraint-layout?hl=en

一、约束

1.1 添加约束

1.1.1 手动添加

直接拖拽后，在预览界面上看到的Button位置并不是它最终运行后的实际位置，如果一个控件没有添加任何约束的话，它在运行之后会自动位于界面的左上角。
这时它的显示效果其实是由 XML 里的 tools 前缀实现的。

控件用四个方向的约束，button 四条边上的圆圈就是用来添加约束的。点击圆圈，指向某个控件或边界，就会添加约束。

如：
layout_constraintLeft_toLeftOf=“some”
控件的左边框与 some 的左边框对齐（重合或平行）
layout_constraintRight_toRightOf=“some”
控件的右边框与 some 的右边框对齐（重合或平行）

1.1.2 自动添加

1）Autoconnection

启用 Autoconnection 后，会在一定程度上自动添加约束。但作用有限，只能添加竖向和横向的 center 约束。

2）Inference

启用 Inference 后，可以在整个布局的控件都拖放完成后点击，会自动添加所有控件的约束。它比 Autoconnection 略智能点，但也有限，可适当使用。

1.2 删除约束

删除单独约束：鼠标移动到圆圈上，变红后点击即可删除。
删除某控件所有约束：鼠标移动到控件上，右键-Clear Constraints of Selection。
删除所有控件的所有越是：选中所有控件，右键-Clear Constraints of Selection。（顶部的工具类也有一个 Clear All Constraint 的按钮，但点击后发现无效）

1.3 控制面板

在蓝图右边的 Attributes 面板上，会有个一个 ConstraintLayout 的控制面板。

1）ratio

app:layout_constraintDimensionRatio="w, 2:1"

w/h, x:y

w/h，代表要变化的维度；x:y 是 w:h 的比值。
前面是 w，则要变的是 w，如果 w 不可变，则变为 h, y:x。
前面是 h，则要变的是 h，如果 h 不可变，则变为 w, y:x。
前面没有 w/h，则默认前面是可变的那个，如果都可变，默认是 w。

实例：

	1:2	w,1:2	h,1:2
宽100dp，高0dp	100dp:200dp	100dp:50dp(相当于 h,2:1)	100dp:200dp
宽0dp，高100dp	50dp:100dp	50dp:100dp	200dp:100dp(相当于 w,2:1)
宽0dp，高0dp	1/2 parent的高:parent的高	1/2 * parent的高:parent的高	parent的宽: 2 * parent的宽

2）删除约束

删除对应方向上的约束

3）控件大小

点击后会在三种状态间切换。

表示wrap_content，和普通的 wrap_content 一样。

表示固定值，和普通的固定值一样。

表示 match_constraints，这是普通 layout 没有的属性，相当于在 xml 中设置了宽/高 0dp，会占满它的约束空间。（所以 ConstraintLayout 中不会出现 0dp 宽/高的 View）

match_parent 只能在 xml 中编写或在下方编辑框内填写，这里不支持设置。

4）margin

设置 margin

5）bias

调整控件在一种方向上的偏移比例。

app:layout_constraintHorizontal_bias="0.5"

移动它，控件就会移动到对应方向上的对应比例位置。

如果要在一个方向上添加如1/4、1/5的约束，可以先把它拖到中间，等 Autoconnection 添加了 center 约束，再观察这里移动它到1/4、1/5的位置。

二、Chain

2.1 加链

选中多个，右键-Chain。

直接在蓝图中拖拽是不能形成链的，即使连的对应关系是正确的。

2.2 换链

选中链中的一个，右键-Cycle Chain Mode。
这样会在 Spread、Spread Inside、Packed 之间切换。

2.2.1 Packed Chain With Bias

需要配合 layout_constraintHorizontal_bias 属性，为链头设置该属性即可（可以在右边的属性编辑器里设置）。
链头设置 layout_constraintHorizontal_chainStyle，也可设置 Spread-Spread Inside-Packed 这三种属性。

2.2.2 Weighted Chain

需要将 layout_width 设为 0dp，再配合 layout_constraintHorizontal_weight 属性使用。

三、Helper

3.1 Guideline

Guideline 是一条辅助线，来帮助生成其他控件的约束，guideline 本身不需要添加约束，它对用户是不可见的。

添加方式：右键-helpers-Add Vertical/Horizontal Guideline。

添加完成后，可以拖动它来定位，点击线头的圆圈来改变定位方式，共有三种：start、end、parcent。

对应xml：

app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_end="20dp"
app:layout_constraintGuide_percent="0.2"

3.2 Barrier

Barrier 也是一条辅助线，但它不用自己定位，它用来代表一组控件的边界。

添加方式：右键-helpers-Add Vertical/Horizontal Barrier。

添加元素：在蓝图左边的 Component Tree 中，拖动元素进入 Barrier。

设定属性：在蓝图右边的 Attributes 面板的 Common Attributes 中设置边界的方向（top、left…）

对应xml：

app:barrierDirection="left"
app:constraint_referenced_ids="button1,button2"

3.3 Group

可以控制一组 View 的可见性。

添加方式：右键-Helpers-Add Group。

添加元素：在蓝图左边的 Component Tree 中，拖动元素进入 Group。

对应xml：

Groupapp:constraint_referenced_ids="button1,button2,button3"

3.4 Layer

可以对一组 View 做变换。

右键-Helpers-Add Layer。

AS 3.4，这样添加的是 android.support.constraint.Layer，其实是 android.support.constraint.helper.Layer。

同样需要设置 Groupapp:constraint_referenced_ids="button1,button2,button3"

可调用的方法：

3.5 Flow

orientation
横向或竖向排列

wrapMode
none：所有的 item 组成一条横向的 chain，不管有没有超出限制
chain：超出限制后，其余元素在下一行组成新的 chain
aligned：超出限制后，按行列去对齐

下面以主方向为横向，介绍参数含义（竖向同理）。
none
用它们来控制主方向的 chain
flow_horizontalStyle
flow_horizontalBias
flow_horizontalGap

用它来控制副方向的对齐方式
flow_verticalAlign

chain
继承 none 的所有功能，再加上几个对首行、末行的特殊处理
flow_firstHorizontalStyle
flow_firstHorizontalBias
flow_lastHorizontalStyle
flow_lastHorizontalBias

还有一个，控制每行的强制换行个数
flow_maxElementsWrap

aligned
继承了 chain，但基于行列来布局，style、bias 都不可用了