Zeit anzeigen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Die Hauptaufgabe eines Zifferblatts besteht darin, die Uhrzeit anzuzeigen. Mit dem Watch Face-Format können Sie sowohl analoge als auch digitale Uhren mit den Elementen AnalogClock und DigitalClock erstellen.

Digitaluhren

Eine einfache digitale Uhr kann mit den Elementen DigitalClock und TimeText im Zifferblatt Scene definiert werden:

<DigitalClock x="100" y="100" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>

Mit dem Attribut format können Sie festlegen, wie die Uhrzeit dargestellt wird. Dazu wird eine Kombination aus Stunden, Minuten und Sekunden verwendet. Die genauen Optionen unterscheiden sich je nach Version des verwendeten Watch Face-Formats. In Version 2 sind mehr Optionen verfügbar.

Im vorherigen Beispiel ist für Schrift die Systemschriftart festgelegt.

Es kann auch nützlich sein, die Uhrzeit für andere Orte auf der Welt anzuzeigen, z. B. mit einer Weltuhr. Das ist mit dem Element Localization möglich:

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

Analoge Uhren

Verwenden Sie das Element AnalogClock, um eine analoge Uhr zu erstellen. Jedes der untergeordneten Elemente HourHand, MinuteHand und SecondHand gibt die Ressource an, die beim Rendern verwendet werden soll:

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

Drehpunkt angeben

Die Ressourcen für Stunden, Minuten und Sekunden werden im Laufe der Zeit gedreht. Es ist jedoch wichtig, den richtigen Punkt anzugeben, um den sich die einzelnen Ressourcen drehen sollen.

In einigen Fällen befindet sich der Drehpunkt nicht ganz unten an der Hand, sondern ist horizontal zentriert. Dieser sollte als <HourHand … pivotY="(pivot_ratio)" /> angegeben werden, wobei:

Farbe der Zeiger festlegen

Damit Nutzer das Erscheinungsbild des Zifferblatts anpassen können, ist es üblich, eine konfigurierbare Farbe für die Zeiger zu haben.

Dazu können Sie die tintColor auf den einzelnen Händen verwenden, um jede Hand einzeln einzufärben, oder die AnalogClock, um alle Hände in derselben Farbe einzufärben.

Sie können Nutzern nicht nur erlauben, bestimmte Farben zu färben, sondern auch eine Konfigurationsoption für tintColor angeben, mit der Nutzer Folgendes auswählen können:

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

Schlagschatten

Für einen realistischen Effekt der Zeiger können Sie hinter jedem Zeiger einen Schatten hinzufügen, um den Eindruck von Tiefe zu erzeugen. Verwenden Sie dazu zwei Hände desselben Typs, verschieben Sie sie hintereinander und stellen Sie eine separate Ressource für den Schatten bereit:

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

Gesichtsverzierungen

Analoge Zifferblätter haben oft Verzierungen um das Zifferblatt herum, die die Stunden oder Minuten anzeigen. Dazu gibt es zwei Möglichkeiten:

1. Fügen Sie ein Vollbildhintergrundbild mit dem vorab gezeichneten Zifferblatt ein. Weitere Informationen zum Arbeiten mit Bildern

   <PartImage x="0" y="0" width="450" height="450" ...>
       <Image resource="watch_face_dial" />
   </PartImage>
   

2. Zeichnen Sie separate Verzierungen und positionieren Sie sie mithilfe von Drehungen um das Gesicht herum.

   <Group ... >
       <!-- Content for the "12" marker -->
   </Group>
   <Group pivotX="..." pivotY="..." angle="30">
       <!-- Content for the "1" marker -->
   </Group>