前言

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

首先来布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:flow_horizontalGap="10dp"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="none"
        app:constraint_referenced_ids="image1,image2,image3,image4,image5,image6,image7" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/image4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/image5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/image6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/image7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

图1

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

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

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="image1,image2,image3,image4,image5,image6,image7,image8,image9,image10,image11"
        app:flow_horizontalGap="10dp"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="chain"
        app:flow_horizontalStyle="packed"
        app:flow_horizontalBias="0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

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

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