ConstraintLayout
A.布局
xml 代码不要记,看一遍就够了
一.居中于父容器
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
复制代码二.居中于控件中⼼
- 水平方向居中
app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
复制代码- 垂直⽅向居中
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"
复制代码三.居中于控件的边
控件垂直居中于 view 的 「下边」
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"
复制代码四.填充
水平填充父布局(match_constraint)
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
复制代码备注: 在早期版本中 match_parent 没有效果,必须来使用 match_constraint 来完成
五.权重
为水平⽅方向的控件设置权重，⼤小为 2:1:1
<!-- (view-1) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="2"
<!-- (view-2) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
<!-- (view-3) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
复制代码六.文字基准线对⻬
app:layout_constraintBaseline_toBaselineOf
复制代码七.圆形定位
通过「圆心」「角度」「半径」设置圆形定位
app:layout_constraintCircle="@id/view"
app:layout_constraintCircleAngle="90"
app:layout_constraintCircleRadius="180dp"
复制代码B.辅助控件
一.Flow
通过引用的方式来避免布局嵌套 wrapMode
- chain
- aligned
- 默认
注意这个控件是可以被测量的,所以对应方向的值可能需要被确定(即可能被约束同一个方向的单个约束)
二.ConstraintSet
使用 ConstraintSet 对象来动态修改布局
防止控件布局中无 id 控件,可以设置 isForceId = false
通过 ConstraintSet#clone 来 从xml 布局中获取约束
三.Placeholder
通过 setContentId 来指定控件放到占位符的位置
四.Barrier
通过设置一组控件的某个方向的屏障,来避免布局嵌套
五.Group
通过 constraint_referenced_ids 使用引用的方式避免布局嵌套 可以为一组控件统一设置 setVisibility
六.Layer
和Group类似,同样通过引用方式避免布局嵌套,可以为一组控件统一设置旋转/缩放/位移
七.GuideLine
- 设置辅助线方向 android:orientation="vertical"
- 设置辅助线的位置,根据方向不同
- 距离左侧或上侧的距离 layout_constraintGuide_begin
- 距离右侧或下侧的距离 layout_constraintGuide_end
- 百分⽐ layout_constraintGuide_percent
C.特殊属性
一.约束限制
限制控件大小不会超过约束范围
app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"
复制代码二.偏向
控制控件在垂直⽅方向的 30%的位置
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.3"
复制代码除了百分定位,还有用于配合有时在 「约束限制」 的条件下不需要居中效果的情况
- 垂直⽅方向居顶部
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constrainedHeight="true"
app:layout_constraintVertical_bias="0.0"
复制代码三.约束链
在约束链上的第⼀一个控件上加上 chainStyle ，⽤用来改变⼀一组控件的布局⽅方式
- packed(打包)
- spread (扩散)
- spread_inside(内部扩散)
垂直方向的 packed
app:layout_constraintVertical_chainStyle="packed"
复制代码四.宽高比
- 至少一个方向的值为 match_constraint
- 默认的都是宽⾼高⽐比，然后根据另外⼀一条边和⽐比例例算出 match_constraint 的值
x:y 默认表示的都是 width:height
有值的边,ratio 值 (默认宽高比),被约束的边(也有可能是有值的边)
-
宽是 0dp，⾼高是 100dp，ratio 是 2:1,默认情况下是宽是 200dp，但是我们可以指定被约束的边是 height，那么宽度就是 50 dp
-
⾼高是 0dp，宽是 100 dp，ratio 是 2:1,默认情况下是⾼高是 50 dp，但是我们指定被约束的边是 width，那么⾼高度为 200 dp
只有一个方向 match_constraint 不要去用,如果是两个⽅方向都是match_constraint 那么可能会⽤用 到。
五.百分比布局
- 需要对应方向上的值为 match_constraint
- 百分比是parent 的百分⽐比，而不是约束区域的百分⽐
宽度是父容器器的 30%
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.3"
复制代码