效果图:
1、导入第三方控件
implementation 'com.google.android:flexbox:1.1.0'
2、布局中使用
<com.google.android.flexbox.FlexboxLayout
android: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.ShapeTextView
android: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" />
<ImageView
android: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 = str
binding.baggageFl.addView(itemView)
}
}
详细学习:FlexboxLayout使用(Google官方实现流式布局控件)_com.google.android:flexbox-CSDN博客