Il componente della barra e dell'intestazione dell'app è una barra dedicata nella parte superiore del canvas dell'app, che può essere personalizzata per visualizzare funzioni importanti relative all'app, come il branding, la navigazione di primo livello e l'accesso ai relativi controlli.
Utilizza layout coerenti della barra delle app e delle intestazioni per posizionare i controlli chiave, ad esempio la ricerca in-app, in una posizione standard in tutta l'interfaccia utente.
Anatomia
La barra e l'intestazione dell'app possono includere una varietà di elementi. Può essere configurato in uno dei seguenti modi:
- Intestazione app: se configurato come intestazione dell'app, il componente contiene spazio per il testo facoltativo, con un utilizzo minimo di icone e pulsanti. In genere, include un titolo dello schermo e una freccia indietro.
- Barra delle app: se configurata come barra delle app, può includere icone, schede e pulsanti. Alcuni degli elementi più comuni sono l'icona di un'app e le opzioni di navigazione.
Ciascuna di queste versioni può includere anche controlli dell'app, come la ricerca in-app e le impostazioni.
![Anatomia della barra e dell'intestazione dell'app](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-anatomy-1.png?authuser=5&hl=it)
1. Freccia indietro
2. Titolo schermata
3. Pulsante
4. Controlli dell'app
5. Icona dell'app
6. Navigazione principale (schede)
Specifiche - Barra dell'app
Barra delle app con navigazione principale, allineata al centro
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-8.png?authuser=5&hl=it)
Barra dell'app con navigazione principale, allineata a sinistra
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-7.png?authuser=5&hl=it)
Barra dell'app con navigazione principale – compressa (riquadro al posto delle schede)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-9.png?authuser=5&hl=it)
Specifiche - Intestazione app
Intestazione dell'app con titolo centrato
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-1.png?authuser=5&hl=it)
Intestazione dell'app con controllo singola app
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-2.png?authuser=5&hl=it)
Intestazione dell'app con più controlli dell'app
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-3.png?authuser=5&hl=it)
Intestazione dell'app con pulsante singolo
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-4.png?authuser=5&hl=it)
Intestazione dell'app con più pulsanti
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-5.png?authuser=5&hl=it)
Intestazione dell'app con overflow del testo
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-6.png?authuser=5&hl=it)
Intestazione dell'app con barra delle schede autonoma
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-10.png?authuser=5&hl=it)
Funzionalità di
Gli OEM possono rispecchiare il loro brand modificando l'aspetto visivo della barra e dell'intestazione dell'app. Le modifiche possono includere:
- Icone personalizzate
- Caratteri personalizzati
- Impostazione dell'aspetto dei pulsanti attivi, non attivi e disattivati
- Impostazione delle dimensioni e dei posizionamenti dei pulsanti
Il sistema di progettazione fornisce indicazioni per personalizzare i componenti utilizzando layout, colore, tipografia e dimensioni.
Esempi
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-1.png?authuser=5&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-2.png?authuser=5&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-3.png?authuser=5&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-4.png?authuser=5&hl=it)