Card
コンポーザブルは UI のマテリアル デザイン コンテナとして機能します。カードは、次のような単一の一貫したコンテンツを示します。
- ショッピング アプリの商品
- ニュースアプリのニュース記事
- コミュニケーション アプリのメッセージ
単一のコンテンツを表示することに焦点を当て、別のコンテナの Card
と区別します。たとえば、Scaffold
は画面全体の一般的な構造を提供します。カードは大きなレイアウトの中の小さな UI 要素である一方、Column
や Row
などのレイアウト コンポーネントはよりシンプルでより汎用的な API となります。
このトピックでは、次の 4 種類のカードを実装する方法について説明します。
バージョンの互換性
この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。
依存関係
基本的なカードを作成する
Card
は Compose の他のコンテナとほぼ同様に動作します。その中の他のコンポーザブルを呼び出して、コンテンツを宣言します。例として、次の簡単な例を使って、Card
がどのように Text
の呼び出しを含むかをご確認ください。
塗りつぶしカードを作成する
ポイントは colors
プロパティを使用して、塗りつぶしの色を変更することです。
結果
![マテリアル テーマのサーフェス バリアント カラーで塗りつぶされたカード。](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?hl=ja)
エレベートされたカードを作成する
以下のスニペットは立体カードを実装する方法を示しています。専用の ElevatedCard
コンポーザブルを使用します。
elevation
プロパティを使って浮き上がりのデザインとその結果表示される影をコントロールできます。
結果
![影が描かれアプリの背景から浮き上がって見えるカード。](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?hl=ja)
枠線付きカードを作成する
以下に枠線付きカードの例を示します。専用の OutlinedCard
コンポーザブルを使用します。
結果
![細い黒の枠線で囲まれたカード。](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?hl=ja)
要点
Card
の API 定義に関するリファレンスをご覧ください。コンポーネントのデザインと動作をカスタマイズできるいくつかのパラメータが定義されています。
主なパラメータには次のものがあります。
elevation
: コンポーネントに影を加えて、背景から浮き上がって見えるようにします。colors
:CardColors
タイプを使用して、コンテナと子の両方のデフォルトの色を設定します。enabled
: このパラメータでfalse
を渡すと、カードは無効のように見え、ユーザー入力に反応しません。onClick
: 通常Card
はクリック イベントに対応していません。そのため、覚えておく基本のオーバーロードはonClick
パラメータを定義するオーバーロードです。Card
の実装でユーザーからのクリックに対応するには、このオーバーロードを使用します。
カードにはスクロール アクションと閉じるアクションが備わっていませんが、このような機能を提供するコンポーザブルに統合できます。たとえば、スワイプを実装してカードを閉じるには、SwipeToDismiss
コンポーザブルと統合します。スクロールを統合するには、verticalScroll
などのスクロール修飾子を使用します。詳細については、Scroll
のドキュメントをご覧ください。
このガイドを含むコレクション
このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=ja)