Chip
コンポーネントは、入力、属性、またはアクションを表すインタラクティブなコンパクト要素です。
解剖学
![](https://developer.android.google.cn/static/wear/images/components/chips-anatomy.png?authuser=2&hl=ja)
A. プライマリ ラベル
B. セカンダリ ラベル(省略可)
C. アイコン(省略可)
D. コンテナ
設計に関する推奨事項
![](https://developer.android.google.cn/static/wear/images/components/chips-image.png?authuser=2&hl=ja)
画像チップには、選択した画像に関連するアクションが含まれています。画像チップを使用すると、より具体的なデザインを伝えることができます。
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
![](https://developer.android.google.cn/static/wear/images/components/chip-avatar.png?authuser=2&hl=ja)
選択したアバターに関連するアクションには、アバターチップを使用します。アバターチップには、連絡先 ID の写真など、アバターの認識を容易にするためのアイコンを追加することもできます。アバター アイコンのサイズは 32x32 dp です。
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
関連コンポーネント
![](https://developer.android.google.cn/static/wear/images/components/chip-compact.png?authuser=2&hl=ja)
関連コンポーネントである CompactChip は、チップ コンポーネントのバリエーションであり、より小さく見え、スペースが少ないユースケース用に設計されています。コンパクト チップには、アイコン用のスロットと 1 行のテキストラベル用のスロットが用意されています。また、高さ 48 dp のタップ可能な領域も備えています。
階層
![](https://developer.android.google.cn/static/wear/images/components/chip-hierarchy.png?authuser=2&hl=ja)
さまざまな色の塗りつぶしを使ってチップの階層を表します。 プライマリ アクションに対する 1 つの視認性の高いチップを含むよう各画面を設計します。
高強調ページの主要なアクションに高強調チップを使用します。高強調チップの塗りつぶしにはプライマリの色を使用します。
中強調
プライマリ アクションよりも重要度が低いアクションに中強調チップを使用します。中強調チップの塗りつぶしにはセカンダリの色を使用します。
または、カスタムの OutlinedChip コンポーネントを使用します。枠線付きのチップの場合、背景は透明、ストロークは透明度 60% のプライマリ バリエーションの色、コンテンツはプライマリの色になります。
低強調
低強調チップは、透明な塗りつぶしで、テキストラベルのみを含みます。低強調チップを使用して、プライマリ チップまたはセカンダリ チップに対する子関係を示します。
サイズ
![](https://developer.android.google.cn/static/wear/images/components/chip-size1.png?authuser=2&hl=ja)
デフォルト チップ
アイコン: 24 dp
高さ: 52 dp
![](https://developer.android.google.cn/static/wear/images/components/chip-size2.png?authuser=2&hl=ja)
コンパクト チップ
アイコン: 20 dp
高さ: 32 dp
タップ可能な領域: 48 dp
使用方法
チップの使用例(設定の標準チップ、エクササイズ アプリの画像チップなど)をご覧ください。