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

Compose を試す
Jetpack Compose は Android で推奨される UI ツールキットです。Compose でレイアウトを操作する方法を学習します。

アプリでは多くの場合、リスト内のアイテムに関する情報を保持するコンテナなど、同様のスタイルのコンテナにデータを表示する必要があります。プラットフォーム全体で一貫したデザインのカードに情報を表示するための 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 を使用するには、レイアウト ファイルに追加します。他のビューを含めるにはビューグループとして使用します。次の例では、CardViewImageView といくつかの 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 属性を使用します。