Xamarin.Android CardView

项目
03/01/2018

Cardview 小组件是一个 UI 组件，可在类似于卡片的视图中显式文本和图像内容。本指南介绍如何在 Xamarin.Android 应用程序中使用和自定义 CardView，同时与早期版本的 Android 保持向后兼容性。

概述

Android 5.0 (Lollipop) 中引入的 Cardview 小组件是一个 UI 组件，可在类似于卡片的视图中显示文本和图像内容。 CardView 实现为带圆角和阴影的 FrameLayout 小组件。通常，CardView 用于在 ListView 或 GridView 视图组中显示单个行项。例如，以下屏幕截图是一个旅行预订应用示例，在可滚动的 ListView 中实现基于 CardView 的旅行目的地卡：

对每个旅行目的地使用 CardView 的示例应用

本指南介绍如何在应用中将 CardView 包添加到 Xamarin.Android 项目、如何将 CardView 添加到布局以及如何自定义 CardView 的外观。此外，本指南提供了可以更改的 CardView 属性的详细列表，包括有助于在 Android 5.0 Lollipop 之前的 Android 版本上使用 CardView 的属性。

要求

在基于 Xamarin 的应用中使用新的 Android 5.0 及更高版本功能（包括 CardView）需要以下条件：

Xamarin.Android - 必须安装 Xamarin.Android 4.20 或更高版本并配置 Visual Studio 或 Visual Studio for Mac。
Android SDK - 必须通过 Android SDK 管理器安装 Android 5.0 (API 21) 或更高版本。
Java JDK 1.8 – 如果你专门面向 API 级别 23 及更早版本，可以使用 JDK 1.7。 JDK 1.8 可从 Oracle 获取。

应用还必须包含该 Xamarin.Android.Support.v7.CardView 包。若要在 Visual Studio for Mac 中添加 Xamarin.Android.Support.v7.CardView 包，请执行以下操作：

打开项目，右键单击“包”，然后选择“添加包”。
在“添加包”对话框中，搜索“CardView”。
选择“Xamarin 支持库 v7 CardView”，然后单击“添加包”。

若要在 Visual Studio 中添加 Xamarin.Android.Support.v7.CardView 包，请执行以下操作：

打开项目，（在“解决方案资源管理器”窗格中）右键单击“引用”节点，然后选择“管理 NuGet 包...”。
显示“管理 NuGet 包”对话框时，在搜索框中输入“CardView”。
出现“Xamarin 支持库 v7 CardView”时，单击“安装”。

若要了解如何配置 Android 5.0 应用项目，请参阅设置 Android 5.0 项目。有关安装 NuGet 包的详细信息，请参阅演练：在项目中包括 NuGet。

CardView 简介

默认 CardView 类似于一张白色卡片，带轻微的阴影，且边角为非常细微的圆角。以下示例 Main.axml 布局显示包含 TextView 的单个 CardView 小组件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal">
        <TextView
            android:text="Basic CardView"
            android:layout_marginTop="0dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </android.support.v7.widget.CardView>
</LinearLayout>

如果使用此 XML 替换 Main.axml 的现有内容，请务必注释掉 MainActivity.cs 中引用上一 XML 中的资源的任何代码。

此布局示例使用单行文本创建默认的 CardView，如以下屏幕截图所示：

在此示例中，应用样式设置为浅色材料主题 (Theme.Material.Light)，以便 CardView 阴影和边缘更易于查看。有关确定 Android 5.0 应用主题的详细信息，请参阅材料主题。在下一节，我们将了解如何为应用程序自定义 CardView。

自定义 CardView

可以修改基本 CardView 属性以自定义应用中 CardView 的外观。例如，可以增加 CardView 的高程以投射更大的阴影（这使得卡片似乎漂浮在背景上方）。此外，可以增加圆角半径，使卡片的角更圆。

在下一个布局示例中，自定义的 CardView 用于创建打印照片的模拟（“快照”）。 ImageView 添加到 CardView 用于显示图像，TextView 放在 ImageView 下，用于显示图像标题。在此示例布局中，CardView 采用以下自定义：

cardElevation 增加到 4dp，以投出更大的阴影。
cardCornerRadius 增加到 5dp，使边角看起来更圆。

由于 Android v7 支持库提供了 CardView，因此 android: 命名空间中未提供其属性。因此，必须定义自己的 XML 命名空间，并将该命名空间用作 CardView 属性前缀。在下面的布局示例中，我们将使用此行来定义一个名为 cardview 的命名空间：

    xmlns:cardview="http://schemas.android.com/apk/res-auto"

你可以调用此命名空间 card_view，如果选择，甚至还可以调用 myapp（它只能在此文件的范围内访问）。无论是否选择调用此命名空间，都必须使用它来为要修改的 CardView 属性添加前缀。在此布局示例中，cardview 命名空间是 cardElevation 和 cardCornerRadius 的前缀：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal"
        cardview:cardElevation="4dp"
        cardview:cardCornerRadius="5dp">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="240dp"
            android:orientation="vertical"
            android:padding="8dp">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="190dp"
                android:id="@+id/imageView"
                android:scaleType="centerCrop" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#333333"
                android:text="Photo Title"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="5dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

当此布局示例用于在照片查看应用中显示图像时，CardView 具有照片快照的外观，如以下屏幕截图所示：

请注意，CardView 可以在其内容区域中显示多个子视图。例如，在上面的照片查看应用示例中，内容区域由包含 ImageView 和 TextView 的 ListView 组成。虽然 CardView 实例通常垂直排列，但也可以将其水平排列（请参阅创建自定义视图样式以获取示例屏幕截图）。

CardView 布局选项

CardView 布局可以通过设置一个或多个影响其填充、高程、圆角半径和背景色的属性来自定义：

还可以通过调用对应 CardView 方法来动态更改每个属性（有关 CardView 方法的详细信息，请参阅 CardView 类引用）。请注意，这些属性（背景色除外）都接受一个尺寸值，该值是一个十进制数，后跟单位。例如，11.5dp 指定 11.5 个与密度无关的像素。

填充

CardView 提供五个填充属性来定位卡片中的内容。可以在布局 XML 中设置它们，也可以在代码中调用类似方法：

填充属性如下所述：

contentPadding – CardView 的子视图与卡片的所有边缘之间的内部填充。
contentPaddingBottom – CardView 的子视图与卡片的底部边缘之间的内部填充。
contentPaddingLeft – CardView 的子视图与卡片的左侧边缘之间的内部填充。
contentPaddingRight – CardView 的子视图与卡片的右侧边缘之间的内部填充。
contentPaddingTop – CardView 的子视图与卡片的顶部边缘之间的内部填充。

内容填充属性相对于内容区域的边界，而不是内容区域中任何给定小组件。例如，如果 contentPadding 在照片查看应用中已充分增加，则 CardView 会裁剪图像和卡片上显示的文本。

Elevation

CardView 提供两个高程属性来控制高程，因此其阴影的大小如下：

高程属性如下所述：

cardElevation – CardView 的高程（代表其 Z 轴）。
cardMaxElevation – CardView 高程的最大值。

cardElevation 的值越大，阴影大小就越大，从而使 CardView 看起来更高地悬浮于背景之上。 cardElevation 属性还确定重叠视图的绘制顺序；也就是说， CardView 将绘制在具有较高高程设置的另一个重叠视图下，在具有较低高程设置的任何重叠视图上。当应用动态更改高程时，cardMaxElevation 设置非常有用 - 它会阻止阴影超出你使用此设置定义的限制。

圆角半径和背景色

CardView 提供可用于控制其圆角半径和背景色的属性。这两个属性允许更改 CardView 的整体样式：

这些属性如下所述：

cardCornerRadius – CardView 的所有角的圆角半径。
cardBackgroundColor – CardView 的背景色。

在此示意图中，cardCornerRadius 设置为更圆的 10dp，而 cardBackgroundColor 设置为 "#FFFFCC"（浅黄色）。

兼容性

可以在低于 Android 5.0 Lollipop 的 Android 版本上使用 CardView。由于 CardView 是 Android v7 支持库的一部分，因此可将 CardView 与 Android 2.1（API 级别 7）及更高版本一起使用。但是，必须按照上述要求安装 Xamarin.Android.Support.v7.CardView 包。

CardView 在操作系统版本低于 Lollipop（API 级别 21）的设备上表现出略有不同的行为：

CardView 使用可添加其他填充的编程阴影实现。
CardView 不会剪裁与 CardView 的圆角相交的子视图。

为了帮助管理这些兼容性差异，CardView 提供了可在布局中配置的其他几个属性：

cardPreventCornerOverlap – 将此属性设置为 true，以便在早期 Android 版本（API 级别 20 及更早版本）上运行应用时添加填充。此设置可防止 CardView 内容与 CardView 的圆角相交。
cardUseCompatPadding – 将此属性设置为 true，以便在大于或等于 API 级别 21 的 Android 版本上运行应用时添加填充。如果要在 Lollipop 之前的设备上使用 CardView，并让它在 Lollipop（或更高版本）上看起来一样，请将此属性设置为 true。启用此属性后，CardView 在 Lollipop 之前的设备上运行时，会添加额外的填充来绘制阴影。这有助于克服在 Lollipop 之前的编程阴影实现生效时引入填充差异。

有关维护与早期版本的 Android 的兼容性的详细信息，请参阅维护兼容性。

总结

本指南介绍了 Android 5.0 (Lollipop) 中包含的新 CardView 小组件。它演示了默认的 CardView 外观，并说明了如何通过更改其高程、边角圆度、内容填充和背景色来自定义 CardView。它列出了 CardView 布局属性（带有参考关系图），并说明了如何在低于 Android 5.0 Lollipop 的 Android 设备上使用 CardView。有关 CardView 的详细信息，请参阅 CardView 类引用。

通过