Flow 是一種虛擬布局棠涮。在 Constraint Layout 中，虛擬布局 (Virtual layouts) 作為 virtual view group 的角色參與約束和布局中刺覆，但是它們并不會(huì)作為視圖添加到視圖層級(jí)結(jié)構(gòu)中严肪，而是僅僅引用其它視圖來輔助它們?cè)诓季窒到y(tǒng)中完成各自的布局功能。

在 Constraint Layout 2.0 中谦屑，您可以用 Flow 標(biāo)簽來使用這一功能驳糯。Flow 會(huì)通過您傳遞的 constraint_referenced_ids 參數(shù)來獲取到要引用的所有視圖，然后根據(jù)這些視圖創(chuàng)建一個(gè)虛擬的 virtual view group氢橙，再對(duì)這些視圖進(jìn)行鏈?zhǔn)讲季帧?/p>

Flow屬性

wrapMode

Flow 中最重要的一個(gè)配置選項(xiàng)是 wrapMode酝枢，它可以決定在內(nèi)容溢出 (或出現(xiàn)換行) 時(shí)的布局行為。

您可以對(duì) wrapMode 指定三種模式:

• none – 所有引用的視圖以一條鏈的方式進(jìn)行布局悍手，如果內(nèi)容溢出則溢出內(nèi)容不可見帘睦；
• chain – 當(dāng)出現(xiàn)溢出時(shí)袍患，溢出的內(nèi)容會(huì)自動(dòng)換行，以新的一條鏈的方式進(jìn)行布局竣付；
• align – 同 chain 類似诡延，但是不以行而是以列的方式進(jìn)行布局。

布局代碼：

<?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"古胆，對(duì)齊展示肆良，此對(duì)齊是絕對(duì)對(duì)齊，如果視圖大小不一逸绎，也會(huì)上下對(duì)齊惹恃，如圖2：

圖2.png

行間距

• app:flow_horizontalGap：橫向行間距
• app:flow_verticalGap：縱向行間距

orientation 水平or垂直流式

以上的圖都是默認(rèn)android:orientation="horizontal"的流式布局，而android:orientation="vertical"的樣式如圖3：

圖3.png

對(duì)齊

除了app:flow_wrapMode="aligned"的絕對(duì)對(duì)齊之外桶良，F(xiàn)low還有幾種對(duì)齊方式：

app:flow_verticalAlign：值有top座舍，bottom，center陨帆，baseline曲秉。字面意思是約束所有垂直位置，與horizontal的語義正好相反疲牵。android:orientation="horizontal"承二，或者不配置時(shí)才生效。

舉例纲爸，top就是頂部對(duì)齊亥鸠，如圖4：

圖4.png

app:flow_horizontalAlign：值有start，end识啦，center负蚊。字面意思是約束所有水平位置。orientation為vertical颓哮，或者不配置時(shí)才生效家妆。

舉例，end就是尾部對(duì)齊冕茅，如圖5：

圖5.png

鏈約束

ConstraintLayout所有的鏈約束都是三個(gè)值：packed伤极，spread，spread_inside姨伤。spread是默認(rèn)值哨坪。

Flow相關(guān)鏈約束：

• 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

練習(xí)Demo：https://github.com/ooxiaoyan/ConstraintLayoutTest