如何用StaggeredGridLayout实现不同尺寸的RecyclerView Item布局

1. 修复Item布局wrap_content不生效问题 #

当前Item布局中ImageView设置了固定高度200dp，导致外层MaterialCardView的wrap_content高度被强制固定，无法根据图片实际尺寸自适应。修改Item布局如下：

<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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:clickable="true"
    android:focusable="true"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp"
    app:rippleColor="@color/black500">

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/attention" />
</com.google.android.material.card.MaterialCardView>

• 移除MaterialCardView中无效的约束属性（它并非ConstraintLayout的子View，这些约束无实际作用）
• 将ImageView高度改为wrap_content，添加android:adjustViewBounds="true"，让图片按原始宽高比自适应显示，从而让外层CardView的wrap_content生效。

2. 实现部分Item双倍尺寸 #

针对StaggeredGridLayoutManager，提供两种实现特殊尺寸Item的方案：

方案一：让指定Item占满整行（跨3列） #

在Paging3 Adapter的onBindViewHolder方法中，给需要放大的Item设置fullSpan属性：

override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
    val item = getItem(position) ?: return
    // 假设数据模型用isLarge字段标记大尺寸Item
    val layoutParams = holder.itemView.layoutParams as StaggeredGridLayoutManager.LayoutParams
    layoutParams.isFullSpan = item.isLarge
    holder.itemView.layoutParams = layoutParams

    // 图片加载逻辑示例
    Glide.with(holder.img.context)
        .load(item.imageUrl)
        .into(holder.img)
}

方案二：设置Item双倍高度 #

如果需要的是高度翻倍而非宽度跨列，可在绑定数据时动态设置ImageView高度：

override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
    val item = getItem(position) ?: return
    // 根据标记设置不同高度
    val heightRes = if (item.isLarge) R.dimen.large_image_height else R.dimen.normal_image_height
    holder.img.layoutParams.height = holder.itemView.resources.getDimensionPixelSize(heightRes)

    // 图片加载逻辑示例
    Glide.with(holder.img.context)
        .load(item.imageUrl)
        .into(holder.img)
}

在dimens.xml中定义高度：

<dimen name="normal_image_height">200dp</dimen>
<dimen name="large_image_height">400dp</dimen>

3. 优化RecyclerView的LayoutManager配置 #

建议在代码中初始化LayoutManager，提升灵活性：

val staggeredLayoutManager = StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)
// 可选：防止Item滚动时位置错乱
staggeredLayoutManager.gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_NONE
searchHomeImageRv.layoutManager = staggeredLayoutManager
searchHomeImageRv.adapter = yourPagingAdapter

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