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