Partager via

Création d’un cadran de montre

  • Article

Ce guide explique comment implémenter un service personnalisé de visage de montre pour Android Wear 1.0. Des instructions pas à pas sont fournies pour créer un service de visage numérique supprimé, suivi d’un code supplémentaire pour créer un visage de montre de style analogique.

Vue d’ensemble

Dans cette procédure pas à pas, un service de visage de montre de base est créé pour illustrer les éléments essentiels de la création d’un visage de montre Android Wear 1.0 personnalisé. Le service de visage de montre initiale affiche une montre numérique simple qui affiche l’heure actuelle en heures et en minutes :

Capture d’écran montrant le visage de montre numérique initial.

Une fois que ce visage de montre numérique est développé et testé, plus de code est ajouté pour le mettre à niveau vers un visage de montre analogique plus sophistiqué avec trois mains :

Capture d’écran montrant le dernier visage de montre analogique.

Les services de visage espion sont regroupés et installés dans le cadre d’une application Wear 1.0. Dans les exemples suivants, MainActivity rien de plus que le code du modèle d’application Wear 1.0 afin que le service visage espion puisse être empaqueté et déployé sur la montre intelligente dans le cadre de l’application. En effet, cette application servira uniquement de véhicule pour l’obtention du service visage espion chargé dans l’appareil Wear 1.0 (ou émulateur) pour le débogage et le test.

Spécifications

Pour implémenter un service de visage espion, les éléments suivants sont requis :

Bien qu’Android 5.0 soit le niveau d’API minimal pour l’implémentation d’un service de visage espion, Android 5.1 ou version ultérieure est recommandé. Les appareils Android Wear exécutant Android 5.1 (API 22) ou ultérieur permettent aux applications Wear de contrôler ce qui s’affiche sur l’écran pendant que l’appareil est en mode ambiant à faible puissance. Lorsque l’appareil quitte le mode ambiant à faible alimentation, il est en mode interactif. Pour plus d’informations sur ces modes, consultez Conservation de votre application visible.

Démarrer un projet d’application

Créez un projet Android Wear 1.0 appelé WatchFace (pour plus d’informations sur la création de projets Xamarin.Android, voir Hello, Android) :

Définissez le nom du package sur com.xamarin.watchface:

En outre, faites défiler vers le bas et activez Internet et WAKE_LOCK autorisations :

Autorisations requises

Ensuite, téléchargez preview.png : cela sera ajouté au dossier dessinables plus loin dans cette procédure pas à pas.

Ajouter le package Xamarin.Android Wear

Démarrez le Gestionnaire de package NuGet (dans Visual Studio, cliquez avec le bouton droit sur Références dans le Explorateur de solutions, puis sélectionnez Gérer les packages NuGet ...). Mettez à jour le projet vers la dernière version stable de Xamarin.Android.Wear :

Ajouter nuGet Gestionnaire de package

Ensuite, si Xamarin.Android.Support.v13 est installé, désinstallez-le :

Suppression de nuGet Gestionnaire de package

Générez et exécutez l’application sur un appareil ou un émulateur Wear (pour plus d’informations sur la procédure à suivre, consultez le guide de prise en main ). L’écran d’application suivant doit s’afficher sur l’appareil Wear :

Capture d’écran de l’application

À ce stade, l’application Wear de base n’a pas de fonctionnalité de visage espion, car elle ne fournit pas encore d’implémentation de service de visage espion. Ce service sera ajouté ensuite.

CanvasWatchFaceService

Android Wear implémente des visages espions via la CanvasWatchFaceService classe. CanvasWatchFaceService est dérivé de WatchFaceService, qui lui-même est dérivé comme WallpaperService indiqué dans le diagramme suivant :

Diagramme d’héritage

CanvasWatchFaceService inclut un imbriqué CanvasWatchFaceService.Engine; il instancie un CanvasWatchFaceService.Engine objet qui effectue le travail réel de dessin du visage de montre. CanvasWatchFaceService.Engine est dérivé de WallpaperService.Engine tel qu’illustré dans le diagramme ci-dessus.

Non illustré dans ce diagramme est une Canvas utilisation qui CanvasWatchFaceService permet de dessiner le visage de montre : elle Canvas est transmise par le biais de la OnDraw méthode décrite ci-dessous.

Dans les sections suivantes, un service de visage espion personnalisé est créé en procédant comme suit :

  1. Définissez une classe appelée MyWatchFaceService dérivée de CanvasWatchFaceService.

  2. Dans MyWatchFaceService, créez une classe imbriquée appelée MyWatchFaceEngine dérivée de CanvasWatchFaceService.Engine.

  3. Dans MyWatchFaceService, implémentez une CreateEngine méthode qui instancie MyWatchFaceEngine et la retourne.

  4. Dans MyWatchFaceEngine, implémentez la OnCreate méthode pour créer le style de visage espion et effectuer d’autres tâches d’initialisation.

  5. Implémentez la OnDraw méthode de MyWatchFaceEngine. Cette méthode est appelée chaque fois que le visage de la montre doit être redessiné (c’est-à-dire invalidé). OnDraw est la méthode qui dessine (et redessine) des éléments de visage de montre tels que l’heure, la minute et les secondes mains.

  6. Implémentez la OnTimeTick méthode de MyWatchFaceEngine. OnTimeTick est appelé au moins une fois par minute (dans les modes ambiants et interactifs) ou lorsque la date/heure a changé.

Pour plus d’informations sur , consultez la documentation de CanvasWatchFaceServicel’API Android CanvasWatchFaceService . De même, CanvasWatchFaceService.Engine explique l’implémentation réelle du visage espion.

Ajouter CanvasWatchFaceService

Ajoutez un nouveau fichier appelé MyWatchFaceService.cs (dans Visual Studio, cliquez avec le bouton droit sur WatchFace dans le Explorateur de solutions, cliquez sur Ajouter > un nouvel élément..., puis sélectionnez Classe).

Remplacez le contenu de ce fichier par le code suivant :

using System;
using Android.Views;
using Android.Support.Wearable.Watchface;
using Android.Service.Wallpaper;
using Android.Graphics;

namespace WatchFace
{
    class MyWatchFaceService : CanvasWatchFaceService
    {
        public override WallpaperService.Engine OnCreateEngine()
        {
            return new MyWatchFaceEngine(this);
        }

        public class MyWatchFaceEngine : CanvasWatchFaceService.Engine
        {
            CanvasWatchFaceService owner;
            public MyWatchFaceEngine (CanvasWatchFaceService owner) : base(owner)
            {
                this.owner = owner;
            }
        }
    }
}

MyWatchFaceService (dérivé de CanvasWatchFaceService) est le « programme principal » du visage de montre. MyWatchFaceService implémente une seule méthode, OnCreateEnginequi instancie et retourne un MyWatchFaceEngine objet (MyWatchFaceEngine est dérivé de CanvasWatchFaceService.Engine). L’objet instancié MyWatchFaceEngine doit être retourné en tant que WallpaperService.Engine. L’objet encapsulant MyWatchFaceService est passé dans le constructeur.

MyWatchFaceEngine est l’implémentation réelle du visage espion : il contient le code qui dessine le visage espion. Il gère également les événements système tels que les modifications d’écran (modes ambiant/interactif, désactivation de l’écran, etc.).

Implémenter la méthode Engine OnCreate

La OnCreate méthode initialise le visage espion. Ajoutez le champ suivant à MyWatchFaceEngine:

Paint hoursPaint;

Cet Paint objet sera utilisé pour dessiner l’heure actuelle sur le visage de montre. Ensuite, ajoutez la méthode suivante à MyWatchFaceEngine:

public override void OnCreate(ISurfaceHolder holder)
{
    base.OnCreate (holder);

    SetWatchFaceStyle (new WatchFaceStyle.Builder(owner)
        .SetCardPeekMode (WatchFaceStyle.PeekModeShort)
        .SetBackgroundVisibility (WatchFaceStyle.BackgroundVisibilityInterruptive)
        .SetShowSystemUiTime (false)
        .Build ());

    hoursPaint = new Paint();
    hoursPaint.Color = Color.White;
    hoursPaint.TextSize = 48f;
}

OnCreate est appelé peu après MyWatchFaceEngine le démarrage. Il configure le WatchFaceStyle (qui contrôle la façon dont l’appareil Wear interagit avec l’utilisateur) et instancie l’objet Paint qui sera utilisé pour afficher l’heure.

L’appel pour SetWatchFaceStyle effectuer les opérations suivantes :

  1. Définit le mode PeekModeShortaperçu sur , ce qui entraîne l’affichage des notifications sous forme de petits « aperçus » carte s sur l’affichage.

  2. Définit la visibilité Interruptiveen arrière-plan sur , ce qui entraîne l’affichage de l’arrière-plan d’un aperçu carte uniquement s’il représente une notification d’interruption.

  3. Désactive l’heure par défaut de l’interface utilisateur système d’être dessinée sur le visage de la montre afin que le visage de montre personnalisé puisse afficher l’heure à la place.

Pour plus d’informations sur ces options de style de visage et d’autres montres, consultez la documentation de l’API Android WatchFaceStyle.Builder .

Une fois SetWatchFaceStyle terminé, OnCreate instancie l’objet Paint (hoursPaint) et définit sa couleur sur blanc et sa taille de texte sur 48 pixels (TextSize doit être spécifié en pixels).

Implémenter la méthode Engine OnDraw

La OnDraw méthode est peut-être la méthode la plus importante CanvasWatchFaceService.Engine  : il s’agit de la méthode qui dessine réellement des éléments de visage espion tels que des chiffres et des mains de visage d’horloge. Dans l’exemple suivant, il dessine une chaîne de temps sur le visage de montre. Ajoutez la méthode suivante à MyWatchFaceEngine :

public override void OnDraw (Canvas canvas, Rect frame)
{
    var str = DateTime.Now.ToString ("h:mm tt");
    canvas.DrawText (str,
        (float)(frame.Left + 70),
        (float)(frame.Top  + 80), hoursPaint);
}

Quand Android appelle OnDraw, il passe dans une Canvas instance et les limites dans lesquelles le visage peut être dessiné. Dans l’exemple de code ci-dessus, DateTime est utilisé pour calculer l’heure actuelle en heures et en minutes (au format 12 heures). La chaîne de temps résultante est dessinée sur le canevas à l’aide de la Canvas.DrawText méthode. La chaîne s’affiche à 70 pixels du bord gauche et 80 pixels vers le bas du bord supérieur.

Pour plus d’informations sur la OnDraw méthode, consultez la documentation de l’API Android onDraw .

Implémenter la méthode Engine OnTimeTick

Android appelle régulièrement la OnTimeTick méthode pour mettre à jour l’heure affichée par le visage espion. Il est appelé au moins une fois par minute (dans les modes ambiants et interactifs) ou lorsque la date/heure ou le fuseau horaire ont changé. Ajoutez la méthode suivante à MyWatchFaceEngine :

public override void OnTimeTick()
{
    Invalidate();
}

Cette implémentation d’appels OnTimeTick Invalidatesimples . La Invalidate méthode planifie de redessiner OnDraw le visage de la montre.

Pour plus d’informations sur la OnTimeTick méthode, consultez la documentation de l’API Android onTimeTick .

Inscrire canvasWatchFaceService

MyWatchFaceService doit être inscrit dans le AndroidManifest.xml de l’application Wear associée. Pour ce faire, ajoutez le code XML suivant à la <application> section :

<service
    android:name="watchface.MyWatchFaceService"
    android:label="Xamarin Sample"
    android:allowEmbedded="true"
    android:taskAffinity=""
    android:permission="android.permission.BIND_WALLPAPER">
    <meta-data
        android:name="android.service.wallpaper"
        android:resource="@xml/watch_face" />
    <meta-data
        android:name="com.google.android.wearable.watchface.preview"
        android:resource="@drawable/preview" />
    <intent-filter>
        <action android:name="android.service.wallpaper.WallpaperService" />
        <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />
    </intent-filter>
</service>

Ce code XML effectue les opérations suivantes :

  1. Définit l’autorisation android.permission.BIND_WALLPAPER . Cette autorisation donne l’autorisation du service visage espion pour modifier le papier peint système sur l’appareil. Notez que cette autorisation doit être définie dans la <service> section plutôt que dans la section externe <application> .

  2. Définit une watch_face ressource. Cette ressource est un fichier XML court qui déclare une wallpaper ressource (ce fichier sera créé dans la section suivante).

  3. Déclare une image dessinable appelée preview qui sera affichée par l’écran de sélection du sélecteur de montres.

  4. Inclut un intent-filter élément permettant d’indiquer à Android qu’il MyWatchFaceService affichera un visage de montre.

Cela termine le code de l’exemple de base WatchFace . L’étape suivante consiste à ajouter les ressources nécessaires.

Ajouter des fichiers de ressources

Avant de pouvoir exécuter le service espion, vous devez ajouter la ressource watch_face et l’image d’aperçu. Tout d’abord, créez un fichier XML sur Resources/xml/watch_face.xml et remplacez son contenu par le code XML suivant :

<?xml version="1.0" encoding="UTF-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />

Définissez l’action de génération de ce fichier sur AndroidResource :

Ce fichier de ressources définit un élément simple wallpaper qui sera utilisé pour le visage espion.

Si vous ne l’avez pas encore fait, téléchargez preview.png. Installez-le sur Resources/drawable/preview.png. Veillez à ajouter ce fichier au WatchFace projet. Cette image d’aperçu s’affiche à l’utilisateur dans le sélecteur de visages de montre sur l’appareil Wear. Pour créer une image d’aperçu pour votre propre visage de montre, vous pouvez prendre une capture d’écran de la montre pendant son exécution. (Pour plus d’informations sur l’obtention de captures d’écran à partir d’appareils Wear, consultez Captures d’écran).

Essayez !

Générez et déployez l’application sur l’appareil Wear. L’écran de l’application Wear doit apparaître comme avant. Procédez comme suit pour activer le nouveau visage de montre :

  1. Balayez vers la droite jusqu’à ce que vous voyiez l’arrière-plan de l’écran de surveillance.

  2. Touchez et maintenez la touche enfoncée n’importe où sur l’arrière-plan de l’écran pendant deux secondes.

  3. Balayez de gauche à droite pour parcourir les différents visages de montre.

  4. Sélectionnez l’exemple de visage de montre Xamarin (affiché à droite) :

    Sélecteur d’images espions

  5. Appuyez sur l’exemple de montre Xamarin pour le sélectionner.

Cela modifie le visage de montre de l’appareil Wear pour utiliser le service de visage de montre personnalisé implémenté jusqu’à présent :

Capture d’écran montrant une montre numérique personnalisée en cours d’exécution sur l’appareil Wear.

Il s’agit d’un visage de montre relativement brut, car l’implémentation de l’application est si minimale (par exemple, elle n’inclut pas d’arrière-plan du visage de montre et n’appelle Paint pas de méthodes anti-alias pour améliorer l’apparence). Toutefois, il implémente les fonctionnalités nues requises pour créer un visage de montre personnalisé.

Dans la section suivante, cette montre sera mise à niveau vers une implémentation plus sophistiquée.

Mise à niveau du visage espion

Dans le reste de cette procédure pas à pas, MyWatchFaceService est mis à niveau pour afficher un visage de montre de style analogique et il est étendu pour prendre en charge davantage de fonctionnalités. Les fonctionnalités suivantes seront ajoutées pour créer le visage espion mis à niveau :

  1. Indique l’heure avec l’heure analogique, la minute et les secondes mains.

  2. Réagit aux modifications apportées à la visibilité.

  3. Répond aux modifications entre le mode ambiant et le mode interactif.

  4. Lit les propriétés de l’appareil wear sous-jacent.

  5. Met automatiquement à jour l’heure à laquelle un changement de fuseau horaire a lieu.

Avant d’implémenter les modifications de code ci-dessous, téléchargez drawable.zip, décompressez-le et déplacez les fichiers .png décompressés vers les ressources/dessinables (remplacez le preview.png précédent). Ajoutez les nouveaux fichiers .png au WatchFace projet.

Fonctionnalités du moteur de mise à jour

L’étape suivante consiste à mettre à niveau MyWatchFaceService.cs à une implémentation qui dessine un visage de montre analogique et prend en charge de nouvelles fonctionnalités. Remplacez le contenu de MyWatchFaceService.cs par la version analogique du code du visage espion dans MyWatchFaceService.cs (vous pouvez couper et coller cette source dans le MyWatchFaceService.cs existant).

Cette version de MyWatchFaceService.cs ajoute davantage de code aux méthodes existantes et inclut des méthodes substituées supplémentaires pour ajouter d’autres fonctionnalités. Les sections suivantes fournissent une visite guidée du code source.

OnCreate

La méthode OnCreate mise à jour configure le style de visage espion comme précédemment, mais inclut quelques étapes supplémentaires :

  1. Définit l’image d’arrière-plan sur la ressource xamarin_background qui réside dans Resources/drawable-hdpi/xamarin_background.png.

  2. Initialise les Paint objets pour dessiner la main d’heure, la main minute et la seconde main.

  3. Initialise un Paint objet pour dessiner les cycles horaires autour du bord du visage de la montre.

  4. Crée un minuteur qui appelle la Invalidate méthode (redessiner) afin que la deuxième main soit redessinée toutes les secondes. Notez que ce minuteur est nécessaire, car OnTimeTick les appels Invalidate ne sont qu’une seule fois par minute.

Cet exemple inclut une seule image xamarin_background.png . Toutefois, vous pouvez créer une image d’arrière-plan différente pour chaque densité d’écran prise en charge par votre visage de montre personnalisé.

OnDraw

La méthode OnDraw mise à jour dessine un visage de montre de style analogique à l’aide des étapes suivantes :

  1. Obtient l’heure actuelle, qui est maintenant conservée dans un time objet.

  2. Détermine les limites de la surface de dessin et de son centre.

  3. Dessine l’arrière-plan, mis à l’échelle pour s’adapter à l’appareil lorsque l’arrière-plan est dessiné.

  4. Dessine douze cycles autour du visage de l’horloge (correspondant aux heures sur le visage de l’horloge).

  5. Calcule l’angle, la rotation et la longueur de chaque montre.

  6. Dessine chaque main sur la surface de la montre. Notez que la seconde main n’est pas dessinée si la montre est en mode ambiant.

OnPropertiesChanged

Cette méthode est appelée pour informer MyWatchFaceEngine les propriétés de l’appareil Wear (par exemple, le mode ambiant faible et la protection des brûlures). Dans MyWatchFaceEnginecette méthode, cette méthode n’case activée que pour le mode ambiant faible (en mode ambiant bit faible, l’écran prend en charge moins de bits pour chaque couleur).

Pour plus d’informations sur cette méthode, consultez la documentation de l’API Android onPropertiesChanged .

OnAmbientModeChanged

Cette méthode est appelée lorsque l’appareil Wear entre ou quitte le mode ambiant. Dans l’implémentation MyWatchFaceEngine , le visage espion désactive l’anticrénelage lorsqu’il est en mode ambiant.

Pour plus d’informations sur cette méthode, consultez la documentation de l’API Android onAmbientModeChanged .

OnVisibilityChanged

Cette méthode est appelée chaque fois que la montre devient visible ou masquée. Dans MyWatchFaceEngine, cette méthode inscrit/annule l’inscription du récepteur de fuseau horaire (décrit ci-dessous) en fonction de l’état de visibilité.

Pour plus d’informations sur cette méthode, consultez la documentation de l’API Android onVisibilityChanged .

Fonctionnalité de fuseau horaire

La nouvelle MyWatchFaceService.cs inclut également des fonctionnalités permettant de mettre à jour l’heure actuelle chaque fois que le fuseau horaire change (par exemple, lors du déplacement entre les fuseaux horaires). À la fin de MyWatchFaceService.cs, une modification BroadcastReceiver de fuseau horaire est définie qui gère les objets Intention modifiés par fuseau horaire :

public class TimeZoneReceiver: BroadcastReceiver
{
    public Action<Intent> Receive { get; set; }
    public override void OnReceive (Context context, Intent intent)
    {
        if (Receive != null)
            Receive (intent);
    }
}

Les RegisterTimezoneReceiver méthodes et UnregisterTimezoneReceiver les méthodes sont appelées par la OnVisibilityChanged méthode. UnregisterTimezoneReceiver est appelé lorsque l’état de visibilité du visage espion est remplacé par masqué. Lorsque le visage de montre est à nouveau visible, RegisterTimezoneReceiver est appelé (voir la OnVisibilityChanged méthode).

La méthode du moteur RegisterTimezoneReceiver déclare un gestionnaire pour l’événement du récepteur de Receive fuseau horaire ; ce gestionnaire met à jour l’objet time avec la nouvelle heure chaque fois qu’un fuseau horaire est croisé :

timeZoneReceiver = new TimeZoneReceiver ();
timeZoneReceiver.Receive = (intent) => {
    time.Clear (intent.GetStringExtra ("time-zone"));
    time.SetToNow ();
};

Un filtre d’intention est créé et inscrit pour le récepteur de fuseau horaire :

IntentFilter filter = new IntentFilter(Intent.ActionTimezoneChanged);
Application.Context.RegisterReceiver (timeZoneReceiver, filter);

La méthode annule l’inscription UnregisterTimezoneReceiver du récepteur de fuseau horaire :

Application.Context.UnregisterReceiver (timeZoneReceiver);

Exécuter le visage de montre amélioré

Générez et déployez à nouveau l’application sur l’appareil Wear. Sélectionnez le visage de montre dans le sélecteur de visages de montre comme avant. L’aperçu dans le sélecteur de montres s’affiche à gauche, et le nouveau visage de montre est affiché à droite :

Capture d’écran montrant un visage analogique amélioré dans le sélecteur et sur l’appareil.

Dans cette capture d’écran, la deuxième main se déplace une fois par seconde. Lorsque vous exécutez ce code sur un appareil Wear, la seconde main disparaît lorsque la montre entre en mode ambiant.

Résumé

Dans cette procédure pas à pas, une montre Android Wear 1.0 personnalisée a été implémentée et testée. Les CanvasWatchFaceService classes et CanvasWatchFaceService.Engine les classes ont été introduites, et les méthodes essentielles de la classe moteur ont été implémentées pour créer un simple visage de montre numérique. Cette implémentation a été mise à jour avec davantage de fonctionnalités pour créer un visage de montre analogique, et des méthodes supplémentaires ont été implémentées pour gérer les changements de visibilité, de mode ambiant et de différences dans les propriétés de l’appareil. Enfin, un récepteur de diffusion de fuseau horaire a été implémenté afin que la montre met automatiquement à jour l’heure à laquelle un fuseau horaire est croisé.