Selettori

Il selettore aiuta gli utenti a selezionare e impostare dati specifici.

Selettore

Utilizza i selettori per consentire agli utenti di scegliere tra un numero limitato di elementi.

Per impostazione predefinita, gli elementi vengono riprodotti in loop infiniti in entrambe le direzioni. Valuta la possibilità di disattivare questo comportamento se l'ordine nell'elenco è importante, oppure per consentire agli utenti di raggiungere il primo e l'ultimo elemento con un rapido scorrimento.

Anatomia

Anatomia

R. Colonna non attiva
B. Rompi il colon
C. Colonna del selettore
D. Contenuti principali
E. Contenuto centrale
F. Contenuti in basso

Larghezze e altezze

Il Gruppo selettore riempie l'altezza e la larghezza disponibili. Sono disponibili quattro opzioni di layout per le colonne del selettore. Ogni layout è centrato e occupa l'altezza disponibile. L'ampiezza delle colonne è definita dalla larghezza necessaria per contenere il numero di cifre necessarie nel carattere, il selettore della data è l'eccezione: riempie orizzontalmente lo schermo e cancella il bordo.

Ad esempio, i numeri andranno a calcolare la larghezza di "00" e poi la imposteranno. Per i campi di testo, ad esempio per il campo del mese, verrà calcolata la larghezza di "MMM" (che è la lettera più larga dell'alfabeto latino). La larghezza e l'altezza (ovvero l'altezza della riga dello stile utilizzato) saranno pertanto influenzate dal carattere utilizzato.

Le dimensioni degli elementi del selettore variano nel punto di interruzione.

Utilizzo

Guarda i seguenti esempi di selettori di data e ora

Per un'implementazione predefinita del selettore di data e ora, consulta la raccolta Horologist su GitHub.

Se vuoi creare un'esperienza simile, in cui gli utenti scelgono un valore composto da più parti tra più selettori, utilizza il componente integrato PickerGroup. Questo oggetto utilizza un oggetto coordinatore dell'elemento attivo per assegnare lo stato attivo all'elemento selettore corretto.

Layout adattivi

Selettore dell'ora (24 ore)

Selettore del tempo (12 ore)

Selettore della data

Comportamento reattivo

Aumento delle dimensioni del testo

Dopo il punto di interruzione 225 o più, la dimensione del carattere dell'elemento selettore cambia. La copia in alto e in basso all'interno della colonna a scorrimento lento regola (A), così come la copia al centro. Di seguito sono riportati alcuni esempi:

Layout a due colonne

Sotto il punto di interruzione di 225 dp

Carattere: Display 2

Punto di interruzione superiore a 225 dp

Carattere: Display 1

Layout a tre colonne

Sotto il punto di interruzione di 225 dp

Carattere: Display 3

Sopra il punto di interruzione di 225 dp

Carattere: Display 2

Aumento delle dimensioni della sfumatura

Il gradiente nella colonna Selettore è definito in altezza dallo spazio disponibile. Entrambi i gradienti superiore e inferiore sono impostati su un terzo (33%) dell'altezza disponibile. Ciò significa che il gradiente viene ridimensionato in modo proporzionale per ogni dimensione dello schermo disponibile. Indipendentemente dal layout delle colonne.

Sotto il punto di interruzione di 225 dp

Dimensioni: 33% dell'altezza della colonna

Sopra il punto di interruzione di 225 dp

Dimensioni: 33% dell'altezza della colonna

Aumento della spaziatura delle colonne

La spaziatura tra le colonne supera il punto di interruzione oltre 225, a partire da 2 dp o 4 dp e aumentando fino a 6 dp. Dipende dal layout selezionato (con layout a 2 o 3 colonne)

Layout a due colonne

Sotto il punto di interruzione di 225 dp

Intervallo di colonna di 4 dp

Sopra il punto di interruzione di 225 dp

Intervallo di colonna di 6 dp

Layout a tre colonne

Sotto il punto di interruzione di 225 dp

Differenza colonna: 2 dp

Sopra il punto di interruzione di 225 dp

Intervallo di colonna di 6 dp