如何使用含多控件的自定义CardView动态填充ListView？

我来帮你搞定这个自定义CardView列表的实现吧！以下是分步的解决方案，完全贴合你的需求：

1. 完善CardView的布局文件 #

先把你给出的布局补全并优化，这里用LinearLayout来组织Card内部的元素，方便适配：

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/custom_card"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- CardView容器，设置圆角和阴影 -->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="8dp"
        card_view:cardElevation="4dp"
        card_view:cardUseCompatPadding="true">

        <!-- Card内部的横向布局 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="16dp">

            <!-- 左侧ImageView -->
            <ImageView
                android:id="@+id/card_icon"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:src="@drawable/ic_default_avatar"
                android:scaleType="centerCrop"/>

            <!-- 右侧文本区域，用纵向LinearLayout排列 -->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:layout_marginStart="12dp">

                <!-- 用户输入的主文本 -->
                <TextView
                    android:id="@+id/tv_user_main_input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="16sp"
                    android:textStyle="bold"/>

                <!-- 用户输入的辅助文本 -->
                <TextView
                    android:id="@+id/tv_user_sub_input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:textColor="@android:color/darker_gray"
                    android:layout_marginTop="4dp"/>

                <!-- 固定提示文本 -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="13sp"
                    android:text="更新时间：2024-05-20"
                    android:textColor="@android:color/darker_gray"
                    android:layout_marginTop="8dp"/>
            </LinearLayout>
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</RelativeLayout>

2. 创建数据模型类 #

用来存储每个Card需要展示的用户输入内容和图片资源：

public class CardItem {
    // 用户输入的主内容
    private String userMainInput;
    // 用户输入的辅助内容
    private String userSubInput;
    // 图片资源ID
    private int imageResId;

    public CardItem(String userMainInput, String userSubInput, int imageResId) {
        this.userMainInput = userMainInput;
        this.userSubInput = userSubInput;
        this.imageResId = imageResId;
    }

    // Getter方法，供Adapter调用
    public String getUserMainInput() { return userMainInput; }
    public String getUserSubInput() { return userSubInput; }
    public int getImageResId() { return imageResId; }
}

3. 自定义RecyclerView Adapter #

因为是列表展示，用RecyclerView来承载CardView是最合理的选择，下面是Adapter的实现：

public class CustomCardAdapter extends RecyclerView.Adapter<CustomCardAdapter.CardViewHolder> {

    private List<CardItem> cardItemList;

    public CustomCardAdapter(List<CardItem> cardItemList) {
        this.cardItemList = cardItemList;
    }

    @NonNull
    @Override
    public CardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 加载自定义Card布局
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.your_card_layout_name, parent, false);
        return new CardViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull CardViewHolder holder, int position) {
        CardItem currentItem = cardItemList.get(position);
        // 绑定用户输入的文本到TextView
        holder.tvUserMainInput.setText(currentItem.getUserMainInput());
        holder.tvUserSubInput.setText(currentItem.getUserSubInput());
        // 设置ImageView的图片
        holder.cardIcon.setImageResource(currentItem.getImageResId());
    }

    @Override
    public int getItemCount() {
        return cardItemList.size();
    }

    // ViewHolder类，缓存Card内的控件
    public static class CardViewHolder extends RecyclerView.ViewHolder {
        TextView tvUserMainInput;
        TextView tvUserSubInput;
        ImageView cardIcon;

        public CardViewHolder(@NonNull View itemView) {
            super(itemView);
            tvUserMainInput = itemView.findViewById(R.id.tv_user_main_input);
            tvUserSubInput = itemView.findViewById(R.id.tv_user_sub_input);
            cardIcon = itemView.findViewById(R.id.card_icon);
        }
    }
}

4. 在Activity/Fragment中初始化列表 #

把用户之前输入的数据组装成CardItem列表，然后绑定到RecyclerView：

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private CustomCardAdapter adapter;
    private List<CardItem> cardItems = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 这里模拟从用户输入获取的数据，实际可以从EditText等控件读取
        String userInput1 = "我的第一个自定义Card";
        String userInput2 = "这是我通过输入框设置的描述内容";
        cardItems.add(new CardItem(userInput1, userInput2, R.drawable.icon1));
        cardItems.add(new CardItem("第二个Card", "另一组用户输入的内容", R.drawable.icon2));

        // 初始化RecyclerView
        recyclerView = findViewById(R.id.recycler_view);
        // 设置线性布局管理器
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        adapter = new CustomCardAdapter(cardItems);
        recyclerView.setAdapter(adapter);
    }

    // 后续如果用户新增输入，调用这个方法可以动态添加Card
    public void addNewCard(String mainInput, String subInput, int imageRes) {
        cardItems.add(new CardItem(mainInput, subInput, imageRes));
        // 通知Adapter刷新单个item，比notifyDataSetChanged更高效
        adapter.notifyItemInserted(cardItems.size() - 1);
    }
}

关键注意事项 #

• 确保你的项目已经引入CardView和RecyclerView依赖，在Module的build.gradle中添加：

implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.3.2'

• 如果需要给Card添加点击事件，可以在Adapter的onBindViewHolder中给itemView设置点击监听
• 布局可以根据需求调整，比如用ConstraintLayout替代LinearLayout，让元素排列更灵活

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