如何在RecyclerView网格布局中创建响应式且符合展示要求的列表项

要实现响应式的网格列表项效果，按以下步骤修改即可： #

1. 调整列表项布局XML #

你需要把固定宽高的硬编码去掉，通过比例约束+内容自适应实现适配，修改后的完整代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<com.google.android.material.card.MaterialCardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/cardView1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:minHeight="@dimen/_195sdp"
  app:cardCornerRadius="@dimen/_20sdp"
  app:cardElevation="0dp"
  app:cardMaxElevation="0dp"
  android:backgroundTint="@color/light_gray"
  android:layout_margin="@dimen/_4sdp"
  app:cardPreventCornerOverlap="false"
  app:cardUseCompatPadding="true"
  app:contentPadding="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@drawable/list_item_image_view_bg"
            android:scaleType="centerCrop"
            android:src="@drawable/school_bag"
            app:layout_constraintDimensionRatio="W,166:120"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/light_gray"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            app:layout_constraintBottom_toBottomOf="parent">

            <TextView
                android:id="@+id/itemName_TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/_4sdp"
                android:text="School Bag"
                android:textColor="@color/blue"
                android:fontFamily="@font/poppins_medium"
                android:textSize="@dimen/_12ssp"
                android:maxLines="1"
                android:ellipsize="end"/>


            <TextView
                android:id="@+id/inExchange_TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/list_exchange_item_bg"
                android:text="Rs. 400"
                android:padding="@dimen/_6sdp"
                android:textColor="@color/blue"
                android:fontFamily="@font/poppins_medium"
                android:textSize="@dimen/_8ssp"
                android:layout_marginVertical="@dimen/_2sdp"/>


            <TextView
                android:id="@+id/institutionName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/_4sdp"
                android:text="University of Sindh"
                android:textColor="@color/black"
                android:textSize="@dimen/_8ssp"
                android:fontFamily="@font/poppins_regular"
                android:maxLines="2"
                android:ellipsize="end"/>
        </androidx.appcompat.widget.LinearLayoutCompat>
   </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

主要修改点：

• 根卡片的宽度改为match_parent，高度改为wrap_content，加最小高度保证所有卡片最小高度一致，不会过矮
• 图片高度改为0dp，通过layout_constraintDimensionRatio设置宽高比，宽度撑满时高度自动按比例计算，保证不同设备下图片比例一致
• 给文本控件增加maxLines和ellipsize属性，避免文本过长撑歪布局，超出部分自动显示省略号
• 约束布局高度改为match_parent，文本区域同时约束顶部和底部，保证内容区域分布均匀

2. 配置RecyclerView的网格布局 #

初始化RecyclerView时用GridLayoutManager，如果需要适配不同屏幕尺寸可以动态计算列数，示例代码如下：

// 固定2列的写法
val layoutManager = GridLayoutManager(this, 2)
recyclerView.layoutManager = layoutManager

// 自适应列数写法（适配手机/平板）
fun calculateSpanCount(context: Context, minColumnWidthDp: Int): Int {
    val displayMetrics = context.resources.displayMetrics
    val screenWidthDp = displayMetrics.widthPixels / displayMetrics.density
    return (screenWidthDp / minColumnWidthDp).toInt().coerceAtLeast(2)
}
// 调用：最小列宽160dp，自动计算列数
val spanCount = calculateSpanCount(this, 160)
val layoutManager = GridLayoutManager(this, spanCount)
recyclerView.layoutManager = layoutManager

修改后就能保证不同设备下，列表项比例和你预期的目标效果一致，同时不会出现内容挤压或布局变形的问题。

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