Constraint Layout 是最受欢迎的 Jetpack 库之一。

Flow是什么

Flow 是一种新的虚拟布局，它专门用来构建链式排版效果，当出现空间不足的情况时，它能够自动换行，甚至是自动延展到屏幕的另一区域。

Flow应用场景

当您需要对多个元素进行链式布局，但不确定在运行时布局空间的实际大小是多少，那么 Flow 对您来说就非常有用。您可以使用 Flow 来实现让布局随着应用屏幕尺寸的变化 (比如设备发生旋转后出现的屏幕宽度变化) 而动态地进行自适应。

Flow 是一种虚拟布局。在 Constraint Layout 中，虚拟布局 (Virtual layouts) 作为 virtual view group 的角色参与约束和布局中，但是它们并不会作为视图添加到视图层级结构中，而是仅仅引用其它视图来辅助它们在布局系统中完成各自的布局功能。

在 Constraint Layout 2.0 中，您可以用 Flow 标签来使用这一功能。Flow 会通过您传递的 constraint_referenced_ids 参数来获取到要引用的所有视图，然后根据这些视图创建一个虚拟的 virtual view group，再对这些视图进行链式布局。

Flow属性

wrapMode

Flow 中最重要的一个配置选项是 wrapMode，它可以决定在内容溢出 (或出现换行) 时的布局行为。

您可以对 wrapMode 指定三种模式:

• none – 所有引用的视图以一条链的方式进行布局，如果内容溢出则溢出内容不可见；
• chain – 当出现溢出时，溢出的内容会自动换行，以新的一条链的方式进行布局；
• align – 同 chain 类似，但是不以行而是以列的方式进行布局。

布局代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="card1,card2,card3,card4"
        app:flow_horizontalGap="12dp"
        app:flow_verticalGap="12dp"
        app:flow_wrapMode="chain"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="The Card 1 Ha" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Card 2" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="The Card 3" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Card 4" />
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

app:flow_wrapMode="chain"如图1：

图1.png

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

图2.png

行间距

• app:flow_horizontalGap：横向行间距
• app:flow_verticalGap：纵向行间距

orientation 水平or垂直流式

以上的图都是默认android:orientation="horizontal"的流式布局，而android:orientation="vertical"的样式如图3：

图3.png

对齐

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

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

举例，top就是顶部对齐，如图4：

图4.png

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

举例，end就是尾部对齐，如图5：

图5.png

链约束

ConstraintLayout所有的链约束都是三个值：packed，spread，spread_inside。spread是默认值。

Flow相关链约束：

• app:flow_horizontalStyle：约束所有水平链样式
• app:flow_verticalStyle：约束所有垂直链样式
• flow_firstHorizontalStyle：约束水平样式首行链样式
• flow_firstVerticalStyle：约束垂直样式首行链样式
• flow_lastHorizontalStyle：约束水平样式尾行链样式
• flow_lastVerticalStyle：约束垂直样式尾行链样式

app:flow_verticalStyle="packed"， 如图6：

图6.png

app:flow_firstVerticalStyle="packed", 如图7：

图7.png

flow_maxElementsWrap

类似GridLayoutManager类似，可以配置每行或者每列最多是视图，例如配置：
app:flow_maxElementsWrap="3"，如图8：

图8.png

练习Demo：https://github.com/ooxiaoyan/ConstraintLayoutTest