ConstraintLayout 详解

type

status

date

slug

summary

ConstraintLayout

居中于⽗容器

居中于控件中⼼

⽔平⽅向居中

垂直⽅向居中

居中于控件的边

控件垂直居中于 View 的「下边」

填充

⽔平⽅向填充⽗容器（通过 match_constraint ）

备注：在早期版本中 match_parent 没有效果。

权重

为⽔平⽅向的控件设置权重，⼤⼩为 2:1:1 。

⽂字基准线对⻬

圆形（⻆度）定位

通过「圆⼼」「⻆度」「半径」设置圆形定位

约束限制

限制控件⼤⼩不会超过约束范围。

偏向（bias）

控制控件在垂直⽅向的 30% 的位置

除了配合百分⽐定位，还有⽤于配合有时在「约束限制」的条件下不需要居中效果的情况

垂直⽅向居顶部

约束链

在约束链上的第⼀个控件上加上 chainStyle ，⽤来改变⼀组控件的布局⽅式

packed（打包）

spread（扩散）

spread_inside（内部扩散）

垂直⽅向 packed

宽⾼⽐

⾄少需要⼀个⽅向的值为 match_constraint

默认的都是「宽⾼⽐」，然后根据另外⼀条边和⽐例算出 match_constraint 的值 x:y 默认表示的都是 width:height

宽是 0dp，⾼是 100dp，ratio 是 2:1

默认情况下是宽是 200dp，但是我们可以指定被约束的边是 height，那么宽度就是 50dp

⾼是 0dp，宽是 100dp，ratio 是 2:1

默认情况下是⾼是 50dp，但是我们指定被约束的边是 width，那么⾼度为 200dp

百分⽐布局

需要对应⽅向上的值为 match_constraint

百分⽐是 parent 的百分⽐，⽽不是约束区域的百分⽐

宽度是⽗容器的 30%

辅助控件

GuideLine

设置辅助线的⽅向 android:orientation="vertical”
设置辅助线的位置，根据⽅向不同

距离左侧或上侧的距离 layout_constraintGuide_begin
距离右侧或下侧的距离 layout_constraintGuide_end
百分⽐ layout_constraintGuide_percent

Group

通过 constraint_referenced_ids 使⽤引⽤的⽅式来避免布局嵌套。

可以为⼀组控件统⼀设置 setVisibility

只有设置可⻅度的功能，不要指望这个来通知设置点击事件…

Layer

和 Group 类似，同样通过引⽤的⽅式来避免布局嵌套，可以为⼀组控件统⼀设置旋转/缩放/ 位移

Barrier

通过设置⼀组控件的某个⽅向的屏障，来避免布局嵌套。

Placeholder

通过 setContentId 来将指定控件放到占位符的位置。

💡

constraintlayout 内置了很多 Holder，可以供直接使用，比如：VirtualLayout

Flow

通过引⽤的⽅式来避免布局嵌套。

wrapMode

chain
aligned
none(默认)

注意这个控件是可以被测量的，所以对应⽅向上的值可能需要被确定（即不能只约束同⼀⽅向的单个约束）

自定义辅助控件

继承ConstraintHelper

重写updatePostLayout(container: ConstraintLayout)

通过 referencedIds 获取 refId

通过 container.getViewById(refId) 获取到需要控制的 View

处理 View

使用自定义控件

ConstraintSet

使⽤ ConstraintSet 对象来动态(在代码中，不是布局中)修改布局。

防⽌布局中有⽆ id 控件时报错，需要设置 isForceId = false

也可以通过 ConstraintSet#clone 来从另一个 xml 布局中获取约束集，把这个约束集合应用到当前的 xml 上（前提是两个 xml 中的 view 是一样的，id 也是一样的）。并且这个过程还可以使用 TransitionManager.beginDelayedTransition() 来自动实现动画效果。

新增加一个布局 xml，可以避免上一种情况，纯手写约束，预览时，也可以直接查看新布局的样子。方便且高效。

布局扁平化额外好处

配合 TransitionManager 可以更加容易的制作过渡动画