一、概念

解决布局嵌套过多的问题，采用方向约束的方式对控件进行定位。

二、位置

2.1 对齐

至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。

layout_constraintLeft_toLeftOf	我的左边，与XXX左边对齐。
layout_constraintLeft_toRightOf	我的左边，与XXX右边对齐。
layout_constraintRight_toRightOf	我的右边，与XXX右边对齐。
layout_constraintRight_toLeftOf	我的右边，与XXX左边对齐。
layout_constraintTop_toTopOf	我的顶部，与XXX顶部对齐。
layout_constraintTop_toBottomOf	我的顶部，与XXX底部对齐。
layout_constraintBottom_toBottomOf	我的底部，与XXX底部对齐。
layout_constraintBottom_toTopOf	我的底部，与XXX顶部对齐。
layout_constraintBaseline_toBaselineOf	我的文本基线，与XXX文本基线对齐。

2.2 角度

正上方是0°，顺时针角度为正。

layout_constraintCircle="@tvName"	目标控件ID
layout_constraintCircleRadius="70"	半径
layout_constraintCircleAngle="42"	角度（0~360）

2.3 居中偏移

在水平或垂直方向上的百分比位置，默认值为0.5居中。

layout_constraintHorizontal_bias="0.3"
layout_constraintVertical_bias="0.2"

<TextView
    app:layout_constraintTop_toBottomOf="@id/tv2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.3"    //水平30%位置
    app:layout_constraintVertical_bias="0.2"/>    //垂直20%位置

2.4 边距

GoneMargin：当依赖的目标 View 可见性被设为 gone 时，该设置才会生效来占位。

android:layout_margin="0dp" android:layout_marginStart="0dp" android:layout_marginLeft="0dp" android:layout_marginTop="0dp" android:layout_marginEnd="0dp" android:layout_marginRight="0dp" android:layout_marginBottom="0dp"	外边距
android:padding="0dp" android:paddingStart="0dp" android:paddingLeft="0dp" android:paddingTop="0dp" android:paddingEnd="0dp" android:paddingRight="0dp" android:paddingBottom="0dp"	内边距
app:layout_goneMarginBottom="0dp" app:layout_goneMarginEnd="0dp" app:layout_goneMarginLeft="0dp" app:layout_goneMarginRight="0dp" app:layout_goneMarginStart="0dp" app:layout_goneMarginTop="0dp"	GoneMargin

三、尺寸

3.1 最大值最小值

宽或高设置为 wrap_content 时才生效，用来限制最大最小值。

android:minWidth="100dp"

android:minHeight="100dp"

宽度

android:maxWidth="100dp"

android:maxHeight="100dp"

高度

3.2 设为 0dp

相当于是 match_constraint，作用根据设置的类型而定。

layout_constraintWidth_default=""

layout_constraintHeight_default=""

可设为spread、percent、wrap。

3.2.1 填充约束下的全部可用空间 spread（默认）

作为默认值，宽或高设为0dp后可以不写layout_constraintXXX_default="spread"。

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@color/blue"/>

3.2.2 按父布局百分比设置 percent

这个父布局指 ConstraintLayout 的大小，如果它作为根布局则指的是屏幕大小。设置具体百分比值后，可以不用写layout_constraintXXX_default="percent"。

layout_constraintWidth_percent="0.7"

设置百分比值

<TextView
    android:id="@+id/tvBlack"
    android:layout_width="0dp"    //宽度设为0dp
    android:layout_height="100dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.5"    //设置具体百分比值
    />

3.2.3 匹配内容大小但不超过约束 wrap

红色宽度设为 wrap_content 并设置了左右外边距，当内容过多的时候会无视外边距（加上一行 app:layout_constrainedWidth="true"即可解决）。蓝色设为 0dp wrap模式，内容不会超过约束。

app:layout_constraintWidth_min=""
app:layout_constraintHeight_min=""
app:layout_constraintWidth_max=""
app:layout_constraintHeight_max=""

0dp下匹配最大最小值

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginStart="100dp"
    android:layout_marginEnd="100dp"
    android:background="@color/red"
    android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
    android:textSize="20sp"
    android:textColor="@color/white"/>

<TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    app:layout_constraintWidth_default="wrap"    //设为wrap模式
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginStart="100dp"
    android:layout_marginEnd="100dp"
    android:background="@color/blue"
    android:layout_marginTop="100dp"
    android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
    android:textSize="20sp"
    android:textColor="@color/white"/>

3.2.4 按宽高比设置 Ratio

方式一：宽高需要按比例设置的那个设为0dp，另一个正常设置。

方式二：宽高都设为0dp，使用W或H以另一方为基准调节自己。

android:layout_width="200dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="2:1"    //宽:高

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W,0.1:1"    //以高为基准调节宽

四、约束链 Chain

在水平或垂直方向，许多控件首尾相互约束形成一条链。可以设置它们的分布，当宽或高设为0dp还能使用权重 app:layout_constraintHorizontal_weight="2" 但是会撑满。

layout_constraintVertical_chainStyle="" layout_constraintHorizontal_chainStyle=""	spread：视图均匀分布。
	spread_inside：除了约束链的头部和尾部贴在两边的约束上，其余均匀分布。
	packed：将视图打包在一起，默认居中。

五、屏障 Barrier

左侧垂直的 TextView 谁更宽都有可能，右侧再来一个TextView，对齐它们哪个都会存在另一个更长造成重叠的问题。可以用 LinearLayout 包裹它俩，也可以用屏障。在布置国际化字符串或显示用户生成的无法预测大小的内容时，屏障非常有用。

app:barrierDirection=""	屏障位于目标控件的哪个方位：top、bottom、left、right、start、end。
app:constraint_referenced_ids=""	填上需要包裹的控件id，用逗号分隔。

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView2,textView1" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/barrier"
    app:layout_constraintTop_toTopOf="parent" />

六、组 Group

一次对多个控件进行显示或隐藏。

<androidx.constraintlayout.widget.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="A,B,C"    //添加需要包含的控件id，用逗号分隔。
/>

七、占位 Placeholder

先占位，后期通过代码调用 setContent() 动态设置内容，也可以直接在 xml 中通过 app:content="" 指定要显示的内容。

<androidx.constraintlayout.widget.Placeholder
    android:layout_width="100dp"
    android:layout_height="60dp"
    app:content="@layout/content"    //静态设置替换内容
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

八、流式布局 Flow

需要添加到链中的控件不用设置约束，通过对 Flow 设置。

8.1 链约束

flow_wrapMode=""

控件排列方式：none、chain、aligned。

flow_horizontalGap=""

flow_verticalGap=""

控件之间的间隔。

flow_horizontalStyle

flow_verticalStyle

flow_firstHorizontalStyle

flow_firstVerticalStyle

flow_lastHorizontalStyle

flow_lastVerticalStyle

当排列方式是chain或aligned时可以配置链：packed、spread、spread_inside。

8.1.1 none

水平居中，超出屏幕部分不可见。默认值。

8.1.2 chain

超出部分自动换行，同行控件评分宽度。

8.1.3 aligned

8.2 对齐约束

链上的控件可能是大小不一的，需要设置对齐。（排列方式为aligned无效）

flow_verticalAlign=“”	需要链是水平方向，模式：top、bottom、center、baseline。
flow_horizontalAlign=“”	需要链是垂直方向，模式：start、end、center。

8.3 数量约束

flow_maxElementsWrap="3"

当排列方式为chain或aligned时，可以控制每行最大控件数量。

九、层布局 Layer

常用来增加背景或共同动画，大小在布局期间根据引用的所有控件进行调整，代码的先后顺序决定位置：避免写在所有引用控件的最后面，这样会显示在最上面，设置背景会把它们覆盖住。

十、ImageFilterButton、ImageFilterView

10.1 图片圆角

可以使用 roundPercent（0-1的小数）或 round 属性来设置图片圆角。

roundPercent="0.7"	百分比设置圆角
round="5dp"	dp设置圆角

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/mi"
    app:roundPercent="0.7"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

10.2 图片重叠

altSrc=""	设置第二个图片资源，会跟 src 图片资源形成交叉淡化效果。
crossfade=""	第二图片资源透明度，默认为0不可见。
warmth=""	色温
brightness=""	亮度
saturation=""	饱和度
contrast=""	对比度

十一、MockView

可以用来充当原型图。

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="80dp"
        android:layout_marginTop="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Name"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Avatar"
        app:layout_constraintTop_toTopOf="@id/Avatar" />

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Age"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@id/Avatar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Avatar" />

十二、流式API（ConstraintProperties）

2.0版本提供了 ConstraintProperties 可以使用流式API修改属性。

val properties = ConstraintProperties(findViewById(R.id.image))
    properties.translationZ(32f)
          .margin(ConstraintSet.START, 43)
          .apply()

十三、ConstraintSet

在代码中动态的修改约束，从而实现布局效果的变化或动画。

public void clone(ConstraintSet set) public void clone(Constraints constraints) public void clone(ConstraintLayout constraintLayout) public void clone(Context context, int constraintLayoutId)	克隆另一个set 克隆一个

Android - 约束布局 ConstraintLayout