Android Studio Kotlin中卡片跳转及MutableList传递至列表组件实现方法

1. 定义规范的Data Class #

遵循Kotlin命名规范调整类名（类名首字母大写），实现你需要的数据结构：

data class Details(
    var id: String,
    var image: Int, // 对应drawable资源ID，例如R.drawable.villa_icon
    var title: String
)

2. 初始化MutableList数据 #

填充4个卡片的示例数据，替换为你自己的资源ID和标题即可：

val cardData = mutableListOf(
    Details("1", R.drawable.villa_icon, "Villa"),
    Details("2", R.drawable.apartment_icon, "Apartment"),
    Details("3", R.drawable.hotel_icon, "Hotel"),
    Details("4", R.drawable.cabin_icon, "Cabin")
)

3. 首页卡片列表实现（基于RecyclerView） #

3.1 添加RecyclerView依赖 #

在app模块的build.gradle.kts（或build.gradle）中添加依赖：

dependencies {
    implementation("androidx.recyclerview:recyclerview:1.3.2")
}

3.2 创建单个卡片布局（item_card.xml） #

用CardView包裹卡片内容，示例布局如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="horizontal"
        android:padding="16dp"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/cardImage"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/cardTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:textSize="20sp"
            android:textStyle="bold"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

3.3 编写RecyclerView Adapter #

实现Adapter绑定数据并处理点击事件：

class CardAdapter(
    private val cardList: List<Details>,
    private val onCardClick: (Details) -> Unit
) : RecyclerView.Adapter<CardAdapter.CardViewHolder>() {

    inner class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val cardImage: ImageView = itemView.findViewById(R.id.cardImage)
        val cardTitle: TextView = itemView.findViewById(R.id.cardTitle)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_card, parent, false)
        return CardViewHolder(view)
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
        val card = cardList[position]
        holder.cardImage.setImageResource(card.image)
        holder.cardTitle.text = card.title

        // 绑定点击事件
        holder.itemView.setOnClickListener {
            onCardClick(card)
        }
    }

    override fun getItemCount(): Int = cardList.size
}

3.4 在首页Activity中配置RecyclerView #

以MainActivity为例，完成列表初始化和跳转逻辑：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
        // 设置2列网格布局，也可改用LinearLayoutManager实现单列
        recyclerView.layoutManager = GridLayoutManager(this, 2)
        val adapter = CardAdapter(cardData) { card ->
            // 根据卡片标题跳转对应详情页
            when(card.title) {
                "Villa" -> startActivity(Intent(this, VillaListActivity::class.java))
                "Apartment" -> startActivity(Intent(this, ApartmentListActivity::class.java))
                "Hotel" -> startActivity(Intent(this, HotelListActivity::class.java))
                "Cabin" -> startActivity(Intent(this, CabinListActivity::class.java))
                else -> {}
            }
        }
        recyclerView.adapter = adapter
    }
}

4. 创建详情页面 #

分别创建VillaListActivity、ApartmentListActivity等对应的Activity类和布局文件，填充页面内容即可。

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