ConstraintLayout 2.0新特性解析（一）--Flow流式布局

前言

之前解析过 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流式布局来的更灵活，更简单。

首先来布局：

直接这么写的话，展示样式是这样的：

图1

用属性： 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：

图2

从chain开始已具备流式布局的基本特性：自动换行。
chain的特性是尾行不足一行时，平分剩余空间。

app:flow_wrapMode="aligned" 对齐展示，此对齐是绝对对齐，如果视图大小不一，也会上下对齐，如图3：

图3

行间距

app:flow_horizontalGap：横向行间距

app:flow_verticalGap：纵向行间距

如图123所示，加了10dp的间距后，看着跟网格布局一样。

orientation 水平or垂直流式

顾名思义，与LinearLayout的orientation属性一样，约束布局是水平方向的流式，还是垂直方向。
以上的图都是默认android:orientation="horizontal"的流式布局，而android:orientation="vertical"的样式如图4：

图4

对齐

除了app:flow_wrapMode="aligned"的绝对对齐之外，Flow还有几种对齐方式：

app:flow_verticalAlign：值有top，bottom，center，baseline。字面意思是约束所有
垂直位置，与horizontal的语义正好相反。orientation为horizontal，或者不配置时以下生效：

top就是顶部对齐，如图5：

image.png

bottom就是底不对齐，这里就不上图了。
center就是默认中心对齐样式。
baseline字面意思是与某个基准线对齐，具体没细探索。

app:flow_horizontalAlign：值有start，end，center。字面意思是约束所有水平位置。orientation为vertical，或者不配置时以下生效：

start就是起始位置对齐，从左到右布局样式就是左对齐，如图6：

图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：

图7

结语

Flow的相关属性就这些，要想实现我们想要的需求，就需要对每一种属性都要有所了解。比如我们常见的流式布局需求如图8：

图8

单独使用以上哪种属性都实现不了，需要属性组合：

app:flow_wrapMode="chain"
app:flow_horizontalStyle="packed"
app:flow_horizontalBias="0"
这三种组合就可以实现了。

下一篇：ConstraintLayout 2.0新特性解析（二）-- Layer层布局，圆角视图，敬请期待！