Merepresentasikan waktu

Tugas utama tampilan jam adalah menampilkan waktu, dan Format Tampilan Jam memungkinkan Anda membuat jam analog dan digital menggunakan elemen AnalogClock dan DigitalClock.

Jam digital

Jam digital dasar dapat ditentukan menggunakan elemen DigitalClock dan TimeText dalam Scene tampilan jam Anda:

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

Atribut format memungkinkan Anda mengontrol cara waktu direpresentasikan menggunakan kombinasi jam, menit, dan detik. Opsi yang tepat berbeda-beda, bergantung pada versi Format Tampilan Jam yang digunakan; versi 2 memperluas opsi di sini.

Pada contoh sebelumnya, Font disetel untuk menggunakan font sistem.

Hal ini juga berguna untuk menampilkan waktu di lokasi lain di dunia, misalnya jam dunia. Hal ini dapat dicapai melalui elemen Localization:

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

Jam analog

Untuk membuat jam analog, gunakan elemen AnalogClock. Setiap elemen turunan HourHand, MinuteHand dan SecondHand menentukan resource yang harus digunakan dalam rendering:

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

Menentukan titik pivot

Setiap resource jam, menit, dan detik diputar seiring waktu, tetapi penting untuk menentukan titik yang benar yang menjadi titik pivot setiap resource.

Dalam beberapa situasi, titik pivot tidak berada di bagian bawah tangan, dan dipusatkan secara horizontal. Ini harus ditentukan sebagai <HourHand … pivotY="(pivot_ratio)" /> dengan:

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

Mewarnai jarum jam

Agar pengguna dapat menyesuaikan tampilan tampilan jam, sebaiknya warna jarum jam dapat dikonfigurasi.

Cara untuk melakukannya adalah melalui tintColor di setiap tangan untuk menambahkan tint secara terpisah ke setiap tangan, atau di AnalogClock, untuk memberikan tint warna yang sama ke semua tangan.

Selain memungkinkan pengguna untuk mewarnai warna tertentu, Anda dapat menyediakan opsi konfigurasi ke tintColor untuk memungkinkan pengguna memilih:

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

Bayangan jatuh

Untuk efek jarum jam yang realistis, penggunaan bayangan jatuh di belakang setiap jarum dapat memberikan tampilan kedalaman. Untuk mencapainya, gunakan dua dari setiap jenis tangan, dengan memiringkan satu di belakang yang lain, menyediakan resource terpisah untuk bayangan:

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

Dekorasi wajah

Tampilan jam analog sering kali memiliki dekorasi di sekeliling tampilan yang menunjukkan jam atau menit. Untuk mencapai hal ini, ada dua pendekatan:

  1. Sertakan gambar latar layar penuh, yang berisi tampilan jam yang telah digambar sebelumnya. Lihat cara menggunakan gambar.

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

  2. Gambar dekorasi terpisah dan posisikan di sekitar wajah menggunakan rotasi.

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