ConstraintLayout Flow

bqliang
4,110 阅读4分钟

Flow

刚开始用 ConstraintLayout 那会，想实现一个类似 LinearLayout 的布局...直接写成了 Chain 链，每个控件左右互相约束，奶奶滴，怎么这么麻烦...

ConstraintLayout 为我们提供了一个 Flow，可以很方便实现类似 LinearLayout 的布局，Flow 可以理解为流式布局，它可以将多个 View 按照一定的规则排列起来，比如我有 10 个 View 横向排列：

wrapMode_none.png

<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

wrapMode chain

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

flow_chain.png

每一行/列的默认排列方式类似于约束布局链条的 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" />

flow_chain_spread_inside.png

<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" />

flow_chain_packed.png

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" />

flow_chain_lastHorizontalStyle.png

还可以设置 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" />

flow_chain_lastHorizontalBias.png

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

horizontal/vertical Align

到目前为止，我们的控件都是同等大小的，如果控件大小不一样，那么就会出现这种情况：

flow_chain_unequal.png

如果我想让每一行的 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" />

flow_chain_verticalAlign_top.png

同理
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" />

flow_chain_maxElementsWrap.png

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>

flow_chain_aligned.png


最后再来温故一下 flow_wrapMode 的 3 种模式：

v2-5327d7036f3cb3659f679a7617df223f_b.gif

avatar
文章
阅读
粉丝