前言
之前解析过 ConstraintLayout 的解析，扁平化布局，随着ConstraintLayout 2.0的到来，官方又提供了几个新的特性，包括Flow流式布局，Layer层共同背景、动画，ImageFilterButton、ImageFilterView圆形图片，MockView UI原型布局，Space边距补偿，MotionLayout动画，接下来，就让我们来探索下2.0新特性吧。
系列文章：
ConstraintLayout 2.0新特性解析（一）–Flow流式布局
ConstraintLayout 2.0新特性解析（二）– Layer层布局，圆角视图
ConstraintLayout 2.0新特性解析（三）– MockView UI原型布局，Space边距补偿，MotionLayout动画
Flow流式布局
流式布局的实现方式有很多种，比如RecycleView的StaggeredGridLayoutManager，或者自定义布局动态计算的方式等，无论哪种实现，都不如ConstraintLayout提供的Flow流式布局来的更灵活，更简单。
首先来布局：
直接这么写的话，展示样式是这样的：
用属性：app:constraint_referenced_ids将7个ImageView约束起来，基本配置就ok了。很明显，最左边和左右边的两个TextView没有空间展示了。
app:flow_wrapMode
接下来，就要用的Flow的第一个也是最关键的特性app:flow_wrapMode。它是用来标定流式布局的样式，有三个值：
app:flow_wrapMode=”none” 顾名思义，跟不设置一样，如图1一般。
app:flow_wrapMode=”chain” 链式，如图2：
从chain开始已具备流式布局的基本特性：自动换行。chain的特性是尾行不足一行时，平分剩余空间。
app:flow_wrapMode=”aligned” 对齐展示，此对齐是绝对对齐，如果视图大小不一，也会上下对齐，如图3：
行间距
app:flow_horizontalGap：横向行间距
app:flow_verticalGap：纵向行间距
如图123所示，加了10dp的间距后，看着跟网格布局一样。
orientation 水平or垂直流式
顾名思义，与LinearLayout的orientation属性一样，约束布局是水平方向的流式，还是垂直方向。
以上的图都是默认android:orientation="horizontal"的流式布局，而android:orientation="vertical"的样式如图4：
对齐
除了app:flow_wrapMode="aligned"的绝对对齐之外，Flow还有几种对齐方式：
app:flow_verticalAlign：值有top，bottom，center，baseline。字面意思是约束所有
垂直位置，与horizontal的语义正好相反。orientation为horizontal，或者不配置时以下生效：
top就是顶部对齐，如图5：
bottom就是底不对齐，这里就不上图了。
center就是默认中心对齐样式。
baseline字面意思是与某个基准线对齐，具体没细探索。
app:flow_horizontalAlign：值有start，end，center。字面意思是约束所有水平位置。orientation为vertical，或者不配置时以下生效：
start就是起始位置对齐，从左到右布局样式就是左对齐，如图6：
链约束
ConstraintLayout所有的链约束都是三个值：packed，spread，spread_inside。spread是默认值。链约束不懂的，去看我的另一篇ConstraintLayout文章吧，写的很详细。ConstraintLayout 的解析，扁平化布局
Flow相关链约束：
- app:flow_horizontalStyle：约束所有水平链样式
- app:flow_verticalStyle：约束所有垂直链样式
- flow_firstHorizontalStyle：约束水平样式首行链样式
- flow_firstVerticalStyle：约束垂直样式首行链样式
- flow_lastHorizontalStyle：约束水平样式尾行链样式
- flow_lastVerticalStyle：约束垂直样式尾行链样式
Bias
ConstraintLayout所有的bias取值范围都是0-1之间，默认0.5。不懂什么是bias，去看我的另一篇ConstraintLayout文章吧，写的很详细。ConstraintLayout 的解析，扁平化布局
Flow中的bias：
- app:flow_horizontalBias
- app:flow_verticalBias
- app:flow_firstHorizontalBias
- app:flow_firstVerticalBias
- app:flow_lastHorizontalBias
- app:flow_lastVerticalBias
同约束链匹配。
flow_maxElementsWrap
类似GridLayoutManager类似，可以配置每行或者每列最多是视图，例如配置：app:flow_maxElementsWrap="3"，如图7：
结语
Flow的相关属性就这些，要想实现我们想要的需求，就需要对每一种属性都要有所了解。比如我们常见的流式布局需求如图8：
单独使用以上哪种属性都实现不了，需要属性组合：
app:flow_wrapMode="chain"app:flow_horizontalStyle="packed"app:flow_horizontalBias="0"
这三种组合就可以实现了。
下一篇：ConstraintLayout 2.0新特性解析（二）– Layer层布局，圆角视图，敬请期待！
点击咨询 