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ą elementów DigitalClock i TimeText w tarczy zegarka Scene:

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

Atrybut format umożliwia określenie, jak czas ma być reprezentowany za pomocą kombinacji godzin, minut i sekund. Dokładne opcje różnią się w zależności od wersji Formatu tarczy zegarka. Wersja 2 zawiera więcej opcji.

W poprzednim przykładzie Czcionka jest ustawiona na użycie czcionki systemowej.

Możesz też wyświetlać czas w innych miejscach na świecie, na przykład za pomocą zegara światowego. Można to zrobić za pomocą elementu Localization:

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

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órego należy użyć podczas renderowania:

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

Określanie punktu obrotu

Każdy z zasobów godzin, minut i sekund jest obracany wraz z upływem czasu, ale ważne jest, aby określić prawidłowy punkt, wokół którego mają się one obracać.

W niektórych sytuacjach punkt obrotu nie znajduje się dokładnie na dole dłoni, lecz jest wyśrodkowany poziomo. Należy go określić jako <HourHand … pivotY="(pivot_ratio)" />, gdzie:

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

Kolorowanie wskazówek

Aby umożliwić użytkownikowi dostosowanie wyglądu tarczy zegarka, można skonfigurować kolor wskazówek.

Aby to zrobić, możesz użyć opcji tintColor dla każdej ręki, aby zabarwić każdą z nich osobno, lub opcji AnalogClock, aby zabarwić wszystkie ręce na ten sam kolor.

Oprócz umożliwienia użytkownikom przyciemniania określonych kolorów możesz też udostępnić opcję konfiguracji tintColor, aby umożliwić użytkownikowi wybranie:

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

Z cieniem

Aby uzyskać realistyczny efekt wskazówek zegara, możesz użyć cienia za każdą z nich, co nada wrażenie głębi. Aby to zrobić, użyj dwóch dłoni tego samego typu, przesuwając jedną za drugą i dostarcz oddzielny zasób dla cienia:

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

Dekoracje twarzy

Tarcze analogowe często mają ozdoby na obwodzie, które wskazują godziny lub minuty. W tym celu możesz zastosować 2 metody:

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

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

  2. Narysuj oddzielne ozdobienia i ustaw je wokół twarzy, używając funkcji obrotu.

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