如何实现中心带图标、下方配外置文字的2行3列CardView布局

核心逻辑很简单：不要把说明文字放到CardView容器内部，每个网格单元用垂直排列的外层容器，依次包裹「居中放图标的CardView」+「卡片下方的说明文字」，再通过网格布局控制2行3列的排布即可。

两种常用实现方式 #

• 静态固定内容：直接用GridLayout作为根布局，设置columnCount=3、rowCount=2，手动写6个网格单元即可
• 动态可滚动/可复用内容：用RecyclerView搭配GridLayoutManager（列数设为3），通过Adapter加载列表数据，适配性更好

代码示例（静态布局版本） #

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    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="wrap_content"
    android:columnCount="3"
    android:rowCount="2"
    android:padding="16dp"
    android:horizontalSpacing="16dp"
    android:verticalSpacing="12dp">

    <!-- 单个网格单元，共复制6份即可填满2行3列 -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            app:cardCornerRadius="12dp"
            app:cardElevation="4dp">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:src="@drawable/your_custom_icon"
                android:contentDescription="功能图标"/>
        </com.google.android.material.card.MaterialCardView>

        <!-- 文字放在CardView外部，卡片下方 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="功能说明文字"
            android:textSize="14sp"/>
    </LinearLayout>

</GridLayout>

RecyclerView动态实现注意点 #

• 初始化时给RecyclerView设置网格布局管理器：recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
• 把上述代码里单个网格单元的LinearLayout代码抽成独立的item布局文件，在Adapter中绑定对应位置的图标资源和文字内容即可
• 卡片间距可以通过给item根布局设置margin、或者自定义RecyclerView.ItemDecoration实现

效果参考示意图

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