Android之CardView的使用

介绍

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

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

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

使用

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

效果图：

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官网