Zamanı temsil etmelidir.

Bir kadranın birincil işlevi zamanı göstermektir. Saat Kadranı Formatı, AnalogClock ve DigitalClock öğelerini kullanarak hem analog hem de dijital saatler oluşturmanıza olanak tanır.

Dijital saatler

Kadranınızdaki Scene DigitalClock ve TimeText öğeleri kullanılarak basit bir dijital saat tanımlanabilir:

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

format özelliği, saat, dakika ve saniye kombinasyonu kullanılarak zamanın nasıl temsil edileceğini kontrol etmenize olanak tanır. Kullanılan Saat Kadranı Formatı sürümüne bağlı olarak seçenekler değişiklik gösterir. 2. sürüm, buradaki seçenekleri genişletir.

Önceki örnekte, Yazı tipi, sistem yazı tipini kullanacak şekilde ayarlanmıştır.

Dünyanın diğer yerlerindeki saati (ör. dünya saati) göstermek de yararlı olabilir. Bunu Localization öğesi aracılığıyla yapabilirsiniz:

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

Analog saatler

Analog saat oluşturmak için AnalogClock öğesini kullanın. HourHand, MinuteHand ve SecondHand alt öğelerinin her biri, oluşturmada kullanılması gereken kaynağı belirtir:

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

Pivot noktasını belirtin

Saat, dakika ve saniye kaynaklarının her biri zaman ilerledikçe döndürülür ancak her birinin etrafında döneceği doğru noktayı belirtmek önemlidir.

Bazı durumlarda, dönme noktası elin tam alt kısmında değil, yatay olarak ortadadır. Bu, aşağıdaki durumlarda <HourHand … pivotY="(pivot_ratio)" /> olarak belirtilmelidir:

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

Kol saati ibrelerini renklendirme

Kullanıcının kadranın görünümünü özelleştirmesine izin vermek için kadran ibrelerinin yapılandırılabilir bir renge sahip olması yaygındır.

Bunu yapmanın bir yolu, her elin tintColor simgesini kullanarak her eli ayrı ayrı renklendirmek veya AnalogClock simgesini kullanarak tüm elleri aynı renge boyamaktır.

Kullanıcıların belirli renkleri tonlamasına izin vermenin yanı sıra, kullanıcının şunları seçmesine izin vermek için tintColor için bir yapılandırma seçeneği sağlayabilirsiniz:

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

Gölge

Gerçekçi bir kol saati ibresinin etkisi için her ibrenin arkasında gölge kullanmak derinlik hissi verebilir. Bunu yapmak için her el türünden iki tane kullanın, birini diğerinin arkasına yerleştirin ve gölge için ayrı bir kaynak sağlayın:

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

Yüz süslemeleri

Analog kadranlarda genellikle kadranın etrafında saat veya dakikaları gösteren süslemeler bulunur. Bunu başarmak için iki yaklaşım vardır:

  1. Önceden çizilmiş kadranınızı içeren tam ekran bir arka plan resmi ekleyin. Resimlerle çalışma başlıklı makaleyi inceleyin.

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

  2. Ayrı süslemeler çizin ve bunları döndürme özelliğini kullanarak yüzün etrafına yerleştirin.

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