Android 中的 Flexbox 布局

简介

Flexbox 布局是一种用于移动设备和桌面端的布局方式，它通过强大的容器（FlexboxLayoutManager）和组件（FlexboxLayout）结构，使得界面十分灵活和适配。

特点

• 灵活：容器中的项（item）可以自适应到空间的不同大小或屏幕大小，容器在多种不同环境之间工作顺畅。
• 可嵌套：通过嵌套容器和子组件，可以创建更加复杂的布局。
• 容器自适应：FlexboxLayoutManager 可以自适应不同的容器尺寸和容量。

使用方式

步骤 1：添加依赖

在 app 目录下的 build.gradle 文件中添加以下代码：

dependencies {
    implementation 'com.google.android:flexbox:2.0.1'
}

步骤 2：引入布局

在布局 XML 文件中，添加以下代码：

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    app:alignItems="flex_start"
    app:alignContent="flex_start">

    <!-- child views here -->

</com.google.android.flexbox.FlexboxLayout>

在示例代码中，flexWrap 表示容器在换行时要采取的策略，justifyContent 用于定义子项在主轴方向的对齐方式，alignItems 定义子项在次轴方向的对齐方式，alignContent 用于定义子项在包含轴方向上的对齐方式。

步骤 3：添加子组件

在 FlexboxLayout 中，子项可以在水平方向或垂直方向上排列。以下是一个示例：

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    app:alignItems="flex_start"
    app:alignContent="flex_start">

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@color/teal_700"
        android:text="Item 1"
        android:textColor="@android:color/white"
        android:gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="@color/teal_700"
        android:text="Item 2"
        android:textColor="@android:color/white"
        android:layout_marginStart="8dp"
        android:gravity="center"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/teal_700"
        android:text="Item 3"
        android:textColor="@android:color/white"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        app:layout_flexGrow="1"
        android:gravity="center"/>
        
</com.google.android.flexbox.FlexboxLayout>

总结

Flexbox 布局是 Android 开发中非常灵活、可扩展的布局方式，有助于开发者创建不同类型、复杂的布局。同时它还支持许多真实世界应用场景下的最佳实践，因此具有很大的实际应用价值。