Créer un chip pour représenter des entités complexes

Le composant Chip est un élément d'interface utilisateur compact et interactif. Il représente des entités complexes telles qu'un contact ou un tag, souvent avec une icône et un libellé. Il peut être cliquable, masquable ou à cocher.

Voici les cinq types de chips et les cas d'utilisation possibles:

  • Aide: guide l'utilisateur lors d'une tâche. Apparaît souvent en tant qu'élément d'interface utilisateur temporaire en réponse à une entrée utilisateur.
  • Filtre: permet aux utilisateurs d'affiner le contenu à partir d'un ensemble d'options. Ils peuvent être sélectionnés ou désélectionnés, et peuvent inclure une icône de coche lorsqu'ils sont sélectionnés.
  • Entrée: représente les informations fournies par l'utilisateur, telles que les sélections dans un menu. Ils peuvent contenir une icône et du texte, et inclure un "X" pour la suppression.
  • Suggestion: fournit des recommandations à l'utilisateur en fonction de son activité ou de ses entrées récentes. Elles apparaissent généralement sous un champ de saisie pour inviter l'utilisateur à effectuer une action.
  • Élevé: donne l'impression d'être surélevé au lieu d'être plat.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer un chip d'assistance

Le composable AssistChip permet de créer facilement un chip d'assistance qui incite l'utilisateur à s'orienter dans une direction particulière. L'une de ses caractéristiques distinctives est son paramètre leadingIcon, qui vous permet d'afficher une icône sur le côté gauche du chip, comme illustré dans la figure 1. L'exemple suivant montre comment l'implémenter:

Chip d'assistance simple.
Figure 1 Chip d'assistance

Créer un chip de filtre

Le composable FilterChip vous oblige à suivre si le chip est sélectionné ou non. L'exemple suivant montre comment afficher une icône cochée en avant-plan uniquement lorsque l'utilisateur a sélectionné le chip:

Résultats

Icône de filtre non sélectionnée, sans coche et avec un arrière-plan de forfait.
Figure 2 Chip de filtre non sélectionné.
Chip de filtre sélectionné, avec une coche et un arrière-plan coloré.
Figure 3 Chip de filtre sélectionné.

Créer un chip de saisie

Vous pouvez utiliser le composable InputChip pour créer des chips qui résultent de l'interaction utilisateur. Par exemple, dans un client de messagerie, lorsqu'un utilisateur rédige un e-mail, un chip de saisie peut représenter une personne dont l'adresse a été saisie dans le champ "À".

L'implémentation suivante illustre un chip d'entrée qui est dans un état sélectionné. L'utilisateur ferme le chip lorsqu'il appuie dessus.

Résultats

Chip de saisie avec un avatar et une icône en fin de ligne.
Figure 4. Chip d'entrée.

Créer un chip de suggestion

Le composable SuggestionChip est le plus basique des composables listés sur cette page, à la fois dans sa définition d'API et dans ses cas d'utilisation courants. Les chips de suggestion présentent des indices générés dynamiquement. Par exemple, dans une application de chat avec IA, vous pouvez utiliser des chips de suggestion pour présenter des réponses possibles au message le plus récent.

Examinez cette implémentation de SuggestionChip:

Résultats

Chip d'assistance simple.
Figure 5 : Chip d'assistance

Créer un chip surélevé

Tous les exemples de ce document utilisent les composables de base qui ont un aspect plat. Si vous souhaitez qu'un chip ait un aspect surélevé, utilisez l'un des trois composables suivants:

Points essentiels

Quatre composables correspondent aux quatre types de chips et partagent les paramètres suivants:

  • label: chaîne qui s'affiche sur la puce.
  • icon: icône affichée au début du chip. Certains composables comportent un paramètre leadingIcon et trailingIcon distincts.
  • onClick: lambda appelé par le chip lorsque l'utilisateur clique dessus.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires