वॉच फ़ेस का मुख्य काम समय दिखाना है. Watch Face Format की मदद से, AnalogClock और DigitalClock एलिमेंट का इस्तेमाल करके, ऐनालॉग और डिजिटल, दोनों तरह की घड़ियां बनाई जा सकती हैं.
डिजिटल क्लॉक
वॉच फ़ेस Scene में DigitalClock और TimeText एलिमेंट का इस्तेमाल करके, एक सामान्य डिजिटल घड़ी को इस तरह से तय किया जा सकता है:
<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>
format एट्रिब्यूट की मदद से, यह कंट्रोल किया जा सकता है कि घंटे, मिनट, और सेकंड के कॉम्बिनेशन का इस्तेमाल करके समय को कैसे दिखाया जाए. इस्तेमाल किए जा रहे Watch Face Format के वर्शन के हिसाब से, विकल्प अलग-अलग होते हैं. वर्शन 2 में, यहां दिए गए विकल्पों को बढ़ाया गया है.
ऊपर दिए गए उदाहरण में, Font को सिस्टम फ़ॉन्ट का इस्तेमाल करने के लिए सेट किया गया है.
इसका इस्तेमाल दुनिया की अन्य जगहों का समय दिखाने के लिए भी किया जा सकता है. उदाहरण के लिए, विश्व घड़ी. इसे 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>
ऐनालॉग घड़ियां
ऐनलॉग घड़ी बनाने के लिए, AnalogClock एलिमेंट का इस्तेमाल करें. HourHand, MinuteHand और SecondHand चाइल्ड एलिमेंट में से हर एक, उस संसाधन के बारे में बताता है जिसका इस्तेमाल रेंडरिंग में किया जाना चाहिए:
<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>
पिवट पॉइंट तय करना
समय के साथ-साथ, घंटे, मिनट, और सेकंड के हर संसाधन को घुमाया जाता है. हालांकि, यह ज़रूरी है कि उस सही पॉइंट के बारे में बताया जाए जिसके चारों ओर हर संसाधन को घुमाया जाना चाहिए.
कुछ स्थितियों में, पिवट पॉइंट हाथ के निचले हिस्से में नहीं होता. साथ ही, यह हॉरिज़ॉन्टल तौर पर बीच में होता है. इसे <HourHand …
pivotY="(pivot_ratio)" /> के तौर पर तय किया जाना चाहिए. यहां:
घड़ी की सुइयों में रंग भरना
उपयोगकर्ता को वॉच फ़ेस की स्टाइल को पसंद के मुताबिक बनाने की अनुमति देने के लिए, घड़ी की सुइयों के रंग को कॉन्फ़िगर किया जा सकता है.
इसके लिए, हर हाथ पर मौजूद tintColor का इस्तेमाल करके, हर हाथ को अलग-अलग रंग दिया जा सकता है. इसके अलावा, AnalogClock का इस्तेमाल करके, सभी हाथों को एक ही रंग दिया जा सकता है.
उपयोगकर्ताओं को कुछ रंगों को हल्का करने की सुविधा देने के साथ-साथ, tintColor को कॉन्फ़िगरेशन का विकल्प दिया जा सकता है. इससे उपयोगकर्ता, उदाहरण के लिए, AnalogClock एलिमेंट में tintColor="[CONFIGURATION.handColors.0] जोड़ सकता है.
ड्रॉप शैडो
घड़ी की सुइयों को असली जैसा दिखाने के लिए, हर सुई के पीछे ड्रॉप शैडो का इस्तेमाल किया जा सकता है. इससे सुइयों को गहराई मिलती है.
इसके लिए, एक ही AnalogClock में दोनों तरह के हाथों का इस्तेमाल करें. एक हाथ को दूसरे हाथ के पीछे रखें. साथ ही, जिस हाथ की परछाई दिखानी है उसके लिए अलग रिसॉर्स का इस्तेमाल करें.
चेहरे की सजावट
ऐनालॉग वॉच फ़ेस में अक्सर, घंटे या मिनट दिखाने वाले डेकोरेशन होते हैं. ऐसा करने के लिए, दो तरीके हैं:
इसमें पूरी स्क्रीन पर दिखने वाली बैकग्राउंड इमेज शामिल करें. इसमें पहले से बनाया गया वॉच फ़ेस होना चाहिए. इमेज इस्तेमाल करने का तरीका देखें.
<PartImage x="0" y="0" width="450" height="450"> <Image resource="watch_face_dial" /> </PartImage>
अलग-अलग डेकोरेशन बनाएं और उन्हें रोटेशन का इस्तेमाल करके, चेहरे के चारों ओर लगाएं.
<!-- 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 -->