Personnaliser les barres système

Pour personnaliser les barres système, utilisez une combinaison de configurations XML et de modules Dagger pour les composants d'interface utilisateur.

Définir le comportement de la barre système

Pour définir une barre système, utilisez la balise <SystemBar> dans un fichier XML afin de définir l'apparence et l'animation. Ce fichier XML fait partie d'une superposition de ressources d'exécution (RRO).

Attributs de balise SystemBar

L'élément racine d'une configuration de barre système est <SystemBar>, qui accepte les attributs suivants :

ID et types de barre système

Évitez d'utiliser TopCarSystemBar, BottomCarSystemBar, LeftCarSystemBar et RightCarSystemBar comme valeurs id. Le système réserve ces ID pour la rétrocompatibilité. Leur utilisation peut entraîner un comportement inattendu.

Pour les configurations de base de la barre d'état supérieure et de la barre de navigation inférieure, utilisez respectivement status et nav comme valeurs de l'attribut type.

Si vous utilisez ces ID, vous pouvez ignorer la section intitulée Fournir une interface utilisateur de barre système avec Dagger.

<Variant>

Définit les états visuels. Pour en savoir plus, consultez Utiliser une variante pour concevoir un état visuel. Dans la balise <SystemBar>, définissez une ou plusieurs balises <Variant>. Chaque variante représente un état visuel distinct et contient des propriétés qui contrôlent l'apparence de la barre système dans cet état.

<Visibility isVisible="true|false">

Contrôle la visibilité de la barre système. Le booléen isVisible indique si la barre système est visible ou non.

<Alpha alpha="float_value">

Contrôle la transparence de la barre système. La valeur de alpha est comprise entre 0.0 (totalement transparent) et 1.0 (totalement opaque).

<Bounds .../>

Définit la position et la taille de la barre système. Pour les éléments <SystemBar>, les limites doivent toucher au moins un bord de l'écran (gauche, haut, droite ou bas). Les attributs sont les suivants :

• left, top, right, bottom : coordonnées absolues.
• width, height : dimensions.
• leftOffset, topOffset, rightOffset, bottomOffset : décalages vers le centre du rectangle.

<Corner radius="dimen"/>

Définit le rayon d'angle de la barre système. Pour radius, saisissez la dimension du rayon d'angle.

<Insets .../>

Définit les encarts pour la barre système. Les attributs sont left, top, right et bottom. Pour chaque attribut, saisissez une valeur de dimension pour les encarts.

<Gravity .../>

Définit la gravité du contenu de la barre système. Pour en savoir plus, consultez HunTagXmlParserKt.GRAVITY_TAG dans le code source.

• Lorsque vous omettez une valeur pour la gravité, le système la calcule en interne.
• Les valeurs acceptées sont des combinaisons de TOP, BOTTOM, LEFT, RIGHT, CENTER, CENTER_HORIZONTAL, CENTER_VERTICAL et FILL_HORIZONTAL, chacune étant séparée par un caractère |.

Unités de dimension

Spécifiez les dimensions avec px, dp (ou dip), % ou des références aux ressources dimension, integer, fraction, string ou attribute.

Transitions : animer entre les variantes

Pour en savoir plus, consultez Configurer une transition. Utilisez le bloc <Transitions> pour définir la façon dont la barre système s'anime entre les différentes variantes :

L'UI évolutive n'accepte les transitions dans les barres système que lorsque vous les définissez pour des cas d'utilisation en mode non immersif. Cela signifie que le mode immersif ne déclenche pas les transitions de fenêtrage de l'UI évolutive pour les barres système lorsqu'il masque (ou affiche) une barre système.

L'UI évolutive continue d'envoyer des événements pour masquer (ou afficher) une barre système afin que d'autres panneaux puissent répondre selon les besoins, tandis que les transitions pour masquer et afficher les barres système doivent être fournies pour le bon fonctionnement de l'attribut hideForKeyboard. Prenons l'exemple de structure XML suivant :

<SystemBar id="@id/my_custom_status_bar" type="status" barZOrder="0" defaultVariant="@id/default_variant" hideForKeyboard="true">
    <Variant id="@+id/default_variant">
        <Bounds top="0px" left="0px" right="100%" height="100px"/>
        <Visibility isVisible="true"/>
    </Variant>
    <Variant id="@+id/hidden_variant" parent="@id/default_variant">
        <Visibility isVisible="false"/>
    </Variant>
    <Transitions>
        <Transition onEvent="_System_Show_Panel" onEventTokens="panelId= my_custom_status_bar" toVariant="@id/default_variant"/>
        <Transition onEvent="_System_Hide_Panel" onEventTokens="panelId= my_custom_status_bar" toVariant="@id/hidden_variant"/>
    </Transitions>
</SystemBar>

Fournir une UI de barre système avec Dagger

Après avoir défini la barre système au format XML, fournissez les View et Window réels. Pour ce faire, appliquez un forçage d'application au module Dagger par défaut, CarSystemBarModule.java. Exemple :

import com.android.systemui.car.systembar.CarSystemBarViewSupplier;
import com.android.systemui.car.systembar.CarSystemBarWindowSupplier;
import com.android.systemui.car.systembar.CarSystemBarWindowSupplierUsingLayout;
import com.example.R;

import dagger.Module;
import dagger.Provides;
import dagger.multibindings.IntoMap;
import dagger.multibindings.StringKey;

@Module
public abstract class MySystemBarModule extends CarSystemBarModule {

    @Provides
    @IntoMap
    @StringKey("my_custom_status_bar") // Matches the <SystemBar> id
    static CarSystemBarViewSupplier bindMyCustomStatusBarViewSupplier() {
        return new CarSystemBarViewSupplierUsingLayout(
            R.layout.my_custom_status_bar, // provisioned layout
            R.layout.my_custom_status_bar_unprovisioned // unprovisioned layout
        );
    }

    @Provides
    @IntoMap
    @StringKey("my_custom_status_bar") // Matches the <SystemBar> id
    static CarSystemBarWindowSupplier bindMyCustomStatusBarWindowSupplier() {
        return new CarSystemBarWindowSupplierUsingLayout(
            R.layout.my_navigation_bar_window, // Can reuse existing window layouts
            R.id.my_custom_bar_window // The ID that will be assigned to the window
        );
    }
}

Créer un module Dagger dans un remplacement SystemUI

Pour développer vos ressources de mise en page personnalisées, utilisez les classes CarSystemBarViewSupplierUsingLayout et CarSystemBarWindowSupplierUsingLayout.

Créez un module Dagger pour fournir vos fournisseurs personnalisés. Le @StringKey doit correspondre au id dans votre balise XML <SystemBar>.

Pour remplacer CarSystemBarModule, consultez cet exemple de code :

import com.android.systemui.car.systembar.CarSystemBarViewSupplier;
import com.android.systemui.car.systembar.CarSystemBarWindowSupplier;
import com.android.systemui.car.systembar.CarSystemBarWindowSupplierUsingLayout;
import com.example.R;

import dagger.Module;
import dagger.Provides;
import dagger.multibindings.IntoMap;
import dagger.multibindings.StringKey;

@Module
public abstract class MySystemBarModule extends CarSystemBarModule {

    @Provides
    @IntoMap
    @StringKey("my_custom_status_bar") // Matches the <SystemBar> id
    static CarSystemBarViewSupplier bindMyCustomStatusBarViewSupplier() {
        return new CarSystemBarViewSupplierUsingLayout(
            R.layout.my_custom_status_bar, // provisioned layout
            R.layout.my_custom_status_bar_unprovisioned // unprovisioned layout
        );
    }

    @Provides
    @IntoMap
    @StringKey("my_custom_status_bar") // Matches the <SystemBar> id
    static CarSystemBarWindowSupplier bindMyCustomStatusBarWindowSupplier() {
        return new CarSystemBarWindowSupplierUsingLayout(
            R.layout.my_navigation_bar_window, // Can reuse existing window layouts
            R.id.my_custom_bar_window // The ID that will be assigned to the window
        );
    }
}

Utiliser un RRO pour créer une configuration au niveau du système

Définissez plusieurs configurations au niveau du système qui affectent les barres système dans le fichier res/values/config.xml de votre RRO.

Désactiver les anciennes barres système

Pour éviter les conflits avec l'UI évolutive, désactivez les anciennes configurations de la barre système en définissant les indicateurs suivants sur false :

<resources>
    <bool name="config_enableTopSystemBar">false</bool>
    <bool name="config_enableBottomSystemBar">false</bool>
    <bool name="config_enableLeftSystemBar">false</bool>
    <bool name="config_enableRightSystemBar">false</bool>
</resources>

Emplacement de l'indicateur de confidentialité

La ressource de chaîne config_privacyIndicatorLocation spécifie la barre système qui héberge les indicateurs de confidentialité. La valeur doit correspondre au nom id d'un <SystemBar>.

<resources>
    <!-- "my_custom_status_bar" corresponds to the android:id name of a SystemBar -->
    <string name="config_privacyIndicatorLocation">my_custom_status_bar</string>
</resources>

Écouteurs d'événements de déplacement

Ces configurations spécifient les barres système qui écoutent les événements de déplacement (par exemple, pour balayer l'écran vers le bas afin d'ouvrir le panneau de notifications). À partir d'Android Automotive OS avec une UI évolutive, utilisez les attributs XML par défaut au lieu des tableaux de ressources de découverte pilotée pour définir ces fonctionnalités.

Recommandé : découverte basée sur XML (UI évolutive)

Utilisez les attributs dragOpenNotification et dragCloseNotification directement dans votre balise <SystemBar> à l'intérieur de votre fichier XML de superposition :

<SystemBar id="@id/my_custom_status_bar" type="status" barZOrder="0" defaultVariant="@id/default_variant" dragOpenNotification="true">
    <Variant id="@+id/default_variant">
        <Bounds top="0px" left="0px" right="100%" height="100px"/>
        <Visibility isVisible="true"/>
    </Variant>
</SystemBar>

Ancienne méthode : tableau de ressources (solution de remplacement)

Si vous gérez une compilation d'UI non évolutive ou si vous devez spécifier des écouteurs pour les appareils rétrocompatibles, utilisez l'ancienne approche string-array dans res/values/config.xml dans votre RRO. Ces ressources string-array spécifient les barres système qui écoutent les événements de déplacement. Par exemple, pour ouvrir le panneau de notification. Chaque <item> correspond au nom id d'une barre système.

• config_registerHvacDragCloseListener
• config_notificationDragOpenListener
• config_notificationDragCloseListener

Exemple :

<resources>
    <string-array name="config_notificationDragOpenListener" translatable="false">
        <item>my_custom_status_bar</item>
    </string-array>
</resources>

Migration Build and Deploy

Pour créer et déployer une barre d'état :

1. Flashez l'appareil avec votre application de remplacement SystemUI modifiée.

2. Utilisez le système de compilation Android (m) pour compiler votre projet RRO.

3. Déployez l'APK RRO généré sur votre appareil Android Automotive. Utilisez adb install ou flashez une version complète incluant votre RRO.