Reprezentowanie czasu

Głównym zadaniem tarczy zegarka jest wyświetlanie czasu. Format tarczy zegarka umożliwia tworzenie zegarów analogowych i cyfrowych za pomocą elementów AnalogClock i DigitalClock.

Zegary cyfrowe

Podstawowy zegar cyfrowy można zdefiniować za pomocą elementu DigitalClock i TimeText w ramach tarczy zegarka Scene:

<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

Atrybut format umożliwia kontrolowanie sposobu przedstawiania czasu za pomocą kombinacji godzin, minut i sekund. Dokładne opcje różnią się w zależności od używanej wersji formatu tarczy zegarka. Wersja 2 rozszerza dostępne opcje.

W poprzednim przykładzie Czcionka jest ustawiona na czcionkę systemową.

Może też być przydatny do wyświetlania czasu w innych miejscach na świecie, np. w zegarze światowym. Można to osiągnąć za pomocą elementu Localization:

<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

Zegary analogowe

Aby utworzyć zegar analogowy, użyj elementu AnalogClock. Każdy z elementów podrzędnych HourHand, MinuteHand i SecondHand określa zasób, który ma być używany podczas renderowania:

<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

Określanie punktu obrotu

Każdy z elementów godziny, minuty i sekundy obraca się wraz z upływem czasu, ale ważne jest, aby określić prawidłowy punkt, wokół którego każdy z nich powinien się obracać.

W niektórych sytuacjach punkt obrotu nie znajduje się na samym dole dłoni, ale jest wyśrodkowany w poziomie. Należy podać wartość <HourHand … pivotY="(pivot_ratio)" />, gdzie:

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

Kolorowanie wskazówek zegarka

Aby umożliwić użytkownikowi dostosowanie wyglądu tarczy zegarka, często stosuje się konfigurowalny kolor wskazówek.

Możesz to zrobić, klikając tintColor na każdej dłoni, aby osobno zmienić jej odcień, lub klikając AnalogClock, aby zmienić odcień wszystkich dłoni na ten sam kolor.

Oprócz umożliwienia użytkownikom przyciemniania określonych kolorów możesz podać opcję konfiguracji elementu tintColor, aby umożliwić użytkownikowi wybór, np. dodanie elementu tintColor="[CONFIGURATION.handColors.0] do elementu AnalogClock.

Z cieniem

Aby uzyskać realistyczny efekt wskazówek zegarka, możesz użyć cienia za każdą z nich, co da wrażenie głębi.

Aby to osiągnąć, użyj 2 elementów każdego typu dłoni w ramach jednego AnalogClock, przesuwając jeden za drugi, i użyj osobnego zasobu dla dłoni, która reprezentuje cień.

Dekoracje na twarz

Tarcze analogowe często mają dekoracje wokół tarczy pokazujące godziny lub minuty. Możesz to zrobić na 2 sposoby:

  1. Dołącz obraz tła na pełnym ekranie, który zawiera wstępnie narysowaną tarczę zegarka. Zobacz pracę z obrazami

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

  2. Narysuj oddzielne dekoracje i umieść je wokół twarzy, obracając je.

    <!-- 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