效果图:
1、导入第三方控件
implementation 'com.google.android:flexbox:1.1.0'
2、布局中使用
<com.google.android.flexbox.FlexboxLayoutandroid:id="@+id/baggageFl"android:layout_width="match_parent"android:layout_height="wrap_content"app:flexWrap="wrap"app:justifyContent="space_evenly" ></com.google.android.flexbox.FlexboxLayout>
3、流式布局中内容的填充
这里有两种实现方式:xml中直接写和动态添加view
第一种和正常写布局一样,只要把内容控件写进去就行,就不说了,主要说第二种
举例说明:
创建一个子布局:item_baggage.xml
<?xml version="1.0" encoding="utf-8"?>
<com.hjq.shape.layout.ShapeConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingVertical="@dimen/dp_5"android:paddingHorizontal="@dimen/dp_8"xmlns:app="http://schemas.android.com/apk/res-auto"><com.hjq.shape.view.ShapeTextViewandroid:id="@+id/baggageNameTv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dp_10"android:layout_marginEnd="@dimen/dp_10"android:paddingHorizontal="@dimen/dp_15"android:paddingVertical="@dimen/dp_5"android:text="----"android:textColor="#333333"android:textSize="@dimen/sp_16"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="parent"app:shape_radius="@dimen/dp_10"app:shape_solidColor="#66FFD374"app:shape_strokeColor="#FFD374"app:shape_strokeSize="@dimen/dp_1" /><ImageViewandroid:id="@+id/closeImg"android:layout_width="@dimen/dp_20"android:layout_height="@dimen/dp_20"android:src="@mipmap/close_icon"app:layout_constraintBottom_toTopOf="@+id/baggageNameTv"app:layout_constraintEnd_toEndOf="@+id/baggageNameTv"app:layout_constraintStart_toEndOf="@+id/baggageNameTv"app:layout_constraintTop_toTopOf="@+id/baggageNameTv" />
</com.hjq.shape.layout.ShapeConstraintLayout>
2、动态添加view到FlexboxLayout中
private fun addLayoutToFlexboxLayout(strList: List<String>) {for (str in strList) {val itemView = LayoutInflater.from(this).inflate(R.layout.item_baggage, null)itemView.findViewById<ShapeTextView>(R.id.baggageNameTv).text = strbinding.baggageFl.addView(itemView)}}
详细学习:FlexboxLayout使用(Google官方实现流式布局控件)_com.google.android:flexbox-CSDN博客