Android CardView控件

原创已于 2023-03-26 12:10:06 修改 · 2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android #CardView

于 2018-10-18 17:53:06 首次发布

Android 笔记同时被 2 个专栏收录

196 篇文章

订阅专栏

Android Material Design

16 篇文章

订阅专栏

本文详细介绍了Android中CardView控件的使用方法，包括如何添加圆角阴影效果、设置圆角大小、阴影高度及内容内边距等属性，适用于Android 5.0及以上版本。

1. CardView类

CardView是5.0版本出现的控件，可以添加圆角阴影的效果。需要在配置中添加依赖

implementation 'com.android.support:cardview-v7'

主要属性

属性	说明
cardview_cardBackgroundColor	设置背景色
cardview_cardCornerRadius	设置圆角大小
cardview_cardElevation	设置z轴阴影
cardview_cardMaxElevation	设置z轴最大高度值
cardview_cardUseCompatPadding	是否使用CompatPadding
cardview_cardPreventCornerOverlap	是否使用PreventCornerOverlap,防止内容和边角的重
cardview_contentPadding	内容的padding

CardView继承FrameLayout类，不同版本实现不一致，可参考Android CardView源码分析

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

效果如下
在这里插入图片描述

2. 设置圆角cardCornerRadius

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

V5.0效果如下
在这里插入图片描述

V4.4效果如下
在这里插入图片描述

3. 设置阴影

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="20dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

V5.0效果如下
在这里插入图片描述

V4.4效果如下
在这里插入图片描述

4. 设置padding

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="20dp"
    app:contentPadding="10dp"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardMaxElevation="20dp"
    app:contentPadding="10dp"
    app:cardUseCompatPadding="true"
    android:layout_margin="10dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/card_bg" />
</android.support.v7.widget.CardView>