تمثيل الوقت

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

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

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

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

<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 التحكّم في كيفية عرض الوقت باستخدام مزيج من الساعات والدقائق والثواني. تختلف الخيارات الدقيقة تبعًا لإصدار تنسيق خلفية شاشة الساعة المستخدَم، ويوسّع الإصدار 2 الخيارات هنا.

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

قد يكون من المفيد أيضًا عرض الوقت في مواقع جغرافية أخرى في العالم، مثلاً ساعة عالمية. ويمكن تحقيق ذلك من خلال عنصر Localization:

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

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

لإنشاء ساعة عادية، استخدِم العنصر AnalogClock. يحدّد كلّ من العنصرَين الفرعيين HourHand, MinuteHand وSecondHand المورد الذي يجب استخدامه في العرض:

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

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

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

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

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

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

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

بالإضافة إلى السماح للمستخدمين بتظليل ألوان معيّنة، يمكنك تقديم خيار ضبط لعنصر tintColor للسماح للمستخدم باختيار ما يلي:

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

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

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

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

زينة الوجه

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

1. يجب تضمين صورة خلفية بملء الشاشة تحتوي على خلفية شاشة الساعة المرسومة مسبقًا. الاطّلاع على كيفية استخدام الصور

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

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

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