如何在 Android 中创建可扩展的 CardView

CardView 是 Android Design Support Library 中的组件之一，它能够帮助我们快速实现类似于卡片的 UI 组件。本文将介绍如何在 Android 中创建可扩展的 CardView。

步骤一：导入 Design Support Library

首先，我们需要在 build.gradle 文件中导入 Design Support Library：

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

步骤二：创建 CardView

我们可以在 XML 中创建 CardView：

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardUseCompatPadding="true"
    app:cardElevation="8dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="16dp">

    <!-- Card content here -->

</android.support.v7.widget.CardView>

在上述代码中，我们使用了 CardView 的属性来定制它的圆角半径、阴影、内边距等内容。Card content 区域是我们要在 CardView 中显示的任何内容。

步骤三：添加可扩展功能

为了使 CardView 可以扩展，我们需要在 CardView 的内部添加一个 LinearLayout，并为其指定一个 ID：

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardUseCompatPadding="true"
    app:cardElevation="8dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="16dp">

    <LinearLayout
        android:id="@+id/collapse_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Card content here -->

    </LinearLayout>

</android.support.v7.widget.CardView>

接下来，我们需要添加一个 Chevon 按钮，以便通过单击它来展开 CardView。我们可以使用 Android 向量图来绘制 Chevron：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="@android:color/darker_gray">

    <path
        android:fillColor="@android:color/darker_gray"
        android:pathData="M2.1,12L12,21.9L21.9,12"
        android:strokeWidth="2"
        android:strokeColor="@android:color/darker_gray"/>

</vector>

然后，我们需要将此图标设置为 ImageView，并将其添加到 CardView 中：

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardUseCompatPadding="true"
    app:cardElevation="8dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="16dp">

    <LinearLayout
        android:id="@+id/collapse_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Card content here -->

    </LinearLayout>

    <ImageView
        android:id="@+id/expand_button"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="end"
        android:src="@drawable/chevron"/>

</android.support.v7.widget.CardView>

最后，我们需要在 Activity 或 Fragment 的代码中添加以下逻辑，以便在单击 Chevron 按钮时切换 CardView 的可见性：

val cardView = findViewById<CardView>(R.id.card_view)
val collapseLayout = findViewById<LinearLayout>(R.id.collapse_layout)
val expandButton = findViewById<ImageView>(R.id.expand_button)

expandButton.setOnClickListener {
    if (collapseLayout.visibility == View.GONE) {
        TransitionManager.beginDelayedTransition(cardView)
        collapseLayout.visibility = View.VISIBLE
        expandButton.setImageResource(R.drawable.ic_chevron_up)
    } else {
        TransitionManager.beginDelayedTransition(cardView)
        collapseLayout.visibility = View.GONE
        expandButton.setImageResource(R.drawable.ic_chevron_down)
    }
}

结论

至此，我们便成功地创建了一个可扩展的 CardView。在 Android 中使用 CardView 非常简单，并且可以用于多种情况下的 UI 设计。如需了解更多关于 CardView 的内容，请访问 Android Developer 官网。