【译】Android材质组件的动手实践：Cards

本文为 Nick Rout 发布于 Medium 的文章译文（Google 翻译）
原文链接为 Hands-on with Material Components for Android: Cards
本文仅作为个人学习记录所用。如有涉及侵权，请相关人士尽快联系译文作者。

Android MDC 系列文章：

这篇文章将介绍 Cards 组件的功能和API。要了解如何处理Android的Material Components的初始设置（包括Gradle依赖关系和创建应用程序主题），请参阅我的原始文章：

为Android设置Material Components主题

卡片是表面材料，包含与单个主题相关的内容和动作。此内容可能包括文本，图像，链接等，并且大小可能有所不同。尽管在内容布局方面有许多模式和变化形式，但是唯一需要的元素是卡片容器。

Card

基本用法🏁

MaterialCardView 可以在您的布局中添加，如下所示：

< FrameLayout 
  ... > 

  < com.google.android.material.card.MaterialCardView 
    android：id =“ @ + id / card” 
    android：layout_width =“ match_parent” 
    android：layout_height =“ wrap_content” > 
    <!-- Card Content --> 
  </ com.google.android.material.card.MaterialCardView>
 </ FrameLayout >

检查☑️

MaterialCardView可以检查A 以指示选择。没有启用/禁用选中状态的默认行为。例如，这可以响应长按来完成。

首先，需要启用可检查行为：

< com.google.android.material.card.MaterialCardView 
  ... 
  android：clickable =“ true” 
  android：focusable =“ true” 
  android：checkable =“ true” >

然后，我们可以切换选中状态（以下示例是对长按的响应）：

card.setOnLongClickListener {
    card.isChecked = !card.isChecked
    true
}

用户界面的更改包括叠加层颜色和选中的图标：

Material Card View 选中状态

可以使用checkedIcon属性更改选中的图标。各种颜色选项将在下面的“主题”部分中讨论。

有关使用RecyclerView选择的高级检查示例，请参见《Android的材料组件》目录。

拖动并滑动以消除☝️

MaterialCardView内置支持特定于拖动的状态更改。与检查一样，不存在默认行为来实现拖动本身。推荐的方法是使用，ViewDragHelper并且Android的材料组件目录包含一个方便的实现类；DraggableCoordinatorLayout。

注意：如果将其*DraggableCoordinatorLayout*包含在Android的核心Material Components库中，则无需复制类就可以使用它。在撰写本文时，适用于Android的材料组件的最新版本已经发布，*1.2.0-alpha05*事实并非如此。您可以在问题跟踪器上为此功能 加注星标。

首先，我们需要将父容器更改为DraggableCoordinatorLayout：

< io.material.catalog.draggable.DraggableCoordinatorLayout 
  android：id =“ @ + id / parentContainer” 
  ... > 

  < com.google.android.material.card.MaterialCardView 
    ... > 
    <!-- Card Content --> 
</ com.google.android.material.card.MaterialCardView>
</ io.material.catalog.draggable.DraggableCoordinatorLayout >

然后，我们可以添加回调并切换拖动状态：

parentContainer.addDraggableChild(card)
parentContainer.setViewDragListener(object
    : DraggableCoordinatorLayout.ViewDragListener {

    override fun onViewCaptured(view: View, pointerId: Int) {
        card.isDragged = true
    }

    override fun onViewReleased(view: View, vX: Float, vY: Float) {
        card.isDragged = false
    }
})

UI更改包括叠加颜色和（动画）增加的高程：

处于拖动状态的MaterialCardView

有关使用RecyclerView拖放的高级拖动示例，请参见Android的材料组件目录。

有关使用的高级滑动擦除示例SwipeDismissBehavior，请参见Android的材料组件目录。

主题🎨

可以根据三个“材质主题”子系统对卡片进行主题设置：颜色，版式和形状。实施全局卡片样式时，请扩展Widget.MaterialComponents.CardView样式并在您的应用程序主题中使用materialCardViewStyle属性进行引用。

颜色

可以使用该cardBackgroundColor属性自定义卡片背景的颜色。默认为colorSurface。

如上所述，卡的前景色用于指示选中和拖动状态。因此，这需要一个ColorStateList，表示需要<selector>用于已检查/已拖拽状态。它通常是透明的，但使用颜色表示检查/拖动，默认为colorPrimary（选中）/ colorOnSurface（拖动），每个状态的不透明度不同。

可以使用该checkedIconTint属性自定义选中图标的色调颜色。默认为colorPrimary。

可以使用该strokeColor属性自定义可选纸牌笔触的颜色。默认情况下禁用。

最后，可以使用rippleColor属性来自定义卡片触摸波纹的颜色。它也接受a ColorStateList并默认为colorOnSurface（unchecked）/ colorPrimary（checked），每个状态的不透明性不同。

颜色主题

版式

没有主要文字作为卡组件的一部分。卡片内容中包含的文本将根据使用的类/组件以及fontFamily应用程序主题属性设置样式。

字体样式主题

形状

可以使用该shapeAppearance属性自定义卡片背景的形状。默认为shapeAppearanceMediumComponent。

可以使用该cardElevation属性自定义卡的海拔。默认为1dp。

有趣的是，卡当前形状外观的边角大小可以在0.0到1.0之间进行插值。这在动画和过渡中很有用。为此使用MaterialCardView#setProgress和MaterialCardView#getProgress。

尽管不是严格地确定主题形状，但是值得一提的是，可以使用该strokeWidth属性来调整可选纸牌笔触的宽度。默认值为0dp（如果strokeColor设置为no ，则无论宽度如何都不会渲染）。

形状主题

更多资源📚

希望本文能对Cards及其在Android应用中的使用方式有所帮助。如果您有任何疑问，想法或建议，那么我很乐意收到您的来信！

在Twitter上找到我@ricknout

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容