コンテナとしてカードを作成する

Card コンポーザブルは UI のマテリアル デザイン コンテナとして機能します。カードは、次のような単一の一貫したコンテンツを示します。

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

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

このトピックでは、次の 4 種類のカードを実装する方法について説明します。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

基本的なカードを作成する

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

塗りつぶしカードを作成する

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

結果

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

エレベートされたカードを作成する

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

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

結果

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

枠線付きカードを作成する

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

結果

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

要点

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

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

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

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

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。

ご質問やご意見がある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。