布局控件 -- FlexboxLayout

一、基础

可伸缩布局 FlexboxLayout

二、使用

//build.gradle
implementation 'com.google.android:flexbox:0.2.5'

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flexbox_layout"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    app:alignItems="flex_start"
    app:alignContent="flex_start"
    app:showDivider="beginning|middle|end"
    app:dividerDrawable="@drawable/divider_shape">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="Android"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="Java"
        app:layout_flexGrow="1"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_flexGrow="1"
        app:layout_alignSelf="flex_start"
        android:text="Kotlin"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_flexGrow="1"
        app:layout_alignSelf="flex_start"
        android:text="设计模式"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="架构模式"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="网络协议"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="C语言"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="数据结构与算法"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="数据库"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="计算机基础"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="开发工具"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_alignSelf="flex_start"
        android:text="Flutter"
        app:layout_order="2"
        android:gravity="center"
        android:textColor="@color/text_color"
        android:background="@drawable/label_bg_shape"/>
</com.google.android.flexbox.FlexboxLayout>

//label_bg_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000"/>
</shape>

//colors.xml
<color name="text_color">#0000FF</color>

//divider_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="3dp" android:height="5dp"/>
    <solid android:color="#00FF00"/>
</shape>

效果：

FlexboxLayout