一、基礎(chǔ)

可伸縮布局 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="設(shè)計(jì)模式"
        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="架構(gòu)模式"
        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="網(wǎng)絡(luò)協(xié)議"
        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="數(shù)據(jù)結(jié)構(gòu)與算法"
        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="數(shù)據(jù)庫"
        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="計(jì)算機(jī)基礎(chǔ)"
        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="開發(fā)工具"
        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