Chip

Chip コンポーネントは、コンパクトでインタラクティブな UI 要素です。連絡先やタグなどの複雑なエンティティを表し、多くの場合、アイコンとラベルが付いています。チェック可能、閉じることが可能、クリック可能にできます。

チップの 4 つのタイプと、それらを使用する可能性がある場所は次のとおりです。

  • アシスト: タスク中にユーザーをガイドします。多くの場合、ユーザー入力に応じて一時的な UI 要素として表示されます。
  • フィルタ: ユーザーがオプションのセットからコンテンツを絞り込むことができます。選択または選択解除できます。選択するとチェックマーク アイコンが表示されることがあります。
  • 入力: メニューでの選択など、ユーザーが提供した情報を表します。アイコンとテキストを含めることができ、削除用の [X] を表示できます。
  • 候補: 最近の アクティビティや入力に基づいて、ユーザーにおすすめを表示します。通常、入力フィールドの下に表示され、ユーザーの操作を促します。
4 つのチップ コンポーネントの例。それぞれの固有の特性が強調されています。
図 1.4 つのチップ コンポーネント。

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)
            )
        }
    )
}
Chip.kt

これを実装すると次のようになります。

先頭のアイコンとテキストラベルが表示されたシンプルなアシスト チップ。
図 2.アシスト チップ。

フィルタラベル

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
        },
    )
}
Chip.kt

選択されていない場合、これを実装すると次のようになります。

選択されていないフィルタラベル。チェックマークがなく、背景は無地です。
図 3.選択されていないフィルタ チップ。

選択されている場合、これを実装すると次のようになります。

選択されたフィルタラベル。チェックマークと色付きの背景が表示されています。
図 4.選択されているフィルタラベル。

入力チップ

InputChip コンポーザブルを使用すると、ユーザー インタラクションによって生成されるチップを作成できます。たとえば、メール クライアントでユーザーがメールを作成している場合、入力チップは、ユーザーが [宛先:] フィールドに追加した連絡先を表すことがあります。

次の実装は、選択済みの状態の入力チップを示しています。ユーザーがチップを押すと、チップが閉じます。

@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)
            )
        },
    )
}
Chip.kt

これを実装すると次のようになります。

アバターと末尾のアイコンを含む入力チップ。
図 5.入力チップ。

候補ワード

SuggestionChip コンポーザブルは、このページに記載されているコンポーザブルの中で最も基本的なものであり、API 定義と一般的なユースケースの両方で基本となります。候補ワードには、動的に生成されたヒントが表示されます。たとえば、AI チャットアプリでは、候補ワードを使用して、最新のメッセージに対する返信候補を表示できます。

SuggestionChip の次の実装について考えてみましょう。

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

これを実装すると次のようになります。

シンプルな候補ワード。
図 6.候補ワード。

浮き上がりチップ

このドキュメントの例ではすべて、フラットな外観の基本コンポーザブルを使用しています。浮き上がった外観のチップが必要な場合は、次の 3 つのコンポーザブルのいずれかを使用します。

参考情報