Android Studio中如何实现图片所示的可添加式CardView？

1. 引入CardView依赖 #

在项目的app/build.gradle（模块级）中添加依赖：

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

2. 编写主布局 #

创建包含CardView容器和添加按钮的布局（activity_main.xml）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:gap="16dp">

    <!-- 动态CardView的容器 -->
    <LinearLayout
        android:id="@+id/card_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gap="16dp"/>

    <!-- 用于触发添加操作的CardView -->
    <androidx.cardview.widget.CardView
        android:id="@+id/add_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:padding="16dp"
            android:clickable="true"
            android:focusable="true">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_add"
                android:tint="@color/teal_200"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="添加新项"
                android:textSize="16sp"
                android:layout_marginStart="8dp"/>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

3. 创建可复用的CardView模板 #

制作单个可编辑CardView的布局（item_card.xml）：

<?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"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="输入内容"
            android:inputType="text"/>

        <Button
            android:id="@+id/delete_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="删除"
            android:layout_marginTop="8dp"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

4. 实现添加/删除逻辑 #

在Activity中处理动态添加和删除CardView的逻辑：

import android.os.Bundle
import android.view.LayoutInflater
import android.widget.Button
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity
import androidx.cardview.widget.CardView

class MainActivity : AppCompatActivity() {
    private lateinit var cardContainer: LinearLayout
    private lateinit var addCard: CardView

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

        cardContainer = findViewById(R.id.card_container)
        addCard = findViewById(R.id.add_card)

        addCard.setOnClickListener { addNewCard() }
    }

    private fun addNewCard() {
        val cardView = LayoutInflater.from(this)
            .inflate(R.layout.item_card, cardContainer, false) as CardView
        
        val deleteBtn = cardView.findViewById<Button>(R.id.delete_btn)
        deleteBtn.setOnClickListener { cardContainer.removeView(cardView) }
        
        cardContainer.addView(cardView)
    }
}

5. 样式适配 #

根据示例图调整以下参数匹配效果：

• 修改app:cardCornerRadius调整圆角大小
• 修改app:cardElevation控制阴影强度
• 替换添加按钮的图标、文字颜色，调整EditText的样式（比如去掉下划线）

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