Chip
コンポーネントは、コンパクトでインタラクティブな UI 要素です。連絡先やタグなどの複雑なエンティティを表します。多くの場合、アイコンとラベルが使用されます。チェックボックスは、オン、閉じる、クリック可能にできます。
チップには、次の 4 種類があり、使用する場所は次のとおりです。
- アシスト: 作業中にユーザーをガイドします。多くの場合、ユーザー入力に対する一時的な UI 要素として表示されます。
- フィルタ: 一連のオプションからコンテンツを絞り込むことができます。これらは選択または選択解除できます。選択すると、チェックマーク アイコンが表示されることもあります。
- 入力: メニューでの選択など、ユーザー提供の情報を表します。アイコンとテキストを含めることができ、削除する場合は「X」を指定できます。
- Suggestion: 最近のアクティビティや入力に基づいてユーザーにおすすめを提示します。通常、ユーザー操作を促すために入力フィールドの下に表示されます。
API サーフェス
4 種類のチップに対応する 4 つのコンポーザブルがあります。以降のセクションでは、これらのコンポーザブルの概要と相違点について詳しく説明します。ただし、次のパラメータを共有します。
label
: チップに表示される文字列。icon
: チップの先頭に表示されるアイコン。一部のコンポーザブルには、個別のleadingIcon
パラメータとtrailingIcon
パラメータがあります。onClick
: ユーザーがチップを押したときに呼び出すラムダ。
アシストチップ
AssistChip
コンポーザブルを使用すると、ユーザーを特定の方向に動かすアシストチップを簡単に作成できます。他の機能として、leadingIcon
パラメータがあります。このパラメータを使用すると、チップの左側にアイコンを表示できます。次の例はその実装方法を示しています。
@Composable fun AssistChipExample() { AssistChip( onClick = { Log.d("Assist chip", "hello world") }, label = { Text("Assist chip") }, leadingIcon = { Icon( Icons.Filled.Settings, contentDescription = "Localized description", Modifier.size(AssistChipDefaults.IconSize) ) } ) }
この実装は次のようになります。
フィルタラベル
FilterChip
コンポーザブルでは、チップが選択されているかどうかを追跡する必要があります。次の例は、ユーザーがチップを選択したときにのみ、先頭のチェックマーク付きアイコンを表示する方法を示しています。
@Composable fun FilterChipExample() { var selected by remember { mutableStateOf(false) } FilterChip( onClick = { selected = !selected }, label = { Text("Filter chip") }, selected = selected, leadingIcon = if (selected) { { Icon( imageVector = Icons.Filled.Done, contentDescription = "Done icon", modifier = Modifier.size(FilterChipDefaults.IconSize) ) } } else { null }, ) }
この実装の選択を解除すると、次のように表示されます。
選択すると、次のように表示されます。
入力チップ
InputChip
コンポーザブルを使用すると、ユーザーの操作から生じるチップを作成できます。たとえば、メール クライアントでは、ユーザーがメールを作成しているときに、入力チップが、ユーザーが「to:」フィールドにアドレスを入力した人物を表すことがあります。
次の実装は、すでに選択された状態の入力チップを示しています。チップを押すと、チップが閉じます。
@Composable fun InputChipExample( text: String, onDismiss: () -> Unit, ) { var enabled by remember { mutableStateOf(true) } if (!enabled) return InputChip( onClick = { onDismiss() enabled = !enabled }, label = { Text(text) }, selected = enabled, avatar = { Icon( Icons.Filled.Person, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, trailingIcon = { Icon( Icons.Default.Close, contentDescription = "Localized description", Modifier.size(InputChipDefaults.AvatarSize) ) }, ) }
この実装は次のようになります。
候補ワード
SuggestionChip
コンポーザブルは、API 定義と一般的なユースケースの両方において、このページで紹介しているコンポーザブルの最も基本的なものです。候補ワードには、動的に生成されたヒントが表示されます。たとえば、AI チャットアプリでは、候補ワードを使用して最新のメッセージに対して考えられる返信を提示できます。
次の SuggestionChip
の実装について考えてみましょう。
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
これを実装すると次のようになります。
上昇したチップ
このドキュメントのすべての例で、フラットな外観の基本コンポーザブルを使用しています。チップを浮き彫りにする場合は、次の 3 つのコンポーザブルのいずれかを使用します。