カード

Card コンポーネントには、1 つのテーマに関するコンテンツとアクションが含まれています。

構造

カード コンポーネントにはスロットが 1 つしかありません。カードにはアイコン、画像、ラベルを入れることができ、カスタマイズできます。

デフォルトでは、カードは長方形で角が丸く、背景がグラデーションになっています。円形ディスプレイでは、画面の上部および下部が最大で 20% 切り取られるため、カードの最大の高さを 60% にしてカードが画面に完全に表示されるようにします。

タイトルカード

タイトルカードは、アプリ内の情報（メッセージなど）を表示するために使用します。タイトルカードは、タイトル、オプションの時間フィールド、関連コンテンツ（画像またはテキスト）を含む 3 スロット レイアウトです。

アプリカード

アプリカードは、複数のアプリのインタラクティブな要素を表示するために使用します。アプリカードは、アプリアイコン、アプリ名、アクティビティが発生した時刻、なんらかのタイトル、関連コンテンツ（画像またはテキスト）を含む 5 スロット レイアウトです。

デザインに関する推奨事項

画像カード

画像カードは、1 つのトピックに関連するコンテンツを背景画像とともに表示します。画像カードには単体の画像も表示できます。

TitleCard(
    onClick = { ... },
    title = { Text("Workout") },
    backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
        backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
    ),
    contentColor = MaterialTheme.colors.onSurface,
    titleColor = MaterialTheme.colors.onSurface
) {
    Text("12 songs · 1 Hour 32 mins")
}

サイズ

カードの幅

カードの幅のデフォルトは、コンテナの最大幅です。

カードの高さ

カードの高さは自由です。コンポーネントの内容によって決まります。

円形のウォッチフェイスでは、画面の高さの 60% を超えるカードは切り取られます。