複雑なエンティティを表すチップを作成する

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

チップの種類と使用例は次のとおりです。

  • アシスト: タスク中にユーザーをガイドします。多くの場合、ユーザー入力に応答して一時的な UI 要素として表示されます。
  • フィルタ: 一連のオプションからコンテンツを絞り込むことができます。チェックボックスは選択または選択解除できます。選択されている場合は、チェックマーク アイコンが表示されます。
  • 入力: メニューの選択など、ユーザー提供の情報を表現します。アイコンとテキストを含めることができ、削除用の「X」を指定できます。
  • 候補: 最近のアクティビティや入力に基づいて、ユーザーにおすすめの方法を提示します。通常、入力フィールドの下に表示され、ユーザーの操作を促します。
  • 高架: フラットではなく、高架のように表示されます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

アシスト チップを作成する

AssistChip コンポーザブルを使用すると、ユーザーを特定の方向に誘導するアシスト チップを簡単に作成できます。1 つの特徴は、leadingIcon パラメータです。これにより、図 1 のようにチップの左側にアイコンを表示できます。次の例は、実装方法を示しています。

シンプルなアシスト チップ。
図 1. アシスト チップ。

フィルタチップを作成する

FilterChip コンポーザブルでは、チップが選択されているかどうかを追跡する必要があります。次の例は、ユーザーがチップを選択した場合にのみ、先頭のチェックアイコンを表示する方法を示しています。

結果

選択されていないフィルタラベル。チェックボックスがオンになっておらず、背景がプランです。
図 2. 選択されていないフィルタラベル。
チェックマークと色付きの背景が付いた、選択したフィルタチップ。
図 3. 選択したフィルタラベル。

入力チップを作成する

InputChip コンポーザブルを使用すると、ユーザー操作の結果としてチップを作成できます。たとえば、メール クライアントでユーザーがメールを作成している場合、入力チップは、ユーザーが [to:] フィールドに入力したアドレスの人物を表すことができます。

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

結果

アバターと末尾のアイコンが付いた入力チップ。
図 4. チップを挿入します。

候補チップを作成する

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

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

結果

シンプルなアシスト チップ。
図 5. アシスト チップ。

エレベートされたチップを作成する

このドキュメントの例では、フラットな外観のベース コンポーザブルを使用しています。チップを浮かせて表示する場合は、次の 3 つのコンポーザブルのいずれかを使用します。

要点

4 つのコンポーザブルは 4 種類のチップに対応しており、次のパラメータを共有します。

  • label: チップに表示される文字列。
  • icon: チップの先頭に表示されるアイコン。一部のコンポーザブルには、leadingIcon パラメータと trailingIcon パラメータが別々にあります。
  • onClick: ユーザーがチップをクリックしたときにチップが呼び出すラムダ。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。