Android 深度实践

Appearance

卡片 (Cards) ​

源：Cards

卡片包含关于单个主题的内容和操作。M3 提供了三种变体。

卡片类型

  1. Elevated (悬浮型)
  2. Filled (填充型)
  3. Outlined (轮廓型)

核心属性 ​

容器属性 ​

元素属性默认值
背景颜色app:cardBackgroundColor取决于样式 (Surface/Container)
边框颜色app:strokeColor?attr/colorOutline
边框宽度app:strokeWidth1dp (仅轮廓型)
圆角形状app:shapeAppearance?attr/shapeAppearanceCornerMedium

选中状态属性 ​

元素属性默认值
选中图标app:checkedIcon@drawable/ic_mtrl_checked_circle
图标大小app:checkedIconSize24dp
是否可选中android:checkablefalse

代码实现 ​

基础用法 (轮廓型) ​

xml
<com.google.android.material.card.MaterialCardView
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?attr/materialCardViewOutlinedStyle"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- 图片内容 -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="194dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/media_placeholder" />

        <!-- 文本内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">
            <TextView
                android:text="标题"
                android:textAppearance="?attr/textAppearanceTitleMedium" />
            <TextView
                android:text="辅助说明文本"
                android:textAppearance="?attr/textAppearanceBodyMedium" />
        </LinearLayout>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>
kotlin
card.setOnClickListener {
    // 响应点击
}

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

交互行为 ​

1. 可选中 (Checkable) ​

当 android:checkable="true" 时，卡片在选中状态下会显示勾选图标并改变前景覆盖色。

2. 可拖拽 (Draggable) ​

卡片具有 app:state_dragged 状态，可以通过改变海拔和阴影来传达运动感。建议配合 ViewDragHelper 使用。

主题化 ​

xml
<style name="Widget.App.CardView" parent="Widget.Material3.CardView.Elevated">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Card</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Corner.Medium</item>
</style>