Creare un chip per rappresentare entità complesse

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.
Figura 1. Chip di assistenza.

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.
Figura 2. Icona filtro deselezionata.
Chip di filtro selezionato, con un segno di spunta e uno sfondo colorato.
Figura 3. Chip del filtro selezionato.

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.
Figura 4. Inserisci il chip.

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.
Figura 5. Chip di assistenza.

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 parametro leadingIcon e trailingIcon 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:

Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.