Elle permet d'afficher un ensemble minimal de commandes et de métadonnées. Lorsque cette option est sélectionnée, une superposition s'affiche en plein écran avec une barre de commandes plus grande et des commandes supplémentaires.
Par exemple, la barre de commandes réduite des applications multimédias permet d'accéder à un petit ensemble de commandes de lecture et de métadonnées dans l'application lorsque de la musique est en cours de lecture. Elle peut également ouvrir une vue de lecture en plein écran.
Anatomie
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-anatomy-1.png?authuser=8&hl=fr)
2. Métadonnées
3. Commandes
Caractéristiques techniques
Barre de commandes réduite
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-spec-1.png?authuser=8&hl=fr)
Barre de commande réduite avec dépassement de texte
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-spec-2.png?authuser=8&hl=fr)
Ajuster les mises en page
Ces mises en page de référence montrent comment adapter la barre de commandes réduite pour l'adapter aux écrans de différentes largeurs et hauteurs. (Les catégories de largeur et de hauteur sont définies dans la section Layout (Mise en page).) Notez que toutes les valeurs de pixels sont exprimées en pixels de rendu, avant tout échantillonnage sous-échantillonnage ou sur-échantillonnage.
Écrans de largeur standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-ar-2.png?authuser=8&hl=fr)
Grands écrans
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-ar-3.png?authuser=8&hl=fr)
Écrans extra larges et super grand angle
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-ar-4.png?authuser=8&hl=fr)
Styles
Typographie
Style de type | Police | Poids | Taille (dp) |
---|---|---|---|
Corps 1 | Roboto | Standard | 32 |
Corps 3 | Roboto | Standard | 24 |
Couleur
Élément | Couleur(mode Jour) | Couleur (mode Nuit) |
---|---|---|
Type principal | Blanc | Blanc à 88% |
Type secondaire | Blanc à 72% | Blanc à 60% |
Icônes | Blanc | Blanc à 88% |
Indicateur de temps écoulé | Accent tiers | Accent tiers |
Indicateur de temps restant | #464A4D | #464A4D |
Arrière-plan de la barre de commandes réduite | #0E1013 à 84% | #0E1013 à 88% |
Troncation du gradient | Noir entre 0 et 100% dans 10% de l'espace de texte | Noir entre 0 et 100% dans 10% de l'espace de texte |
Taille
Élément | Taille (dp) |
---|---|
Icônes | 44 |
Vignette de contenu | 96 |
Indicateur de progression | 84 |
Piste de l'indicateur de progression | 4 |
Hauteur de la barre de commandes réduite | 128 |
Arrondi d'un angle arrondi (R1) | 4 |
Exemples
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-mock-1.png?authuser=8&hl=fr)
![](https://developers.google.cn/cars/design/automotive-os/components/images/control-bar-mock-2.png?authuser=8&hl=fr)