Zeit anzeigen

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 in der Scene-Datei des Zifferblatts definiert werden:

<DigitalClock x="125" y="50" 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>
watchface_clocks.xml

Mit dem Attribut format können Sie festlegen, wie die Zeit mit einer Kombination aus Stunden, Minuten und Sekunden dargestellt wird. Die genauen Optionen hängen von der verwendeten Version des Watch Face-Formats ab. In Version 2 sind mehr Optionen verfügbar.

Im vorherigen Beispiel ist Schriftart so festgelegt, dass die Systemschriftart verwendet wird.

Es kann auch nützlich sein, die Uhrzeit für andere Orte auf der Welt anzuzeigen, z. B. mit einer Weltuhr. Dies kann mit dem Element Localization erreicht werden:

<DigitalClock x="125" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    <!-- TimeText goes here -->
    <!-- START_EXCLUDE -->
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
    <!-- END_EXCLUDE -->
</DigitalClock>
watchface_clocks.xml

Analoguhr

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="450" height="450">
    <HourHand resource="hour" x="220" y="55" width="20" height="190"
        pivotX="0.5" pivotY="0.9210" />
    <MinuteHand resource="minute" x="222" y="30" width="16" height="220"
        pivotX="0.5" pivotY="0.9" />
    <SecondHand resource="second" x="226" y="20" width="8" height="245"
        pivotX="0.5" pivotY="0.8571" />
</AnalogClock>
watchface_clocks.xml

Drehpunkt angeben

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

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

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

Uhrzeiger farblich gestalten

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

Eine Möglichkeit, dies zu erreichen, ist die Verwendung von tintColor für jede Hand, um jede Hand separat zu tönen, oder von AnalogClock, um alle Hände in derselben Farbe zu tönen.

Sie können Nutzern nicht nur die Möglichkeit geben, bestimmte Farben zu tönen, sondern auch eine Konfigurationsoption für tintColor bereitstellen, damit Nutzer beispielsweise tintColor="[CONFIGURATION.handColors.0] zum AnalogClock-Element hinzufügen können.

Schlagschatten

Um einen realistischen Zeigereffekt zu erzielen, können Sie hinter jedem Zeiger einen Schlagschatten einfügen, um einen Tiefeneffekt zu erzeugen.

Verwenden Sie dazu zwei Hände desselben Typs in einem einzelnen AnalogClock-Tag, wobei eine hinter der anderen versetzt ist, und verwenden Sie eine separate Ressource für die Hand, die den Schatten darstellt.

Gesichtsverzierungen

Analoge Zifferblätter haben oft Verzierungen, die die Stunden oder Minuten anzeigen. Dafür gibt es zwei Möglichkeiten:

  1. Fügen Sie ein Vollbild-Hintergrundbild mit dem von Ihnen vorgezeichneten Zifferblatt ein. Weitere Informationen

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

  2. Zeichne separate Dekorationen und positioniere sie mithilfe von Drehungen um das Gesicht.

    <!-- Content for the "12" -->
<Group x="200" y="0" width="50" height="450">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[12]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- Content for the "1" -->
<Group x="200" y="0" width="50" height="450" angle="30">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[1]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- etc -->
    watchface_clocks.xml