介绍

android5.0 发布了新的设计语言：Material Design。而卡片布局CardView是Material Design风格的其中一个控件。

卡片控件是一个详细信息的入口点，卡片控件可能包含有关单个主题的照片，文字和链接。 需要注意的是，单个卡片布局内放置同个主题的内容，不可滥用卡片布局。谷歌在Material Design的说明中，标记出什么情况才需要使用CardView。
Material Design Cards设计介绍

简单来说，CardView是一个具有圆角背景和阴影的FrameLayout。

使用

下面仿造一加社区的精彩活动页面，详细了解CardView的使用。该 demo 主要是在一个RecyclerView列表中，每个item都用CardView显示。

效果图：

cardview.png

1.gradle导入CardView包

compile 'com.android.support:appcompat-v7:25.1.1' //用于点击波纹(Ripple)效果
compile 'com.android.support:cardview-v7:25.1.1'
compile 'com.android.support:recyclerview-v7:25.1.1'

2.xml 方式新建一个 CardView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="#ffffff"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp"
    app:cardPreventCornerOverlap="false"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/iv_pic"
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/img1" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:layout_margin="4dp"
            android:text="周末加加油"
            android:textSize="16sp" />
    </LinearLayout>

</android.support.v7.widget.CardView>

xml	作用
app:cardCornerRadius="6dp"	卡片的圆角大小
app:contentPadding="20dp"	卡片布局与布局内容的距离
app:cardElevation="20dp"	阴影的深度
app:cardBackgroundColor="#ffffff"	卡片背景色
app:cardPreventCornerOverlap="false"	防止内容和边角重叠
app:cardUseCompatPadding="true"	是否适配边距(统一android 5.0前后的边距计算)
android:foreground="?android:attr/selectableItemBackground"	android 5.0后点击有波纹(Ripple)效果，5.0前会有点击变暗效果

代码

GitHub地址

推荐

Android CardView官网