このページは Cloud Translation API によって翻訳されました。

カードベースのレイアウトを作成する

アプリでは多くの場合、次のような同様のスタイルのコンテナにデータを表示する必要がある。リスト内のアイテムに関する情報を保持するコンテナ。このシステムは CardView API を使用して、プラットフォーム全体で統一されたデザインのカードに情報を表示する。対象たとえば、カードのデフォルトのエレベーションは、その中にあるビューグループの上にあります。その下にシャドウが描画されます。カードを使うと、グループにコンテナに一貫したスタイルを提供します。

カードに基づいたアプリの UI を垣間見ることができる画像 — **図 1.** カードに基づくアプリの UI。

依存関係を追加する

CardView ウィジェットは AndroidX の一部です。使用するにはアプリモジュールの build.gradle に次の依存関係を追加します。ファイル:

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

カードを作成する

CardView を使用するには、レイアウトファイルに追加します。これをビューグループとして使用して他のビューが含まれます。次の例では、CardView に ImageView といくつかの TextViews を追加して、一部の情報をユーザーに表示します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

上記のコードスニペットは、同じ Android ロゴ画像を使用します。

1 枚のカードを示す画像 — **図 2.** CardView ベースのレイアウトの基本的な例です。

この例のカードは、デフォルトの高度で画面に描画されます。その下に影が描画されます。カスタムの高度を指定できます card_view:cardElevation 属性を持つカードの場合。より高い金額のカードエレベーションはより顕著になり、エレベーションの低いカードには薄い影にします。CardView: Android で実際の高度と動的なシャドウを使用します 5.0（API レベル 21）以降。

CardView ウィジェットの外観をカスタマイズするには、次のプロパティを使用します。

レイアウトで角の丸みを設定するには、card_view:cardCornerRadius を使用します。属性です。
コードで角の丸みを設定するには、CardView.setRadius メソッドを使用します。
カードの背景色を設定するには、card_view:cardBackgroundColor 属性を使用します。