Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android Wear
Code

Erstellen eines Android Wear Ziffernblatt für Uhren

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Eine der Funktionen, die Android so besonders macht, ist die Möglichkeit, jeden Aspekt der Benutzererfahrung anzupassen.  Als Android Wear erstmals auf der Google I/O 2014 eingeführt wurde, stellten viele Entwickler und Nutzer fest, dass es für smarte Uhren nicht genau zutrifft, da die offizielle API zum Erstellen von Ziffernblättern auffällig fehlte.  Angesichts der Tatsache, dass die Möglichkeit zum Erstellen von benutzerdefinierten Ziffernblättern eine der wichtigsten Anforderungen der Benutzer war, ist es nicht verwunderlich, dass Entwickler eine Methode zum Erstellen ihrer eigenen Ziffernblätter mit einem undokumentierten Hack in Android Wear gefunden haben.

Zum Glück ließ Google schnell alle wissen, dass eine offizielle API auf dem Weg war und im Dezember 2014 wurde diese API schließlich für die Entwicklungsgemeinschaft freigegeben.  In diesem Artikel erfahren Sie mehr über die offizielle Uhr-Ziffernblättern API für Android Wear und implementieren ein einfaches digitales Ziffernblatt, das Sie für Ihre eigenen Bedürfnisse erweitern können.  Das Implementieren von Überwachungsflächen kann etwas ausführlich sein, aber Sie finden die Beispielanwendung für diesen Artikel auf GitHub.

1. Einrichten Ihrer IDE

Das erste, was Sie tun müssen, um Ihr eigenes Zifferblatt zu erstellen, ist, Ihr Projekt in Android Studio einzurichten.  Wählen Sie beim Erstellen Ihres Projekts Telefon und Tablet mit einem Minimum-SDK für API 18 aus, da Android 4.3 die niedrigste Version des Betriebssystems ist, um gebündelte Android Wear-Anwendungen zu unterstützen.  Sie müssen auch die Wear-Box mit einem ausgewählten Minimum SDK von API 21 überprüfen.  Sie sehen ein Beispiel dafür, wie Ihr Bildschirm für Android-Zielgeräte aussehen sollte.

Wenn Sie zu den beiden Bildschirmen Aktivität hinzufügen gelangen, wählen Sie für beide Bildschirme die Option Keine Aktivität hinzufügen aus.

Sobald Sie auf Fertig stellen klicken, sollte Ihre Projektumgebung ein Modul für Mobilgeräte und ein weiteres für den Wear erstellen.

2. Aufbau des Wear-Uhr-Dienst

Android Wear implementiert Uhr-Zifferblatt mithilfe von WatchFaceService.  In diesem Artikel erstellen Sie eine Erweiterung der CanvasWatchFaceService-Klasse, bei der es sich um eine Implementierung von WatchFaceService handelt, die auch einen Canvas-Bereich zum Ausblenden des Zifferblatts bereitstellt.  Beginnen Sie mit dem Erstellen einer neuen Java-Klasse unter dem Wear-Modul in Android Studio, das CanvasWatchFaceService erweitert.

Sobald Sie Ihre Klasse haben, müssen Sie eine innere Klasse, WatchFaceEngine in den Quelldateien dieses Artikels erstellen, die Engine erweitert.  Das ist die Überwachungs-Engine, die Systemereignisse verarbeitet, z. B. wenn der Bildschirm ausgeschaltet wird oder in den Umgebungsmodus wechselt.

Wenn sich Ihr Stubcode für WatchFaceEngine befindet, gehen Sie zurück zur äußeren Klasse und überschreiben Sie die onCreateEngine-Methode, um Ihre neue innere Klasse zurückzugeben.  Dadurch wird Ihr Uhr-Zifferblatt-Dienst mit dem Code verknüpft, der die Anzeige steuert.

Sobald Sie die Uhren-Ziffernblätter zusammengefügt haben, können Sie die allgemeinen Verwaltungsaufgaben zur Aktualisierung Ihrer AndroidManifest-Dateien ausführen, damit Ihr Dienst von Android Wear erkannt werden kann.  Denken Sie daran, dass Ihr aktueller Code noch nichts tun wird.  Wir werden zu dieser Klasse zurückkehren und die Engine  nach einer gewissen Projektarbeit wieder fit machen.

3. Aktualisieren der AndroidManifest-Dateien

Öffnen Sie die Datei AndroidManifest.xml im Wear-Modul.  Ganz oben sollte schon eine Zeile stehen, die sagt:

Unterhalb dieser Zeile müssen wir die zwei erforderlichen Berechtigungen für ein Ziffernblatt hinzufügen.  Diese Anforderungen sind:

Sobald Ihre Berechtigungen festgelegt sind, müssen Sie einen Knoten für Ihren Dienst im application-Knoten mit der Berechtigung zu BIND_WALLPAPER hinzufügen, ein paar Sätze von meta-data, die Referenzbilder Ihres Zifferblattes für den Auswahlbildschirm enthalten (in diesem Beispiel sind wir) Verwenden Sie einfach das Launcher-Symbol) und einen intent-filter, damit das System weiß, dass Ihr Dienst zur Anzeige eines Zifferblatts gedacht ist.

Sobald Ihr Wear-Manifest abgeschlossen ist, müssen Sie die Datei AndroidManifest.xml im Mobil-Modul öffnen und die zwei Berechtigungen hinzufügen, die wir im Wear-Modul für PROVIDE_BACKGROUND und WAKE_LOCK verwendet haben, da Android Wear sowohl die Wear- als auch die Mobil-Modulanforderung erfordert die gleichen Berechtigungen für die APK, die auf der Uhr eines Benutzers installiert werden sollen.  Sobald beide Manifestdateien ausgefüllt sind, können Sie zu CustomWatchFaceService.java zurückkehren, um mit der Implementierung der Engine zu beginnen.

4. Starten Sie Ihre Engine

Das Engine-Objekt, das mit Ihrem Dienst verknüpft ist, ist das, was Ihr Zifferblatt antreibt.  Es behandelt Timer, zeigt Ihre Benutzeroberfläche an, wechselt in den Umgebungsmodus und ruft Informationen über die Anzeige der physischen Uhr ab.  Kurz gesagt, hier findet die Magie statt.

Schritt 1: Definieren notwendiger Werte und Variablen

Das erste, was Sie tun möchten, ist eine Reihe von Membervariablen in Ihrer Engine zu implementieren, um Gerätezustände, Timer-Intervalle und Attribute für Ihre Anzeige zu verfolgen.

Wie Sie sehen können, definieren wir das TypeFace, das wir für unseren digitalen Uhrtext sowie die Hintergrund- und Textfarbe des Zifferblattes verwenden werden.  Das Time-Objekt wird verwendet, um, wie Sie es erraten haben, die aktuelle Gerätezeit zu verfolgen.  mUpdateRateMs wird verwendet, um einen Timer zu steuern, den wir implementieren müssen, um unser Uhr-Zifferblatt jede Sekunde zu aktualisieren (daher der 1000-Millisekunden-Wert für mUpdateRateMs), da der Standard-WatchFaceService nur die Zeit in Schritten von einer Minute verfolgt.  mXOffset und mYOffset werden definiert, sobald der Motor die physikalische Form der Uhr kennt, so dass unser Zifferblatt gezeichnet werden kann, ohne sich zu nahe an der oberen oder linken Seite des Bildschirms zu befinden oder durch eine abgerundete Ecke abgeschnitten zu werden.  Die drei booleschen Werte werden verwendet, um verschiedene Geräte- und Anwendungszustände zu verfolgen.

Das nächste Objekt, das Sie definieren müssen, ist ein Sendung-Empfänger, der die Situation behandelt, in der ein Benutzer reisen kann, und Zeitzonen ändern kann.  Dieser Empfänger löscht einfach die gespeicherte Zeitzone und setzt die Anzeigezeit zurück.

Nachdem Ihr Empfänger definiert wurde, ist das letzte Objekt, das Sie an der Spitze Ihrer Engine erstellen müssen, ein Handler, der sich jede Sekunde um die Aktualisierung Ihres Uhr-Zifferblatts kümmert.  Das ist aufgrund der oben beschriebenen Einschränkungen von WatchFaceService erforderlich.  Wenn Ihr eigenes Zifferblatt nur jede Minute aktualisiert werden muss, können Sie diesen Abschnitt ignorieren.

Die Implementierung des Handler ist ziemlich einfach.  Es prüft zuerst die Nachrichten-ID.  Wenn MSG_UPDATE_TIME_ID übereinstimmt, wird die aktuelle Ansicht für das Neuzeichnen weiterhin ungültig gemacht.  Nachdem die Ansicht ungültig gemacht wurde, prüft der Handler, ob der Bildschirm sichtbar und nicht im Umgebungsmodus ist.  Wenn es sichtbar ist, sendet es eine Wiederholungsanforderung eine Sekunde später.  Der Grund, warum wir nur die Aktion im Handler wiederholen, wenn das Zifferblatt sichtbar und nicht im Umgebungsmodus ist, ist, dass es ein wenig Akku-intensiv sein kann, um jede Sekunde aktualisiert zu werden.  Wenn der Benutzer nicht auf den Bildschirm schaut, greifen wir einfach auf die WatchFaceService-Implementierung zurück, die jede Minute aktualisiert wird.

Schritt 2: Initialisieren der Engine

Jetzt, da Ihre Variablen und Objekte deklariert sind, ist es an der Zeit, das Zifferblatt zu initialisieren.  Engine verfügt über eine onCreate-Methode, die zum Erstellen von Objekten und anderen Aufgaben verwendet werden sollte, die viel Zeit und Akku benötigen.  Sie möchten hier auch ein paar Flags für den WatchFaceStyle setzen, um zu steuern, wie das System mit dem Benutzer interagiert, wenn Ihr Zifferblatt aktiv ist.

Für die Beispiel-App verwenden Sie setWatchFaceStyle, um den Hintergrund Ihrer Benachrichtigungskarten so einzustellen, dass kurz angezeigt wird, ob der Kartentyp als unterbrechungsfrei eingestellt ist.  Sie stellen auch den Peek-Modus ein, so dass Benachrichtigungskarten nur so viel Platz benötigen wie nötig.

Schließlich möchten Sie dem System mitteilen, dass es die Standardzeit nicht anzeigt, da Sie es selbst anzeigen.  Das sind nur einige der verfügbaren Optionen. Weitere Informationen finden Sie in der offiziellen Dokumentation des WatchFaceStyle.Builder-Objekts.

Nachdem Ihr WatchFaceStyle festgelegt wurde, können Sie mDisplayTime als neues Time-Objekt initialisieren.

initBackground und initDisplayText ordnen die zwei Paint-Objekte zu, die Sie oben in der Engine definiert haben.  Der Hintergrund und der Text werden dann farblich festgelegt und der Text wird mit Schriftart und Schriftgröße festgelegt, während gleichzeitig das Anti-Aliasing aktiviert wird.

Schritt 3: Umgang des Gerätestatus

Als Nächstes müssen Sie verschiedene Methoden der Engine-Klasse implementieren, die durch Änderungen am Gerätezustand ausgelöst werden.  Wir beginnen mit der Methode onVisibilityChanged, die aufgerufen wird, wenn der Benutzer das Zifferblatt verdeckt oder anzeigt.

Wenn diese Methode aufgerufen wird, prüft sie, ob das Zifferblatt sichtbar ist oder nicht.  Wenn das Zifferblatt sichtbar ist, wird überprüft, ob der BroadcastReceiver, den Sie oben in der Engine definiert haben, registriert ist.  Ist dies nicht der Fall, erstellt die Methode einen IntentFilter für die Aktion ACTION_TIMEZONE_CHANGED und registriert den BroadcastReceiver, um auf ihn zu warten.

Wenn das Zifferblatt nicht sichtbar ist, überprüft diese Methode, ob der BroadcastReceiver nicht registriert werden kann.  Sobald der BroadcastReceiver behandelt wurde, wird updateTimer aufgerufen, um das Watchface ungültig zu machen und das Watchface neu zu zeichnen.  updateTimer beendet alle Handler-Aktionen, die ausstehen, und überprüft, ob ein anderer gesendet werden soll.

Schritt 4: Zusammenarbeit mit der tragbaren Hardware

Wenn Ihr Dienst mit Android Wear verknüpft ist, wird onApplyWindowInsets aufgerufen.  Das wird verwendet, um festzustellen, ob das Gerät, auf dem das Zifferblatt läuft, gerundet oder quadriert ist.  Auf diese Weise können Sie das Zifferblatt so ändern, dass es der Hardware entspricht.

Wenn diese Methode in der Beispielanwendung aufgerufen wird, überprüft diese Methode einfach die Geräteform und ändert den x-Versatz, der zum Zeichnen des Zifferblattes verwendet wird, um sicherzustellen, dass das Zifferblatt auf dem Gerät sichtbar ist.

Die nächste zu überwindende Methode ist onPropertiesChanged.  Diese Methode wird aufgerufen, wenn die Hardware-Eigenschaften für das Wear-Gerät ermittelt werden, z. B. wenn das Gerät Burn-In-Schutz oder Low-Bit-Umgebungsmodus unterstützt. 

Bei dieser Methode prüfen Sie, ob diese Attribute auf das Gerät angewendet werden, auf dem das Uhr-Ziffernblatt ausgeführt wird, und speichern sie in einer Membervariablen, die oben in der Engine definiert ist.

Schritt 5: Einsparung der Batterie in den Modi Ambient und Muted

Nachdem Sie die anfänglichen Gerätezustände behandelt haben, sollten Sie onAmbientModeChanged und onInterruptionFilterChanged implementieren.  Wie der Name schon andeutet, wird onAmbientModeChanged aufgerufen, wenn das Gerät in den Umgebungsmodus wechselt oder aus ihm entfernt.

Wenn sich das Gerät im Umgebungsmodus befindet, sollten Sie die Farbe des Ziffernblatts schwarz auf weiß ändern, um auf die Batterie des Benutzers achten zu können.  Wenn das Gerät aus dem Umgebungsmodus zurückkehrt, können Sie die Farben des Zifferblattes zurücksetzen.  Sie sollten auch auf Anti-Aliasing für Geräte achten, die Low-Bit-Ambient-Unterstützung anfordern.  Nachdem alle Flag-Variablen festgelegt wurden, können Sie das Watchface auf Ungültigkeit und Neuzeichnen setzen und dann prüfen, ob der Ein-Sekunden-Timer gestartet werden soll.


onInterruptionFilterChanged wird aufgerufen, wenn der Benutzer die Unterbrechungseinstellungen auf seinem Wearable manuell ändert.  In diesem Fall müssen Sie überprüfen, ob das Gerät stummgeschaltet ist, und dann die Benutzeroberfläche entsprechend ändern.  In diesem Fall ändern Sie die Transparenz Ihres Zifferblatts, stellen Sie Ihren Handler so ein, dass er nur jede Minute aktualisiert, wenn das Gerät stummgeschaltet ist, und zeichnen Sie dann Ihr Zifferblatt neu.

Wenn sich Ihr Gerät im Umgebungsmodus befindet, wird der Handler-Timer deaktiviert.  Ihr Uhrbild kann weiterhin jede Minute mit der aktuellen Uhrzeit aktualisiert werden, indem die integrierte onTimeTick-Methode zum Ungültigmachen des Canvas-Bereichs verwendet wird.

Schritt 6: Zeichnen Sie das Zifferblatt

Sobald alle Ihre Eventualitäten abgedeckt sind, ist es Zeit, endlich Ihr Zifferblatt auszustrecken.  CanvasWatchFaceService verwendet ein Standard-Canvas-Objekt. Daher müssen Sie OnDraw zu Ihrer Engine hinzufügen und das Zifferblatt manuell zeichnen.

In diesem Tutorial werden wir einfach eine Textdarstellung der Zeit zeichnen, obwohl Sie Ihr onDraw ändern könnten, um ein analoges Zifferblatt zu unterstützen.  Bei dieser Methode möchten Sie sicherstellen, dass Sie die korrekte Uhrzeit anzeigen, indem Sie Ihr Time-Objekt aktualisieren, und dann können Sie Ihr Uhrgesicht anwenden.

drawBackground wendet eine Volltonfarbe auf den Hintergrund des Wear-Geräts an.

drawTimeText erstellt jedoch den Zeittext, der mithilfe einiger Hilfsmethoden angezeigt wird, und wendet ihn dann auf die Zeichenfläche an den X- und Y-Offsetpunkten an, die Sie in onApplyWindowInsets definiert haben.

Schlussfolgerung

Sobald Sie die Methoden zum Zeichnen Ihres Zifferblatts implementiert haben, sollten Sie alle grundlegenden Kenntnisse haben, die Sie benötigen, um Ihre eigenen Zifferblätter zu erstellen.  Das Schöne an Android Wear-Uhr-Zifferblättern ist, dass es nur die Oberfläche dessen meißelt, was möglich ist.

Sie können Companion-Konfigurationsaktivitäten auf der Uhr oder auf dem Telefon hinzufügen, das Canvas-basierte Watchface durch eine OpenGL-Implementierung ersetzen oder Ihre eigene Klasse von WatchFaceService ableiten, um Ihre Anforderungen zu erfüllen.

Fügen Sie hinzu, dass Sie auf andere APIs oder Informationen vom Telefon des Benutzers zugreifen können und die Möglichkeiten scheinen endlos.  Werden Sie kreativ mit Ihren Zifferblatt und genießen Sie.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.