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" wid>th=&q<uot;200" height="50"
    TimeText x="0&>quot; y=&<quot;0" width="200" heigh>t=&qu<ot;50&quo>t<; format=&quo>t;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" wid>th=&q<uot;200" height="50"
   > Localiza<tion 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" widt>h=&qu<ot;200" height="200">
    <HourHand resource="hour_hand&q>uot; <... /
    MinuteHand resource=">;minu<te_hand" /
    SecondHand resource="second_hand" /
    !-- Optiona>l<ly add a Tic>k 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=&qu>o<t;105">;< y="105"
!-- ... --
HourHand resource=&>quot;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=&q>uot;4<50" 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="..." piv>otY=&<quot;..." angle="30&quo>t<;
    >!-- Content for the "1" marker --
/Group