Android卡片组件(CardView)

最新推荐文章于 2025-06-20 09:47:58 发布

边城月

最新推荐文章于 2025-06-20 09:47:58 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： android 文章标签： android CardView RecyclerView

本文链接：https://blog.youkuaiyun.com/qq_28057577/article/details/53898757

本文详细介绍了Android中的CardView组件，包括其概述、常用的布局属性和方法。重点讲解了如何将CardView结合RecyclerView实现动态展示数据，通过分析4.1的效果截图、4.2的item布局文件、4.3的RecyclerView适配器、4.4的数据对象类以及4.6的主活动类的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CardView概述

CardView是google Material Desgin推出的一款卡片式view，与FrametLayout类似，只是其中多了一些属性，比如：控件圆角和阴影效果等，同时他也可以作为父布局，包裹其他的组件。

2.CardView常用的布局属性

   
   
    
    
     
      
    
    
    
    
     
             app:cardPreventCornerOverlap="true"//防止cardview内部内容与边角重叠
    
    
    
    
     
             app:cardElevation="10dp"//阴影
    
    
    
    
     
             app:cardBackgroundColor="@color/colorAccent"//背景颜色
    
    
    
    
     
             app:cardCornerRadius="10dp"//圆角
    
    
    
    
     
             app:contentPadding="4dp"//内容内边距
    
    
    
    
     
             android:clickable="true"//开启点击效果
    
    
    
    
     
             android:foreground="?android:attr/selectableItemBackground"//设置水波纹点击效果

3.CardView常用的方法

    
    
     
     
      
                  //设置最大的阴影
     
     
     
     
      
                  cardView.getMaxCardElevation();
     
     
     
     
      
                  //设置阴影
     
     
     
     
      
                  cardView.setCardElevation(10);
     
     
     
     
      
                  //设置圆角
     
     
     
     
      
                  cardView.setRadius(8);
     
     
     
     
      
                  //设置背景颜色
     
     
     
     
      
                  cardView.setCardBackgroundColor(R.color.colorBtn);
     
     
     
     
      
                  //设置内容与cardview的内边距
     
     
     
     
      
                  cardView.setContentPadding(4,4,4,4);
     
     
     
     
      
                  //设置防止内容与边角重叠
     
     
     
     
      
                  cardView.setPreventCornerOverlap(true);
     
     
     
     
      
                  //是否使用CompatPadding
     
     
     
     
      
                  cardView.setUseCompatPadding(false);

4.CardView结合RecyclerView的例子

4.1效果截图

4.2 单个item布局文件：cardview_item.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:orientation="vertical"
    
    
    
    
     
         android:padding="20dp"
    
    
    
    
     
         android:layout_width="match_parent"
    
    
    
    
     
         android:layout_height="match_parent">
    
    
    
    
     
      
    
    
    
    
     
         <android.support.v7.widget.CardView
    
    
    
    
     
             android:id="@+id/card_item"
    
    
    
    
     
             app:cardCornerRadius="10dp"
    
    
    
    
     
             android:clickable="true"
    
    
    
    
     
             android:foreground="?android:attr/selectableItemBackground"
    
    
    
    
     
             app:cardElevation="10dp"
    
    
    
    
     
             app:contentPaddingRight="2dp"
    
    
    
    
     
             app:contentPaddingBottom="5dp"
    
    
    
    
     
             app:contentPaddingLeft="2dp"
    
    
    
    
     
             app:contentPaddingTop="5dp"
    
    
    
    
     
             app:cardPreventCornerOverlap="true"
    
    
    
    
     
             android:layout_height="wrap_content"
    
    
    
    
     
             android:layout_width="match_parent"
    
    
    
    
     
         >
    
    
    
    
     
             <RelativeLayout
    
    
    
    
     
                 android:layout_width="match_parent"
    
    
    
    
     
                 android:layout_height="wrap_content">
    
    
    
    
     
                 <RelativeLayout
    
    
    
    
     
                     android:id="@+id/image_layout"
    
    
    
    
     
                     android:layout_width="match_parent"
    
    
    
    
     
                     android:layout_height="wrap_content">
    
    
    
    
     
                     <ImageView
    
    
    
    
     
                         android:id="@+id/card_image"
    
    
    
    
     
                         android:src="@drawable/card7"
    
    
    
    
     
      
    
    
    
    
     
                         android:scaleType="centerCrop"
    
    
    
    
     
                         android:layout_width="match_parent"
    
    
    
    
     
                         android:layout_height="300dp" />
    
    
    
    
     
                     <TextView
    
    
    
    
     
                         android:layout_below="@+id/card_image"
    
    
    
    
     
                         android:id="@+id/card_desc"
    
    
    
    
     
                         android:textSize