Card
コンポーザブルは UI のマテリアル デザイン コンテナとして機能します。カードは通常単一の一貫したコンテンツを示します。カードを使用する例を以下に示します。
- ショッピング アプリの商品
- ニュースアプリのニュース記事
- コミュニケーション アプリのメッセージ
単一のコンテンツを表示することに焦点を当て、別のコンテナの Card
と区別します。たとえば、Scaffold
は画面全体の一般的な構造を提供します。カードは通常大きなレイアウトの中の小さな UI 要素である一方、Column
や Row
などのレイアウト コンポーネントはよりシンプルでより汎用的な API となります。
基本的な実装
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, ) } }
これを実装すると次のようになります。
![マテリアル テーマのサーフェス バリアント カラーで塗りつぶされたカード。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-filled.png?authuser=0000&hl=ja)
立体カード
以下のスニペットは立体カードを実装する方法を示しています。専用の 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, ) } }
これを実装すると次のようになります。
![影が描かれアプリの背景から浮き上がって見えるカード。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-elevated.png?authuser=0000&hl=ja)
枠線付きカード
以下に枠線付きカードの例を示します。専用の 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, ) } }
これを実装すると次のようになります。
![細い黒の枠線で囲まれたカード。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-outlined.png?authuser=0000&hl=ja)
制限事項
カードにはスクロール アクションと閉じるアクションが備わっていませんが、このような機能を提供するコンポーザブルに統合できます。たとえば、スワイプを実装してカードを閉じるには、SwipeToDismiss
コンポーザブルと統合します。スクロールを統合するには、verticalScroll
などのスクロール修飾子を使用します。詳しくはスクロールのドキュメントをご覧ください。