Android -- 约束布局ConstraintLayout使用总结

优点

• 极大程度减少布局层级
• 可以实现一些其他布局管理器不能实现的样式

缺点

• 每个被参考的控件都需要设置id

基本用法

1.相对定位

• layout_constraintLeft_toLeftOf
• layout_constraintLeft_toRightOf
• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf：文字Baseline对齐
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf

2. 圆形定位

• layout_constraintCircle : 参考控件的id
• layout_constraintCircleRadius : 本控件与参考控件中心点间距
• layout_constraintCircleAngle : 角度0～360

3. 百分比定位（bias）

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

取值范围0～1，默认值0.5

4. 居中对齐

所有居中对其需要设置对应方向尺寸大小为wrap_content或固定值

• 水平居中

• 垂直居中

5.间距设置

表示当前控件与参考的控件之间的间距

layout_marginStart  左间距
layout_marginEnd    右间距
layout_marginLeft   左间距
layout_marginTop    上间距
layout_marginRight  右间距
layout_marginBottom 下间距

6.权重比

主要依赖于以下两个属性：

app:layout_constraintHorizontal_weight  横向权重比
app:layout_constraintVertical_weight    竖向权重比

7.百分比

百分比需要满足下面三个条件：

• 宽或高设置成0dp

• 宽或高默认值设置成百分比

  • app:layout_constraintWidth_default="percent"
  • app:layout_constraintHeight_default="percent"

• 宽或高百分比的值（取值范围0～1）

  • app:layout_constraintWidth_percent
  • app:layout_constraintHeight_percent

以下代码表示Textview宽度为ConstraintLayout宽度的50%

8.宽高比

百分比需要满足下面两个条件：
a. 宽或高至少有一个设置成0dp
b. 通过app:layout_constraintDimensionRatio设置宽高比

这里layout_constraintDimensionRatio宽高的取值有以下4种形式：

• 16:9 表示宽高比为16:9
• 0.2 表示宽高比为1:5
• H,16:9 表示宽高比为9:16
• W,16:9 表示宽高比为16:9

以下代码表示Textview的宽高比为2:1

9.强制约束

• 应用场景

  ​ 使用wrap_content，但仍要强制执行约束以限制结果尺寸，比如一个Textview的宽度是根据文字内容自适应的，文字内容可能很短也可能很长，当文字内容很长的时候可能会打破原先的约束，比如本来在在某个控件的左边，但是随着文字内容的增长会越界！

• 使用方式

  layout_constrainedWidth="true|false"  
  layout_constrainedHeight="true|false"
  

使用以上两个属性来强制控件的宽或高严格执行相应的约束条件

10.Barrier

• 应用场景

  ​ 当某个控件的约束想以一组控件为参考点，并且始终不越界

• 使用方式

app:barrierDirection="start|left|top|right|end|bottom"
app:constraint_referenced_ids="tv1,tv2"

• 示例

以下代码表示以tv1和tv2的底部为一个屏障，tv3始终在tv1和tv2下面，即使tv1和tv2全部都消失

11.Guideline

• 应用场景

  布局参考线可以作为其他控件布局约束的参考，但不会显示出来

• 使用方式

  参考线的方向，可分为水平和竖直两个方向：
  android:orientation="vertical|horizontal"
  参考线的位置：
  app:layout_constraintGuide_begin="100dp"
  app:layout_constraintGuide_end="100dp"
  app:layout_constraintGuide_percent="0.5"
  

12.Group

• 应用场景

  将某几个控件归为一组动态进行显示或隐藏控制

• 使用方式

  需要归为一组控件的ID
  app:constraint_referenced_ids="tv1,tv2"
  

13.Chain

Chain可以很容易达到其他布局管理器不容易实现，甚至无法实现的样式

• 应用场景

  某几个控件之间首位相接，排列方式有特殊要求

• 使用方式

  layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
  layout_constraintVertical_chainStyle="spread|spread_inside|packed"
  

chainStyle取值：

• spread: 控件均匀分布，即控件之间（包括边框）间距相同
• spread_inside: 第一个和最后一个控件固定在链两端的约束边界上，其余控件均匀分布，即控件内部之间间距相同
• packed: 控件打包在一起（在考虑外边距之后）。 然后，您可以通过更改链的头视图偏差调整整条链的偏差（左/右或上/下）。

image.png