Android Studio：如何将情绪板Activity内容显示到菜单CardView？

核心思路 #

不用把图片设为CardView背景，直接在CardView内部嵌套ImageView承载图片，搭配图片加载库处理适配与加载问题，同时做好情绪板与图片数据的关联。

步骤1：调整CardView布局 #

修改菜单的CardView布局，在内部添加ImageView让它铺满CardView，示例如下：

<androidx.cardview.widget.CardView
    android:id="@+id/mood_board_card"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp">

    <ImageView
        android:id="@+id/card_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" /> <!-- 让图片铺满且裁剪适配 -->

</androidx.cardview.widget.CardView>

步骤2：关联情绪板与图片数据 #

给每个情绪板存储至少一张代表图的本地路径（比如用户添加的第一张图片的Uri路径），用SharedPreferences做简单存储适合入门：

// 当用户在情绪板页面添加第一张图片时，保存路径到SharedPreferences
val sharedPref = getSharedPreferences("MoodBoardPrefs", MODE_PRIVATE)
val editor = sharedPref.edit()
editor.putString("mood_board_${boardId}_cover", imageLocalPath) // boardId为情绪板唯一标识
editor.apply()

步骤3：用图片加载库加载图片到CardView #

推荐用Glide（比手动处理Bitmap/Drawable简单），先在build.gradle(Module)添加依赖：

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.16.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'
}

然后在菜单页面的RecyclerView Adapter中加载图片：

// 在RecyclerView的onBindViewHolder方法中加载图片
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val moodBoard = moodBoardList[position]
    val coverImagePath = sharedPref.getString("mood_board_${moodBoard.id}_cover", "")
    
    Glide.with(holder.itemView.context)
        .load(File(coverImagePath)) // 若是Uri路径直接传Uri对象即可
        .placeholder(R.drawable.default_cover) // 加载中占位图
        .error(R.drawable.error_cover) // 加载失败占位图
        .into(holder.cardImage)
}

// ViewHolder示例
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val cardImage: ImageView = itemView.findViewById(R.id.card_image)
}

为什么之前用Drawable背景失败？ #

手动用Drawable加载本地图片容易出现路径错误、Bitmap解码失败、拉伸变形等问题，比如：

// 不推荐的手动方式（易出错）
val bitmap = BitmapFactory.decodeFile(imageLocalPath)
val drawable = BitmapDrawable(resources, bitmap)
cardView.background = drawable

Glide会自动处理内存缓存、图片缩放适配等问题，更适合入门开发者。

额外提示 #

• 若一个情绪板有多张图片，可将前2-3张拼成缩略图，Glide支持简单图片变换，也可自定义Drawable实现。
• 点击CardView跳转时，记得传递情绪板ID到情绪板页面，方便加载对应所有图片。

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