如何将Android垂直布局改为水平布局？实现类CSS Flex动态布局

我是Android新手，正在自学Android开发，想要实现类似CSS Flex布局的动态水平流式布局（卡片自动换行、均匀排列），期望效果是多组卡片横向排列，一行放不下就自动换到下一行。但目前写出的代码只能实现单个卡片垂直居中显示，达不到预期效果。

当前使用的代码如下：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.72"
    android:background="@drawable/main_bg_home">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="@dimen/_10sdp">

            <androidx.cardview.widget.CardView
                android:layout_width="@dimen/_230sdp"
                android:layout_height="@dimen/_50sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:gravity="center"
                app:cardBackgroundColor="@color/home_btn_bg_color"
                app:cardCornerRadius="@dimen/_8sdp"
                app:cardElevation="2dp">

                <RelativeLayout
                    android:id="@+id/wsBtn"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:layout_width="@dimen/_30sdp"
                        android:padding="@dimen/_6sdp"
                        android:layout_height="@dimen/_30sdp"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/_12sdp"
                        android:background="@drawable/ic_icon_bg"
                        android:src="@drawable/whts" />

                    <ImageView
                        android:layout_width="@dimen/_12sdp"
                        android:layout_height="@dimen/_12sdp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/_15sdp"
                        android:src="@drawable/right_arrow"
                        app:tint="@color/home_right_arrow_color" />

                    <TextView
                        android:id="@+id/txt1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/_60sdp"
                        android:text="@string/whatsapp"
                        android:textColor="@color/home_btn_txt"
                        android:textSize="@dimen/_13sdp"
                        android:textStyle="bold" />
                </RelativeLayout>
            </androidx.cardview.widget.CardView>

        </LinearLayout>
    </ScrollView>
</LinearLayout>

要实现类似CSS Flex的流式水平布局，Android里有两种常用方案：

方案1：使用FlexboxLayout（推荐，完美匹配Flex布局特性） #

Google官方提供的FlexboxLayout可以完全模拟CSS Flex的行为，支持自动换行、灵活的对齐方式。

步骤： #

1. 在Module级别的build.gradle中添加依赖：

implementation "com.google.android.flexbox:flexbox:3.0.0"

2. 修改布局文件，将原垂直LinearLayout替换为FlexboxLayout：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.72"
    android:background="@drawable/main_bg_home">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 替换为FlexboxLayout实现流式布局 -->
        <com.google.android.flexbox.FlexboxLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/_10sdp"
            app:flexWrap="wrap" <!-- 开启自动换行 -->
            app:justifyContent="space_around" <!-- 水平方向均匀分布 -->
            app:alignItems="center"> <!-- 垂直方向居中 -->

            <!-- 第一个卡片 -->
            <androidx.cardview.widget.CardView
                android:layout_width="@dimen/_230sdp"
                android:layout_height="@dimen/_50sdp"
                android:layout_margin="@dimen/_8sdp"
                app:cardBackgroundColor="@color/home_btn_bg_color"
                app:cardCornerRadius="@dimen/_8sdp"
                app:cardElevation="2dp">

                <RelativeLayout
                    android:id="@+id/wsBtn"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:layout_width="@dimen/_30sdp"
                        android:padding="@dimen/_6sdp"
                        android:layout_height="@dimen/_30sdp"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/_12sdp"
                        android:background="@drawable/ic_icon_bg"
                        android:src="@drawable/whts" />

                    <ImageView
                        android:layout_width="@dimen/_12sdp"
                        android:layout_height="@dimen/_12sdp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/_15sdp"
                        android:src="@drawable/right_arrow"
                        app:tint="@color/home_right_arrow_color" />

                    <TextView
                        android:id="@+id/txt1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/_60sdp"
                        android:text="@string/whatsapp"
                        android:textColor="@color/home_btn_txt"
                        android:textSize="@dimen/_13sdp"
                        android:textStyle="bold" />
                </RelativeLayout>
            </androidx.cardview.widget.CardView>

            <!-- 复制多个卡片即可实现横向排列自动换行，替换内部图标和文字即可 -->
            <androidx.cardview.widget.CardView
                android:layout_width="@dimen/_230sdp"
                android:layout_height="@dimen/_50sdp"
                android:layout_margin="@dimen/_8sdp"
                app:cardBackgroundColor="@color/home_btn_bg_color"
                app:cardCornerRadius="@dimen/_8sdp"
                app:cardElevation="2dp">
                <!-- 内部结构与第一个卡片一致 -->
            </androidx.cardview.widget.CardView>

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

方案2：使用RecyclerView + GridLayoutManager #

如果卡片数量较多需要动态加载，推荐用RecyclerView配合GridLayoutManager，通过计算列数实现类似流式布局的效果：

步骤： #

1. 布局文件替换为RecyclerView：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.72"
    android:background="@drawable/main_bg_home">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/cardRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/_10sdp"/>
</LinearLayout>

2. 在Activity/Fragment中配置LayoutManager：

// 根据屏幕宽度和卡片宽度计算每行显示数量
val cardWidth = resources.getDimensionPixelSize(R.dimen._230sdp)
val screenWidth = resources.displayMetrics.widthPixels
val padding = resources.getDimensionPixelSize(R.dimen._8sdp) * 2
val spanCount = (screenWidth - padding) / cardWidth

val layoutManager = GridLayoutManager(this, spanCount)
cardRecyclerView.layoutManager = layoutManager
// 设置适配器加载卡片数据
cardRecyclerView.adapter = CardAdapter(yourCardDataList)

• FlexboxLayout的flexWrap="wrap"是实现自动换行的核心属性，justifyContent控制水平对齐逻辑，和CSS Flex属性完全对应。
• 静态少量卡片用FlexboxLayout更简便；动态大量数据用RecyclerView性能更优。

内容的提问来源于stack exchange，提问作者VUELOVER