一 、概述

CardView的继承关系.png

使用CardView需要单独引入cardview的support包，具体引入方式：

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

一般布局中会将CardView当做父布局，里面包裹若干个ViewGroup的方式来使用，具体的请看下面的xml布局；

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.CardViewActivity">



    <android.support.v7.widget.CardView
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="200dp"
                android:src="@drawable/bg01_02"
                android:layout_height="200dp" />

            <TextView
                android:layout_width="match_parent"
                android:text="@string/app_name"
                android:textColor="#fff"
                android:textSize="24sp"
                android:padding="10dp"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        app:cardBackgroundColor="@color/colorPrimary"
        app:cardElevation="5dp"
        app:cardCornerRadius="10dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:text="Card"
            android:textColor="#fff"
            android:gravity="center"
            android:textSize="24sp"
            android:layout_height="100dp" />
    </android.support.v7.widget.CardView>
</android.support.design.widget.CoordinatorLayout>

效果如下：

效果图.png

二 、CardView常用的扩展属性

• 1. app:cardBackgroundColor 设置CardView的背景色；
• 2.app:cardCornerRadius 设置CardView的圆角角度；
• 3.app:cardElevation 设置CardView的阴影 ；
• 4.app:cardPreventCornerOverlap 防止CardView的内容和圆角相互交错；
  上面这几个属性也可以在代码中设置，如下：

        mCardView = (CardView) findViewById(R.id.cardview);
        //设置CradView背景
        mCardView.setCardBackgroundColor(ColorStateList.valueOf(getResources().getColor(android.R.color.holo_orange_dark)));
        //设置CardView的阴影
        mCardView.setCardElevation(3);
        //设置圆角
        mCardView.setRadius(10);
        //设置兼容padding
        mCardView.setUseCompatPadding(true);
        mCardView.setPreventCornerOverlap(true);

三、设置CardView的点击效果

在xml中直接设置:

<--在Cardview布局中使用下面两个属性-->
android:clickable="true"
android:foreground="?attr/selectableItemBackground"

这个foreground系统提供了多个样式，常用的就两个；

• 1.selectableItemBackgroundBorderless 以点击点为中心进行整体扩散，扩散波纹覆盖整个布局；
• 2. selectableItemBackground 以点击中心进行扩散，默认有最大扩散半径；

github仓库

相关内容：

一、CoordinatorLayout的梳理与使用

二、Toolbar的梳理与使用

三、TextInputLayout的梳理与使用

四、FloatingActionButton的梳理与使用

五、Snackbar的梳理与使用

六、CardView的梳理与使用

七、BottomSheetDialog的梳理与使用

八、TabLayout的梳理与使用