Gli elenchi sono contenitori di elementi con scorrimento e messa a fuoco integrati.
Principi
Organizzazione chiara: gli elenchi devono presentare le informazioni in modo chiaro e scansionabile in verticale.
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 attivo.
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 vista app.
Utilizzare le protezioni per indicare i contenuti in overflow Quando un elenco contiene più elementi di quelli che possono essere visualizzati in una schermata, viene utilizzata una protezione nera vicino ai limiti dell'elenco.
Gli elenchi possono utilizzare un titolo, se necessario Per chiarezza, in un elenco è possibile utilizzare un titolo statico o fisso.
Cosa non fare
Utilizzare la profondità per indicare lo stato attivo
Le voci di elenco si spostano tra 0 e +4 di profondità per gli stati non selezionati e selezionati.
Gli elementi dell'elenco possono essere azionabili
Gli elementi di un elenco possono fungere da azioni. Mantieni l'azione sulla voce di elenco
Evidenzia il controllo che verrà attivato con un tocco, anche se puoi scorrere qualcos'altro. Se un elenco o una scheda può essere scorri dietro un altro elemento, concentrati solo sull'elemento che risponde al tocco.
Cosa fare
Cosa non fare
Anatomia
L'elenco è composto da un contenitore a scorrimento 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
List
Item: 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 Simbolo medio |
| Elemento di elenco: valori di spaziatura interna | Sì | 2d dp, 20 dp |
| Elemento di 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 |