这里说的流式布局是指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就能找到