La barra di controllo fornisce i controlli associati a una determinata vista. Mostra fino a cinque controlli nella versione non espansa e fino a cinque controlli aggiuntivi quando è espansa.
Nelle app multimediali, la barra di controllo viene utilizzata nella visualizzazione di riproduzione per i controlli Riproduci/Metti in pausa, Precedente, Avanti e altri controlli, inclusi quelli per azioni personalizzate di terze parti.
Anatomia
La barra di controllo ha due formati: non espanso ed espanso. La versione non espansa può includere fino a cinque controlli. Nelle app multimediali, uno di questi è Riproduzione/Pausa.
Quando è espansa, la barra di controllo può includere fino a cinque controlli aggiuntivi in una seconda riga. Gli utenti possono selezionare il pulsante di overflow per espandere o comprimere la barra di controllo.
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=8&hl=it)
2. Parte espansa della barra delle azioni
3. Uno dei controlli
4. Pulsante Overflow (espande e comprime la barra di controllo)
Specifiche
Barra di controllo
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=8&hl=it)
Barra di controllo espansa
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=8&hl=it)
Posizionamento di 1-4 controlli sulla barra di controllo con controllo centrale ancorato
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=8&hl=it)
Posizionamento di 1-4 controlli sulla barra dei controlli senza controllo ancorato
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=8&hl=it)
Posizionamento di 6-9 controlli sulla barra di controllo
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=8&hl=it)
Layout di scalabilità
Questi layout di riferimento mostrano come adattare la barra di controllo per adattarsi 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 vengono visualizzati in pixel sottoposti a rendering, prima che si verifichi qualsiasi down-sampling o up-sampling.
Schermi molto larghi con oltre 1028 dp tra i margini
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=8&hl=it)
Schermi molto larghi con meno di 1028 dp tra i margini
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=8&hl=it)
Schermi ampi
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=8&hl=it)
Schermate di larghezza standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=8&hl=it)
Schermate brevi
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=8&hl=it)
Barra di controllo espansa su schermi inferiori a 1000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=8&hl=it)
Barra di controllo espansa negli schermi brevi
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=8&hl=it)
Barra di controllo espansa sugli schermi più alti di 1000 dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=8&hl=it)
Stili
Colore
Elemento | Colore(modalità giorno) | Colore (modalità notturna) |
---|---|---|
Icone principali | di colore bianco | Bianco all'88% |
Tela a schermo intero | Nero al 78% | Nero all'84% |
Tela con gradiente | Da definire | Da definire |
Taglie
Elemento | Dimensioni (dp) |
---|---|
Barra di controllo | 96 (schermi brevi) / 128 (altezza standard e superiori) |
Icona principale | 44 |
Esempi
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=8&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=8&hl=it)