Flow

ConstraintLayout 为咱们提供了一个 Flow，能够实现相似 LinearLayout 的布局，Flow 能够理解为流式布局，它能够将多个 View 依照必定的规矩摆放起来，比如我有 10 个 View 横向摆放：

ConstraintLayout Flow

<View
    android:id="@+id/view1"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="#FF8A80" />
...
<View
    android:id="@+id/view10"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="#FFD180" />
<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

app:flow_horizontalGap / app:flow_verticalGap 能够设置水平/垂直方向上的间隔。

app:flow_wrapMode 特点是 Flow 的一个非常重要的特点，它能够设置 Flow 的摆放方法，有三种：wrap none / wrap chain / wrap aligned

ConstraintLayout Flow

wrapMode chain

wrapMode 的默许值是 none，表明只创立一条链，假如元素很多，这条链就会很长，手机屏幕放不下，那么就会溢出。
而 chain 会创立多条链，也就是说，假如横向摆放成一行手机屏幕放不下，那么就会换行创立一条新的链。

ConstraintLayout Flow

每一行/列的默许摆放方法相似于约束布局链条的 spread，能够运用 app:flow_horizontalStyle / app:flow_verticalStyle 来设置每一行/列的摆放方法，有三种：
① spread: 默许值，平均分配
② spread_inside: 和 spread 相似，可是不包括两头的 view
③ packed: 压缩

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_horizontalStyle="spread_inside"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Flow

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_horizontalStyle="packed"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Flow

first/last + Horizontal/Vertical + Style/Bias

假如只想影响最终一行/列的摆放方法，能够运用 app:flow_lastHorizontalStyle / app:flow_lastVerticalStyle

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_lastHorizontalStyle="packed"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Flow

还能够设置 app:flow_lastHorizontalBias 和 app:flow_lastVerticalBias 来设置最终一行的偏移量

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_lastHorizontalStyle="packed"
    app:flow_lastHorizontalBias="1"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Flow

同理: app:flow_firstHorizontalStyle / app:flow_firstVerticalStyle app:flow_firstHorizontalBias / app:flow_firstVerticalBias

horizontal/vertical Align

到目前为止，咱们的控件都是同等巨细的，假如控件巨细不一样，那么就会出现这种状况：

ConstraintLayout Flow

假如我想让每一行的 View 顶端对齐，则能够运用 app:flow_verticalAlign 特点

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:flow_verticalAlign="top"
    app:flow_wrapMode="chain"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Flow

同理
app:flow_horizontalAlign="start|end|center"
app:flow_verticalAlign="top|bottom|center|baseline"

maxElementsWrap

和 GridLayout 相似，Flow 也能够设置每行/列的数量，运用 app:flow_maxElementsWrap 和 app:flow_maxElementsWrap 来设置每行/列的数量，假如设置为 0，表明不限制数量

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
    app:flow_horizontalGap="8dp"
    app:flow_maxElementsWrap="2"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout Flow

wrapMode aligned

aligned 和 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"
    tools:context=".FlowActivity">
    <View
        android:id="@+id/view1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#FF8A80" />
    ...
    <View
        android:id="@+id/view10"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#FFD180" />
    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6,view7,view8,view9,view10"
        app:flow_horizontalGap="8dp"
        app:flow_verticalGap="8dp"
        app:flow_wrapMode="aligned"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout Flow