（译）CardView的使用

本文介绍了CardView的使用。

原文链接：Using the CardView

概述

Android 5.0引入了一个名为CardView的新组件基本上可以认为是带有圆角和基于高度的阴影的FrameLayout。注意CardView包含一个布局并且经常用在ListView或RecyclerView的item中。

CardView应该用在显示结构不一样的内容。对于相同的内容最好使用一个列表或网格（非卡片）因为卡片的边界会分散用户快速扫描一个列表。

使用CardView

让我们假设你的布局是这个样子：

<FrameLayout    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content">
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Main Content View -->
    <RelativeLayout>
        ...
    </RelativeLayout>
</FrameLayout>

使用这个布局创建一个卡片，首先需要在build.gradle文件中添加依赖：

dependencies {
    ...
    compile 'com.android.support:cardview-v7:25.2.1'
}

然后使用CardView替换FrameLayout。

<android.support.v7.widget.CardView    xmlns:card_view="http://schemas.android.com/apk/res-auto"    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content">
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Main Content View -->
    <RelativeLayout>
        ...
    </RelativeLayout>
</android.support.v7.widget.CardView>

这样就完成了！使用support library确保向后兼容；尽管运行在Android 5.0之前的版本对卡片的视觉处理有一点不同。更多细节请查看支持老平台平台部分。

自定义CardView

CardView有一个默认的高度和圆角角度因此对于不同平台卡片有一致的外观。然而，你可能选择自定义为你所期望的值。我们也可以设置卡片的背景颜色。

<android.support.v7.widget.CardView    xmlns:card_view="http://schemas.android.com/apk/res-auto"    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    card_view:cardBackgroundColor="#E6E6E6"    card_view:cardCornerRadius="8dp"    card_view:cardElevation="8dp">
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="#E6E6E6"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="8dp">

    <!-- Main Content View -->
    <RelativeLayout>
        ...
    </RelativeLayout>
</android.support.v7.widget.CardView>

注意card_view:cardElevation用于决定大小和阴影的柔和度就像现实中描述的深度。这些属性也可以通过程序设置：

CardView card = ...
card.setCardBackgroundColor(Color.parseColor("#E6E6E6"));
card.setMaxCardElevation(0.0);
card.setRadius(5.0);

额外的属性请查看CardView docs。

添加水波纹效果

默认情况下，CardView不可以轻击并且不会显示触摸反馈。触摸反馈动画当CardView被触摸时给用户提供视觉反馈。为了开启这个特性，在CardView添加如下属性。

<android.support.v7.widget.CardView  ...  android:clickable="true"  android:foreground="?android:attr/selectableItemBackground">
  ...
  android:clickable="true"
  android:foreground="?android:attr/selectableItemBackground">
  ...
</android.support.v7.widget.CardView>

在CardView上使用android:foreground="?android:attr/selectableItemBackground"属性从触摸点产生水波纹效果。

支持老版本平台

在Android 5.0之前的平台，CardView添加padding用于支持圆角，因为裁切圆角是很昂贵的操作。同样地，对于阴影，Android 5.0之前，CardView添加内容padding用于绘制阴影区域。这个内容padding基于elevation，并且按照文档：

这个padding值等于在边界 maxCardElevation + (1 - cos45) * cornerRadius ，在顶部和底部 maxCardElevation 1.5 + (1 - cos45) * cornerRadius 。

因此，如果你想指定内容的padding，你需要使用新的属性card_view:contentPadding。
同样地，对于改变CardView的背景颜色，你需要使用新的属性card_view:cardBackgroundColor。

References

• https://developer.android.com/reference/android/support/v7/widget/CardView.html
• http://www.google.com/design/spec/components/cards.html#cards-usage