تمثيل الوقت

إنّ الوظيفة الأساسية لخلفية شاشة الساعة هي عرض الوقت، ويتيح لك تنسيق خلفية شاشة الساعة إنشاء ساعات تناظرية ورقمية باستخدام العنصرَين AnalogClock وDigitalClock.

الساعات الرقمية

يمكن تحديد ساعة رقمية أساسية باستخدام العنصرَين DigitalClock وTimeText ضمن Scene خلفية شاشة الساعة على النحو التالي:

<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

تتيح لك السمة format التحكّم في كيفية تمثيل الوقت باستخدام مجموعة من الساعات والدقائق والثواني. تختلف الخيارات المحدّدة حسب إصدار Watch Face Format المستخدَم، ويوسّع الإصدار 2 الخيارات المتاحة هنا.

في المثال السابق، تم ضبط الخط لاستخدام خط النظام.

ويمكن أن يكون مفيدًا أيضًا لعرض الوقت في مواقع جغرافية أخرى حول العالم، مثل الساعة الدولية. يمكن تحقيق ذلك من خلال العنصر 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

الساعات التناظرية

لإنشاء ساعة عقارب، استخدِم العنصر 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>watchface_clocks.xml

تحديد نقطة الارتكاز

يتم تدوير كل من موارد الساعات والدقائق والثواني مع تقدّم الوقت، ولكن من المهم تحديد النقطة الصحيحة التي يجب أن يستند إليها كل مورد.

في بعض الحالات، لا تكون نقطة الارتكاز في أسفل اليد تمامًا، بل تكون في المنتصف أفقيًا. يجب تحديد ذلك على النحو <HourHand … pivotY="(pivot_ratio)" />، حيث:

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

تلوين عقارب الساعة

للسماح للمستخدم بتخصيص مظهر خلفية شاشة الساعة، من الشائع توفير لون قابل للإعداد لعقارب الساعة.

يمكن تحقيق ذلك من خلال النقر على tintColor في كل يد لتلوين كل يد بشكل منفصل، أو على AnalogClock لتلوين جميع الأيدي باللون نفسه.

بالإضافة إلى السماح للمستخدمين بتلوين ألوان معيّنة، يمكنك توفير خيار إعداد tintColor للسماح للمستخدم بالاختيار، مثلاً، إضافة tintColor="[CONFIGURATION.handColors.0] إلى العنصر AnalogClock.

تظليل القطرات

للحصول على تأثير واقعي لعقارب الساعة، يمكن استخدام ظل خلفي لكل عقرب لإضفاء مظهر ثلاثي الأبعاد.

لتحقيق ذلك، استخدِم نوعَين من كل يد ضمن AnalogClock واحدة، مع إزاحة إحداهما خلف الأخرى، واستخدِم مصدرًا منفصلاً لليد التي تمثّل الظل.

زخارف الوجه

تحتوي خلفيات الساعة التقليدية غالبًا على زخارف حول وجه الساعة تعرض الساعات أو الدقائق. لتحقيق ذلك، هناك طريقتان:

تضمين صورة خلفية بملء الشاشة تحتوي على خلفية ساعة مرسومة مسبقًا الاطّلاع على كيفية استخدام الصور
```
<PartImage x="0" y="0" width="450" height="450">
    <Image resource="watch_face_dial" />
</PartImage>watchface_clocks.xml
```

ارسموا زينة منفصلة وضعوها حول الوجه باستخدام عمليات التدوير.

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

تمثيل الوقت تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.