Barra di controllo

La barra dei controlli fornisce i controlli associati a una determinata vista. Visualizza fino a 5 controlli nella versione non espansa e fino a 5 controlli aggiuntivi quando è espansa.

Nelle app multimediali, la barra di controllo viene utilizzata nella visualizzazione di riproduzione per i pulsanti di riproduzione/pausa, precedente, successivo e di altro tipo, inclusi quelli per le azioni di terze parti personalizzate.

icona callout
Componente barra di controllo ridotta a icona
La barra di controllo ridotta offre un insieme minimo di controlli disponibili in più viste

Anatomia

La barra di controllo ha due formati: non espansa e espansa. La versione non espansa può includere fino a 5 controlli. Nelle app multimediali, uno di questi è Riproduzione/Pausa.

Una volta espansa, la barra di controllo può includere fino a 5 controlli aggiuntivi in una seconda riga. Gli utenti possono selezionare il pulsante extra per espandere o comprimere la barra di controllo.

1. Parte della barra di controllo visibile prima dell'espansione
2. Sezione estesa della barra delle azioni
3. Uno dei controlli
4. Pulsante extra (espande e comprime la barra di controllo)

Specifiche

icona callout
Etichette di layout
Definizioni di E, M, KL, P, Flex

Barra di controllo

Barra di controllo espansa

Posizionamento di 1-4 controlli sulla barra di controllo con controllo centrale ancorato

Un controllo centrale ancorato è un controllo con un posizionamento preferito al centro della barra di controllo, ad esempio un pulsante di riproduzione/pausa musicale.

Posizionamento di 1-4 controlli sulla barra dei controlli senza controllo ancorato

Posizionamento di 6-9 controlli sulla barra di controllo

Layout di scalabilità

Questi layout di riferimento mostrano come adattare la barra di controllo a schermi di varie larghezze e altezze. Le categorie di larghezza e altezza sono definite nella sezione Layout. Tieni presente che tutti i valori dei pixel sono in pixel sottoposti a rendering, prima che si verifichi qualsiasi campionamento inferiore o superiore.

icona callout
Layout
Margini, scorciatoie e spaziatura interna per schermi di varie dimensioni
icona callout
Etichette di layout
Definizioni di E, M, KL, P, Flex

Schermate molto larghe con più di 1028 dp tra i margini

Quando la larghezza tra i margini è superiore alla larghezza massima della barra di controllo (1028 dp), centra la barra in orizzontale. La barra di controllo non si estende ai margini.

Schermate extra larghe con meno di 1028 dp tra i margini

Widescreen

Schermate a larghezza standard

Sullo schermo della larghezza standard, centra la barra di controllo in orizzontale. La barra di controllo si estenderà ai margini. In una schermata con larghezza standard di esattamente 690 dp, come in questo esempio, utilizza la spaziatura interna laterale di P5 tra i bordi della barra di controllo e i bordi dello schermo.

Schermate brevi

Barra di controllo espansa su schermi inferiori a 1000 dp

Barra di controllo espansa su schermi brevi

Barra di controllo espansa su schermi di altezza superiore a 1000 dp

Stili

icona callout
Linee guida per i colori
Tavolozze, valori di altitudine e opacità e altro ancora

Colore

Elemento Colore(modalità Giorno) Colore (modalità notturna)
Icone principali Bianco Bianco @ 88%
Striscia a schermo intero Nero al 78% Nero all'84%
Tendenza Da definire Da definire

Dimensioni

Elemento Dimensioni (dp)
Barra di controllo 96 (schermate brevi) / 128 (altezza standard e superiore)
Icona principale 44

Esempi

Barra di controllo nella visualizzazione di riproduzione
Barra di controllo espansa nella visualizzazione di riproduzione
Barra di controllo nella coda multimediale
Barra di controllo espansa nella coda multimediale
Barra di controllo nella coda multimediale
Barra di controllo espansa nella coda multimediale
Barra di controllo che si espande e si contrae quando un utente tocca il pulsante extra