Gli elenchi sono contenitori di elementi con scorrimento e messa a fuoco integrati.
dell'AI
Organizzazione chiara: gli elenchi devono presentare le informazioni in una disposizione verticale chiara e facilmente scansionabile.
Presentazione coerente degli elementi: gli elementi dell'elenco devono seguire una struttura visiva coerente.
Focus e navigazione: nelle interfacce che si basano sulla navigazione direzionale, gli elenchi devono indicare chiaramente l'elemento attualmente selezionato.
Interattività: gli elementi dell'elenco spesso rappresentano elementi selezionabili o su cui è possibile intervenire.
Utilizzo e posizionamento
Gli elenchi possono contenere vari contenuti correlati con elementi ripetibili. A differenza degli stack, gli elenchi riempiono il contenitore della visualizzazione dell'app.
Gli elenchi possono mostrare uno o più elementi selezionabili all'interno di una visualizzazione.
Utilizzare le maschere per indicare i contenuti in overflow
Quando un elenco contiene più elementi di quelli che possono essere visualizzati in una visualizzazione, viene utilizzata una maschera nera vicino ai limiti dell'elenco.
Se necessario, gli elenchi possono utilizzare un titolo
Un titolo statico o sticky può essere utilizzato in un elenco per chiarezza.
Cosa non fare
Utilizzare la profondità per indicare la messa a fuoco
Le voci di elenco si spostano tra 0 e +4 di profondità per gli stati non attivi e attivi.
Le voci elenco possono essere interattive
Gli elementi di un elenco possono fungere da azioni. Mantieni l'azione sull'elemento dell'elenco
Anatomia
L'elenco è composto da un contenitore scorrevole e da elementi dell'elenco spaziati in modo uniforme. Le liste devono scorrere verticalmente, con un overshoot minimo, quando il numero di elementi supera l'area visibile.
A. Contenitore - area scorrevole
B. Voce elenco
C. Barre di sistema
Elemento elenco: ogni singolo elemento all'interno dell'elenco.
A. Forma
B. Bordo
C. Icona iniziale
D. Contenuti testuali
E. Indicatore di scia
Personalizzazione
La maggior parte della personalizzazione avviene con le voci di elenco.
| Proprietà | Personalizzazione | Impostazioni predefinite |
|---|---|---|
| Voce elenco: forma | Sì | 40 dp |
| Elemento di elenco: icona iniziale e finale | Sì | Icona del simbolo di gravità media |
| Elemento di elenco: valori di spaziatura interna | Sì | 2d dp, 20 dp |
| Voce dell'elenco: contenuti | Sì | A una riga: un composable Text per l'etichetta principale che utilizza Body Small A due righe: una colonna contenente due composable Text per un'etichetta principale e una secondaria Principale: Title Small Secondaria: Body Small |
| Elenco: verticalArrangement | Sì | 20 dp |