Atelier de programmation SystemUIOverlayWindow

Cet article explique comment créer une vue dans SystemUIOverlayWindow .

Avant de commencer

Le contenu fourni ci-dessous suppose que vous avez lu ces articles sur l'interface utilisateur système :

Cet article:

  • Suppose que vous connaissez les cas d'utilisation du système d'exploitation Android Automotive et de son SystemUIOverlayWindow .
  • Fournit des exemples de certaines sous-classes de OverlayViewController .
  • Ne traite pas les sous-classes de OverlayViewController .
  • N'explique pas comment configurer Android pour le développement.
  • Ne décrit pas chaque option pouvant être remplacée dans les classes de base. Au lieu de cela, il ne décrit que ceux nécessaires pour configurer une vue de base.

Compléter le laboratoire de programmation

Étape 1 : Créer une mise en page pour OverlayViewController

Créez un fichier nommé frameworks/base/packages/CarSystemUI/res/layout/codelab_layout.xml pour contenir les éléments suivants :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/codelab_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Code Lab View!"
            android:color="@*android:color/car_accent"
            android:textStyle="italic"
            android:textSize="34sp"/>
        <Button
            android:id="@+id/codelab_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Hide!"
            android:background="@*android:color/car_accent"/>
    </LinearLayout>
</FrameLayout>

Cette mise en page crée la vue suivante :

OverlayViewController
Figure 1. OverlayViewController

Étape 2 : Ajouter un ViewStub à SysUIOverlayWindow

Ajoutez la vue à votre fenêtre en ajoutant un ViewStub au SystemUIOverlayWindow .

Ajoutez le code suivant à frameworks/base/packages/CarSystemUI/res/layout/sysui_overlay_window.xml dans le FrameLayout racine :

<ViewStub android:id="@+id/codelab_stub"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout="@layout/codelab_layout"/>

L'ordre dans lequel les ViewStubs sont définis dans le FrameLayout racine définit l'ordre Z des vues dans la fenêtre. Étant donné que cet atelier de programmation n'implique pas la superposition de vues, vous pouvez ajouter l'extrait de code n'importe où dans le FrameLayout racine.

Étape 3 : Créer un OverlayViewController

Pour être affichée et masquée, la nouvelle mise en page doit être liée à un OverlayViewController .

Pour créer un OverlayViewController injectable nommé frameworks/base/packages/CarSystemUI/src/com/android/systemui/car/codelab/CodeLabViewController.java avec le contenu suivant :

package com.android.systemui.car.codelab;

import com.android.systemui.R;
import com.android.systemui.car.window.OverlayViewController;
import com.android.systemui.car.window.OverlayViewGlobalStateController;
import com.android.systemui.dagger.SysUISingleton;

import javax.inject.Singleton;

@SysUISingleton
public class CodeLabViewController extends OverlayViewController {

    @Inject
    public CodeLabViewController(
            OverlayViewGlobalStateController overlayViewGlobalStateController) {
        super(R.id.codelab_stub, overlayViewGlobalStateController);
    }
}

Étape 4 : créer un OverlayViewMediator

Un OverlayViewMediator à déclencher lorsqu'une nouvelle vue est affichée ou masquée est requis.

Créez un nouveau OverlayViewMediator injectable nommé frameworks/base/packages/CarSystemUI/src/com/android/systemui/car/codelab/CodeLabViewMediator.java avec le contenu suivant :
package com.android.systemui.car.codelab;

import android.bluetooth.BluetoothAdapter; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter;
import com.android.systemui.car.window.OverlayViewMediator; import com.android.systemui.dagger.SysUISingleton;
import javax.inject.Inject;
@SysUISingleton public class CodeLabViewMediator implements OverlayViewMediator { Context mContext; CodeLabViewController mCodeLabViewController;
@Inject public CodeLabViewMediator(Context context, CodeLabViewController codeLabViewController) { mContext = context; mCodeLabViewController = codeLabViewController; }
@Override public void registerListeners() { // no-op }
@Override public void setupOverlayContentViewControllers() { // no-op } }

Étape 5 : Afficher la vue

Pour faciliter la compréhension et déclencher notre vue, utilisez Bluetooth lorsque l'état est désactivé.

Remplacez // no-op dans CodeLabViewMediator#registerListeners par ce qui suit :

// Register Show Listener
mContext.registerReceiver(new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        final String action = intent.getAction();

if (action.equals(BluetoothAdapter.ACTION_STATE_CHANGED)) { final int state = intent.getIntExtra(BluetoothAdapter.EXTRA_STATE, BluetoothAdapter.ERROR); switch (state) { case BluetoothAdapter.STATE_OFF: // Show OverlayViewController mCodeLabViewController.start(); break; } } } }, new IntentFilter(BluetoothAdapter.ACTION_STATE_CHANGED));

Étape 6 : Masquer la vue

La vue sera masquée lorsque le bouton "Masquer !" bouton est cliqué. Étant donné que cette action ne s'applique qu'au bouton de la vue gonflée, ajoutez-la directement à votre OverlayViewController .

Ajoutez la méthode suivante à CodeLabViewController :

@Override
protected void onFinishInflate() {
    getLayout().findViewById(R.id.codelab_button).setOnClickListener(v -> {
        stop();
    });
}

Étape 7 : Configurez le nouveau OverlayViewMediator

  1. Pour ajouter le nouveau OverlayViewMediator à OverlayWindowModule, ajoutez le code suivant à OverlayWindowModule :
    /** Injects CodeLabViewMediator. */
    @Binds
    @IntoMap
    @ClassKey(CodeLabViewMediator.class)
    public abstract OverlayViewMediator bindCodeLabViewMediator(
            CodeLabViewMediator overlayViewsMediator);
    
  2. Pour ajouter le nouveau OverlayViewMediator à config_carSystemUIOverlayViewsMediators, ajoutez la ligne suivante à config_carSystemUIOverlayViewsMediators dans frameworks/base/packages/CarSystemUI/res/values/config.xml :
    <item>com.android.systemui.car.codelab.CodeLabViewMediator</item>
    

Résultat

Toutes nos félicitations! Vous avez créé une vue dans SystemUIOverlayWindow :

SystemUIOverlayWindow
Figure 2. Fenêtre SystemUIOverlay

Ressources additionnelles

Pour en savoir plus, consultez les ressources fournies ci-dessous.

Exemple de OverlayViewController

Voir le sélecteur d'utilisateur plein écran comme une application simple de SystemUIOverlayWindow: :

Autres contrôleurs OverlayView

OverlayPanelViewController

Un OverlayPanelViewController est utilisé pour fournir une animation de glissement de base lors de l'affichage et du masquage des vues dans SystemUIOverlayWindow . Consultez le panneau de notification pour en savoir plus :