Il componente Chip
è un elemento dell'interfaccia utente compatto e interattivo. Rappresenta entità complesse come un contatto o un tag, spesso con un'icona e un'etichetta. Può essere selezionato, ignorato o cliccabile.
Di seguito sono riportati i cinque tipi di chip e dove puoi utilizzarli:
- Assistente: guida l'utente durante un'attività. Spesso viene visualizzato come elemento UI provvisorio in risposta all'input dell'utente.
- Filtra: consente agli utenti di perfezionare i contenuti da un insieme di opzioni. Possono essere selezionati o deselezionati e possono includere un'icona di spunta quando sono selezionati.
- Input: rappresenta le informazioni fornite dall'utente, ad esempio le selezioni in un menu. Possono contenere un'icona e del testo, nonché un'"X" per la rimozione.
- Suggerimento: fornisce consigli all'utente in base alla sua attività o ai suoi input recenti. In genere vengono visualizzati sotto un campo di immissione per richiedere azioni all'utente.
- Elevato: ha un aspetto elevato anziché piatto.
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Creare un chip di assistenza
Il composable AssistChip
offre un modo semplice per creare un chip di assistenza che indirizzi l'utente in una determinata direzione. Una caratteristica distintiva è il parametro leadingIcon
che consente di visualizzare un'icona sul lato sinistro del chip, come mostrato nella figura 1. L'esempio seguente mostra come implementarlo:
![Un semplice chip di assistenza.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?hl=it)
Creare un chip di filtro
Il composable FilterChip
richiede di monitorare se il chip è selezionato o meno. L'esempio seguente mostra come mostrare un'icona selezionata iniziale solo quando l'utente ha selezionato il chip:
Risultati
![Un chip filtro non selezionato, senza spunta e con uno sfondo del piano.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?hl=it)
![Chip di filtro selezionato, con un segno di spunta e uno sfondo colorato.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?hl=it)
Creare un chip di input
Puoi utilizzare il composable InputChip
per creare chip derivanti dall'interazione dell'utente. Ad esempio, in un client di posta, quando l'utente scrive un'email, un chip di input potrebbe rappresentare una persona di cui l'utente ha inserito l'indirizzo nel campo "A:".
La seguente implementazione mostra un chip di input in stato selezionato. L'utente chiude il chip quando lo preme.
Risultati
![Un chip di input con un avatar e un'icona finale.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?hl=it)
Creare un chip di suggerimento
Il composable SuggestionChip
è il più semplice tra quelli elencati in questa pagina, sia nella definizione dell'API sia nei casi d'uso comuni. I chip di suggerimento presentano suggerimenti generati dinamicamente. Ad esempio, in un'app di chat con IA, potresti utilizzare i chip di suggerimento per presentare possibili risposte al messaggio più recente.
Considera questa implementazione di SuggestionChip
:
Risultati
![Un semplice chip di assistenza.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?hl=it)
Creare un chip in evidenza
Tutti gli esempi in questo documento utilizzano i componenti composibili di base che hanno un aspetto piatto. Se vuoi un chip con un aspetto più elevato, utilizza uno dei seguenti tre composabili:
Punti chiave
Quattro composable corrispondono ai quattro tipi di chip e condividono i seguenti parametri:
label
: la stringa visualizzata sul chip.icon
: l'icona visualizzata all'inizio del chip. Alcuni componibili hanno un parametroleadingIcon
etrailingIcon
separato.onClick
: la funzione lambda chiamata dal chip quando l'utente fa clic.
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=it)