カード

Card コンポーザブルは UI のマテリアル デザイン コンテナとして機能します。カードは通常単一の一貫したコンテンツを示します。カードを使用する例を以下に示します。

  • ショッピング アプリの商品
  • ニュースアプリのニュース記事
  • コミュニケーション アプリのメッセージ

単一のコンテンツを表示することに焦点を当て、別のコンテナの Card と区別します。たとえば、Scaffold は画面全体の一般的な構造を提供します。カードは通常大きなレイアウトの中の小さな UI 要素である一方、Column や Row などのレイアウト コンポーネントはよりシンプルでより汎用的な API となります。

テキストとアイコンが入力された、浮き上がって見えるカード
図 1.テキストとアイコンが入力されたカードの例

基本的な実装

Card は Compose の他のコンテナとほぼ同様に動作します。その中の他のコンポーザブルを呼び出して、コンテンツを宣言します。例として、次の簡単な例を使って、Card がどのように Text の呼び出しを含むかをご確認ください。

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

高度な実装

Card の API 定義に関するリファレンスをご覧ください。コンポーネントのデザインと動作をカスタマイズできるいくつかのパラメータが定義されています。

主なパラメータには次のものがあります。

  • elevation: コンポーネントに影を加えて、背景から浮き上がって見えるようにします。
  • colors: CardColors タイプを使用して、コンテナと子の両方のデフォルトの色を設定します。
  • enabled: このパラメータで false を渡すと、カードは無効のように見え、ユーザー入力に反応しません。
  • onClick: 通常 Card はクリック イベントに対応していません。そのため、覚えておく基本のオーバーロードは onClick パラメータを定義するオーバーロードです。Card の実装でユーザーからの押下に対応するには、このオーバーロードを使用する必要があります。

次の例はこのようなパラメータに加え、shape や modifier などの他の一般的なパラメータを使う方法を示しています。

塗りつぶしカード

以下に塗りつぶしカードを実装する方法の例を示します。

ポイントは colors プロパティを使用して、塗りつぶしの色を変更することです。

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

これを実装すると次のようになります。

マテリアル テーマのサーフェス バリアント カラーで塗りつぶされたカード。
図 2.塗りつぶしカードの例

立体カード

以下のスニペットは立体カードを実装する方法を示しています。専用の ElevatedCard コンポーザブルを使用します。

elevation プロパティを使って浮き上がりのデザインとその結果表示される影をコントロールできます。

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

これを実装すると次のようになります。

影が描かれアプリの背景から浮き上がって見えるカード。
図 3.立体カードの例

枠線付きカード

以下に枠線付きカードの例を示します。専用の OutlinedCard コンポーザブルを使用します。

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

これを実装すると次のようになります。

細い黒の枠線で囲まれたカード。
図 4.枠線付きカードの例

制限事項

カードにはスクロール アクションと閉じるアクションが備わっていませんが、このような機能を提供するコンポーザブルに統合できます。たとえば、スワイプを実装してカードを閉じるには、SwipeToDismiss コンポーザブルと統合します。スクロールを統合するには、verticalScroll などのスクロール修飾子を使用します。詳しくはスクロールのドキュメントをご覧ください。

参考情報