Chip
コンポーネントは、コンパクトでインタラクティブな UI 要素です。連絡先やタグなどの複雑なエンティティを表し、アイコンとラベルを使用することがよくあります。このボタンは、オンに可能、閉じることが可能、またはクリック可能にできます。
4 種類のチップと、それらを使用する場所は次のとおりです。
- アシスト: タスク中のユーザーをガイドします。多くの場合、ユーザー入力に応じて一時的な UI 要素として表示されます。
- フィルタ: ユーザーは一連のオプションからコンテンツを絞り込むことができます。これらを選択または選択解除でき、選択するとチェックマーク アイコンが表示されることがあります。
- 入力: メニューの選択内容など、ユーザーが提供する情報を表します。アイコンとテキストを含めることができ、削除する場合は「X」が表示されます。
- 候補: 最近のアクティビティや入力に基づいて、ユーザーにおすすめを提供します。通常、ユーザーの操作を促すために入力フィールドの下に表示されます。
API サーフェス
4 種類のチップに対応する 4 つのコンポーザブルがあります。以降のセクションでは、これらのコンポーザブルの概要とその違いについて詳しく説明します。ただし、次のパラメータを共有します。
label
: チップに表示される文字列。icon
: チップの先頭に表示されるアイコン。一部のコンポーザブルには、個別のleadingIcon
パラメータとtrailingIcon
パラメータがあります。onClick
: ユーザーがチップを押したときにチップが呼び出すラムダ。
アシストチップ
AssistChip
コンポーザブルを使用すると、ユーザーを特定の方向に移動するアシストチップを簡単に作成できます。主な特長の 1 つは、チップの左側にアイコンを表示できる 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 つのコンポーザブルのいずれかを使用します。