Android 流式布局的实现方式

这里说的流式布局是指view相互跟随，并且可以自动换行的操作。常见的用例为：搜索记录、标签选择等。

使用ConstraintLayout + Flow实现

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_1"
        android:layout_width="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="wrap_content">

        <androidx.constraintlayout.helper.widget.Flow
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:flow_wrapMode="aligned"
            app:flow_horizontalGap="30dp"
            app:flow_verticalGap="10dp"
            app:constraint_referenced_ids="tv_1,tv_2,tv_3,tv_4,tv_5,tv_6,tv_7"/>

        <com.google.android.material.chip.Chip
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>

        <com.google.android.material.chip.Chip
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="mess"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message" />

    </androidx.constraintlayout.widget.ConstraintLayout>

使用Material 的 ChipGroup 实现

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:chipSpacingHorizontal="30dp"
        app:chipSpacingVertical="15dp"
        app:layout_constraintTop_toBottomOf="@id/cl_1"
        app:layout_constraintStart_toStartOf="parent">
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>

        <com.google.android.material.chip.Chip
            android:id="@+id/tv_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="mess"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message"/>
        <com.google.android.material.chip.Chip
            android:id="@+id/tv_17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="message" />
    </com.google.android.material.chip.ChipGroup>

也可以把Chip换成其他的View

使用 FlexboxLayoutManager 实现

val layoutManager = FlexboxLayoutManager(this)
layoutManager.flexWrap = FlexWrap.WRAP
layoutManager.alignItems = AlignItems.STRETCH
recyclerView.layoutManager = topLayoutManager
val adapter = FlexAdapter(list)
recyclerView.adapter = adapter

自定义view进行实现

GitHub上有好多，搜索FlowLayout就能找到