Android高手进阶(十九) - ConstraintLayout入门与实践

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"
复制代码