1、添加依赖

dependencies {
    compile 'com.google.android:flexbox:0.3.0'
}

2、准备下分割线文件(这步很重要，初学者都是通过添加View来实现分割线的)

在drawable文件下创建shape_flexbox_divider.xml文件，具体内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

3、在布局文件中使用FlexboxLayout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--
    分割线的使用
    app:dividerDrawable="@drawable/shape_flexbox_divider"
    app:showDivider="middle"
    app:flexWrap="wrap"
            app:justifyContent="flex_start"
    -->
    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexboxLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/px20dp"
        app:dividerDrawable="@drawable/shape_flexbox_divider"
        app:flexWrap="wrap"
        app:justifyContent="flex_start"
        app:showDivider="middle">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/shape_search_key"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:text="白色"
            android:textColor="#343434"
            android:textSize="16dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/shape_search_key"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:text="flexboxlayout"
            android:textColor="#343434"
            android:textSize="16dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/shape_search_key"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:text="黑色"
            android:textColor="#343434"
            android:textSize="16dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/shape_search_key"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:singleLine="true"
            android:text="Android"
            android:textColor="#343434"
            android:textSize="16dp" />
    </com.google.android.flexbox.FlexboxLayout>
</LinearLayout>

效果图

C68C30D2-8A03-4C03-A5FE-135B7819E8E3.png

4、也可以在代码中动态添加标签

获取标签控件

/**
     * 根据名称获取item
     *
     * @param tagName
     */
private View getTagView(final String tagName) {
        View view = layoutInflater.inflate(R.layout.item_flexbox, null);//item_flexbox自己定义
        TextView textView = ((TextView) view.findViewById(R.id.tv_name));
        textView.setText(tagName);
        return view;
    }

添加到flexboxLayout

flexboxLayout.addView(getTagView(key));