安卓流式布局实现记录

效果图：

1、导入第三方控件

复制代码

    implementation 'com.google.android:flexbox:1.1.0'

2、布局中使用

XML 复制代码

  <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 复制代码

<?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中

Kotlin 复制代码

    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博客