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

Atribut format memungkinkan Anda mengontrol cara waktu ditampilkan 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.

Fitur ini juga dapat berguna untuk menampilkan waktu di lokasi lain di dunia, misalnya jam dunia. Hal ini dapat dilakukan melalui elemen 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

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

Menentukan titik pivot

Setiap sumber daya jam, menit, dan detik diputar seiring berjalannya waktu, tetapi penting untuk menentukan titik yang benar di sekitar setiap sumber daya harus diputar.

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

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

Mewarnai jarum jam

Untuk mengizinkan pengguna menyesuaikan tampilan muka jam, biasanya ada warna yang dapat dikonfigurasi untuk jarum jam.

Salah satu cara untuk mencapainya adalah melalui tintColor di setiap tangan untuk mewarnai setiap tangan secara terpisah, atau di AnalogClock, untuk mewarnai semua tangan dengan warna yang sama.

Selain memungkinkan pengguna mewarnai warna tertentu, Anda dapat memberikan opsi konfigurasi ke tintColor untuk memungkinkan pengguna memilih, misalnya, menambahkan tintColor="[CONFIGURATION.handColors.0] ke elemen AnalogClock.

Bayangan jatuh

Untuk efek jarum jam yang realistis, menggunakan drop shadow di belakang setiap jarum jam dapat memberikan tampilan kedalaman.

Untuk mencapainya, gunakan dua jenis tangan dalam satu AnalogClock, dengan mengimbangi salah satunya di belakang yang lain, dan gunakan resource terpisah untuk tangan yang merepresentasikan bayangan.

Dekorasi wajah

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

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

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

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

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