ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，在 2016 年 Google I/O 中面世，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件。从 Android Studio 2.3起，创建layout文件就已经是默认ConstraintLayout了，但是尽管Google如此大力推这项技术，但在当时很少有人使用，近些年逐渐被大家拿起来，啊真香！（此处无图胜有图）。目前ConstraintLayout正式版已经更新至2.0.4，本文将带领大家熟悉ConstraintLayout全部内容。 一、布局的使用 注：默认所有外层都是约束布局，下方xml代码就不再写了。 1.1位置约束 ConstraintLayout采用方向约束的方式对控件进行定位，至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置
1.1.1基本方向约束 比如我们想实现这个位置，顶部和界面顶部对齐，左部和界面左部对齐：
<TextView
android:layout_width="60dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="A"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 基本方向约束 -->
<!-- 我的什么位置在谁的什么位置 -->
app:layout_constraintTop_toTopOf="" 我的顶部和谁的顶部对齐
app:layout_constraintBottom_toBottomOf="" 我的底部和谁的底部对齐
app:layout_constraintLeft_toLeftOf="" 我的左边和谁的左边对齐
app:layout_constraintRight_toRightOf="" 我的右边和谁的右边对齐
app:layout_constraintStart_toStartOf="" 我的开始位置和谁的开始位置对齐
app:layout_constraintEnd_toEndOf="" 我的结束位置和谁的结束位置对齐
app:layout_constraintTop_toBottomOf="" 我的顶部位置在谁的底部位置
app:layout_constraintStart_toEndOf="" 我的开始位置在谁的结束为止
<!-- ...以此类推 -->
1.1.2基线对齐 先看效果再看代码：
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="20"
android:textColor="@android:color/white"
android:textSize="50sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="¥"
android:textColor="@android:color/white"
android:textSize="20sp"
app:layout_constraintBaseline_toBaselineOf="@id/tv1"
app:layout_constraintStart_toEndOf="@id/tv1" />
<!--app:layout_constraintLeft_toRightOf="@id/tv1" 同上-->
1.1.3角度约束 这里做圆角处理了，否则的话是正斜上角40度
<ImageView
android:id="@+id/twoPoint"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="60dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv1" />
<ImageView
android:id="@+id/twoTarget"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="@+id/twoPoint"
app:layout_constraintCircle="@+id/twoPoint"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="113.12dp"
app:layout_constraintLeft_toLeftOf="parent" />
1.1.4百分比偏移 有的时候我们需要让控件在父布局的水平方向或垂直方向的百分之多少的位置，可以使用如下属性：
app:layout_constraintHorizontal_bias="" 水平偏移 取值范围是0-1的小数
app:layout_constraintVertical_bias="" 垂直偏移 取值范围是0-1的小数
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/arrow_up_float"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.95" />
1.2控件内边距，外边距，gone margin ConstraintLayout的内边距和外边距的使用方式其实是和其他布局一致的
<!-- 外边距 -->
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"
ConstraintLayout除此之外还有GONE Margin，当依赖的目标view隐藏时会生效的属性，例如B被A依赖约束，当B隐藏时B会缩成一个点，自身的margin效果失效，A设置的GONE Margin就会生效，属性如下：
<!-- GONE Margin -->
app:layout_goneMarginBottom="0dp"
app:layout_goneMarginEnd="0dp"
app:layout_goneMarginLeft="0dp"
app:layout_goneMarginRight="0dp"
app:layout_goneMarginStart="0dp"
app:layout_goneMarginTop="0dp"
来看下实例：
<TextView
android:id="@+id/three1"
android:layout_width="100dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="A"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/twoPoint" />
<TextView
android:id="@+id/three2"
android:layout_width="60dp"
android:layout_height="40dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="B"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/three1"
app:layout_constraintStart_toEndOf="@+id/three1"
app:layout_constraintTop_toTopOf="@+id/three1"
app:layout_goneMarginStart="100dp" />
1.3控件尺寸 1.3.1尺寸限制 在ConstraintLayout中提供了一些尺寸限制的属性，可以用来限制最大、最小宽高度，这些属性只有在给出的宽度或高度为wrap_content时才会生效，比如想给宽度设置最小或最大值，那宽度就必须设置为wrap_content，这个比较简单就不放示例代码了，具体的属性如下：
android:minWidth="" 设置view的最小宽度
android:minHeight="" 设置view的最小高度
android:maxWidth="" 设置view的最大宽度
android:maxHeight="" 设置view的最大高度
1.3.20dp(match_parent) 设置view的大小除了传统的wrap_content、指定尺寸、match_parent外，ConstraintLayout还可以设置为0dp（MATCH_CONSTRAINT），并且0dp的作用会根据设置的类型而产生不同的作用，进行设置类型的属性是
layout_constraintWidth_default和layout_constraintHeight_default，取值可为spread、percent、wrap。具体的属性及示例如下：
app:layout_constraintWidth_default="spread|percent|wrap"
app:layout_constraintHeight_default="spread|percent|wrap"
图的话最下面会贴出来：
- Spread:
<TextView
android:id="@+id/four1"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="four1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/three1"
app:layout_constraintWidth_default="spread" />
- Percent:
<TextView
android:id="@+id/four1"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="four1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/three1"
app:layout_constraintWidth_default="spread" />
- Wrap:
<TextView
android:id="@+id/five1"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="five1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/four1"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5" />
实例图：
注意： layout_width 为0dp和wrap_content需要留意细节：
<TextView
android:id="@+id/seven1"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="seven1seven1seven1seven1seven1seven1seven1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/six1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/eight1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="eight1eight1eight1eight1eight1eight1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/seven1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/nine1"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="nine1nine1nine1nine1nine1nine1nine1nine1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/eight1"
app:layout_constraintWidth_default="spread" />
app:layout_constraintWidth_min="" 0dp下，宽度的最小值
app:layout_constraintHeight_min="" 0dp下，高度的最小值
app:layout_constraintWidth_max="" 0dp下，宽度的最大值
app:layout_constraintHeight_max="" 0dp下，高度的最大值
1.3.3比例宽高 ConstraintLayout中可以对宽高设置比例，前提是至少有一个约束维度设置为0dp，这样比例才会生效，该属性可使用两种设置：
- 浮点值，表示宽度和高度之间的比率
- 宽度:高度，表示宽度和高度之间形式的比率
app:layout_constraintDimensionRatio="" 宽高比例
<TextView
android:id="@+id/ten1"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="ten1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/nine1" />
1.4Chains(链) Chains(链)也是一个非常好用的特性，它是将许多个控件在水平或者垂直方向，形成一条链，用于平衡这些控件的位置，那么如何形成一条链呢？形成一条链要求链中的控件在水平或者垂直方向，首尾互相约束，这样就可以形成一条链，水平方向互相约束形成的就是一条水平链，反之则是垂直链，下面看示例：
- spread（默认）：均分剩余空间
<TextView
android:id="@+id/eleven1"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="eleven1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/eleven2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/ten1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/eleven2"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="eleven2"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/eleven3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/eleven1"
app:layout_constraintTop_toBottomOf="@+id/ten1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/eleven3"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="eleven3"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/eleven2"
app:layout_constraintTop_toBottomOf="@+id/ten1"
app:layout_constraintWidth_default="spread" />
- spread（默认）：均分剩余空间
<TextView
android:id="@+id/twelve1"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="twelve1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/twelve2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/eleven1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/twelve2"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="twelve2"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/twelve3"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/twelve1"
app:layout_constraintTop_toBottomOf="@+id/eleven1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/twelve3"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="twelve3"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/twelve2"
app:layout_constraintTop_toBottomOf="@+id/eleven1"
app:layout_constraintWidth_default="spread" />
- packed：所有控件贴紧居中
<TextView
android:id="@+id/thirteen1"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="thirteen1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/thirteen2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/twelve1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/thirteen2"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="thirteen2"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/thirteen3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/thirteen1"
app:layout_constraintTop_toBottomOf="@+id/twelve1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/thirteen3"
android:layout_width="80dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="thirteen3"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/thirteen2"
app:layout_constraintTop_toBottomOf="@+id/twelve1"
app:layout_constraintWidth_default="spread" />
Chains(链)还支持weight（权重）的配置，使用layout_constraintHorizontal_weight和layout_constraintVertical_weight进行设置链元素的权重
<TextView
android:id="@+id/fourteen1"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="fourteen1"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/fourteen2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/thirteen1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/fourteen2"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="fourteen2"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/fourteen3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/fourteen1"
app:layout_constraintTop_toBottomOf="@+id/thirteen1"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/fourteen3"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="fourteen3"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="@+id/fourteen2"
app:layout_constraintTop_toBottomOf="@+id/thirteen1"
app:layout_constraintWidth_default="spread" />
二、辅助类 ConstraintLayout为了解决嵌套问题还提供了一系列的辅助控件帮助开发者布局，这些工具十分的方便，我在日常开发工作中也是使用的非常频繁 2.1Guideline（参考线） Guideline是一条参考线，可以帮助开发者进行辅助定位，并且实际上它并不会真正显示在布局中，像是数学几何中的辅助线一样，使用起来十分方便，出场率很高，Guideline也可以用来做一些百分比分割之类的需求，有着很好的屏幕适配效果，Guideline有水平和垂直方向之分，位置可以使用针对父级的百分比或者针对父级位置的距离
android:orientation="horizontal|vertical" 辅助线的对齐方式
app:layout_constraintGuide_percent="0-1" 距离父级宽度或高度的百分比(小数形式)
app:layout_constraintGuide_begin="" 距离父级起始位置的距离(左侧或顶部)
app:layout_constraintGuide_end="" 距离父级结束位置的距离(右侧或底部)
<androidx.constraintlayout.widget.Guideline
android:id="@+id/tv0GuideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintTop_toBottomOf="@+id/tv0" />
<TextView
android:id="@+id/tv0"
android:layout_width="60dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="A"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
上图中设置了一条水平方向位置在父级垂直方向0.5（50%）的Guideline，控件A的顶部依赖于Guideline，这样无论布局如何更改，Guideline的位置始终都会是父级垂直方向50%的位置，控件A的位置也不会偏离预设 PS:这里指的是父控件实际的高度 2.2 Group（组） 工作当中常常会有很多个控件同时隐藏或者显示的场景，传统做法要么是进行嵌套，对父布局进行隐藏或显示，要么就是一个一个设置，这显然都不是很好的办法，ConstraintLayout中的Group就是来解决这个问题的。Group的作用就是可以对一组控件同时隐藏或显示，没有其他的作用，它的属性如下：
app:constraint_referenced_ids="id,id" 加入组的控件id
<TextView
android:id="@+id/fifteen1"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="点我上方三个都消失"
android:textColor="@android:color/white"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fourteen1" />
<androidx.constraintlayout.widget.Group
android:id="@+id/fourteenGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="fourteen1,fourteen2,fourteen3" />
java代码中调用方式如下：
fifteen1.setOnClickListener {
fourteenGroup.visibility = View.GONE
}
2.3 Placeholder（占位符）
Placeholder的作用就是占位，它可以在布局中占好位置，通过app:content=""属性，或者动态调用setContent()设置内容，来让某个控件移动到此占位符中
<androidx.constraintlayout.widget.Placeholder
android:id="@+id/zero1"
android:layout_width="60dp"
android:layout_height="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
2.4 Flow（流式虚拟布局） Flow是用于构建链的新虚拟布局，当链用完时可以缠绕到下一行甚至屏幕的另一部分。当您在一个链中布置多个项目时，这很有用，但是您不确定容器在运行时的大小。您可以使用它来根据应用程序中的动态尺寸（例如旋转时的屏幕宽度）构建布局。Flow是一种虚拟布局。在ConstraintLayout中，虚拟布局(Virtual layouts)作为virtual view group的角色参与约束和布局中，但是它们并不会作为视图添加到视图层级结构中，而是仅仅引用其它视图来辅助它们在布局系统中完成各自的布局功能。
<TextView
android:id="@+id/sixteen1"
android:layout_width="200dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="sixteen1"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fifteen1" />
<TextView
android:id="@+id/sixteen2"
android:layout_width="200dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="sixteen2"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fifteen1" />
<TextView
android:id="@+id/sixteen3"
android:layout_width="200dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="sixteen3"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fifteen1" />
<TextView
android:id="@+id/sixteen4"
android:layout_width="200dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="sixteen4"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fifteen1" />
<TextView
android:id="@+id/sixteen5"
android:layout_width="200dp"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="sixteen5"
android:textColor="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fifteen1" />
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:constraint_referenced_ids="sixteen1,sixteen2,sixteen3,sixteen4,sixteen5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fifteen1" />
2.4.1链约束 Flow的constraint_referenced_ids关联的控件是没有设置约束的，这一点和普通的链是不一样的，这种排列方式是Flow的默认方式none，我们可以使用app:flow_wrapMode=""属性来设置排列方式，并且我们还可以使用flow_horizontalGap和flow_verticalGap分别设置两个view在水平和垂直方向的间隔，下面我们再添加几个控件来展示三种排列方式：
- none（默认值）：所有引用的view形成一条链，水平居中，超出屏幕两侧的view不可见
- chian：所引用的view形成一条链，超出部分会自动换行，同行的view会平分宽度。
- aligned：所引用的view形成一条链，但view会在同行同列。
app:flow_horizontalStyle="packed｜spread｜spread_inside" 所有水平链的配置
app:flow_verticalStyle="packed｜spread｜spread_inside" 所有垂直链的配置
app:flow_firstHorizontalStyle="packed｜spread｜spread_inside" 第一条水平链的配置，其他条不生效
app:flow_firstVerticalStyle="packed｜spread｜spread_inside" 第一条垂直链的配置，其他条不生效
app:flow_lastHorizontalStyle="packed｜spread｜spread_inside" 最后一条水平链的配置，其他条不生效
app:flow_lastVerticalStyle="packed｜spread｜spread_inside" 最后一条垂直链的配置，其他条不生效
2.4.2对齐约束 上面展示的都是相同大小的view，那么不同大小view的对齐方式，Flow也提供了相应的属性进行配置(flow_wrapMode="aligned"时，我试着没有效果)
<!-- top:顶对齐、bottom:底对齐、center:中心对齐、baseline:基线对齐 -->
app:flow_verticalAlign="top｜bottom｜center｜baseline"
<!-- start:开始对齐、end:结尾对齐、center:中心对齐 -->
app:flow_horizontalAlign="start|end|center"
2.4.3数量约束 当flow_wrapMode属性为aligned和chian时，通过flow_maxElementsWrap属性控制每行最大的子View数量 2.5ImageFilterButton & ImageFilterView 2.5.1图片圆角 ImageFilterButton和ImageFilterView是两个控件，他们之间的关系就和ImageButton与ImageView是一样的，所以这里就只拿ImageFilterView来做讲解。从名字上来看，它们的定位是和过滤有关系的，它们的大致作用有两部分，一是可以用来做圆角图片，二是可以叠加图片资源进行混合过滤。
<androidx.constraintlayout.utils.widget.ImageFilterView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/mi"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:roundPercent="0.7" />
2.5.2图片过滤 ImageFilterButton和ImageFilterView不但可以使用src来设置图片资源，还可以使用altSrc来设置第二个图片资源，altSrc提供的资源将会和src提供的资源通过crossfade属性形成交叉淡化效果,默认情况下，crossfade=0，altSrc所引用的资源不可见，取值在0-1。 除此之外，warmth属性可以用来调节色温，brightness属性用来调节亮度，saturation属性用来调节饱和度，contrast属性用来调节对比度。
