نشان دهنده زمان

کار اصلی یک صفحه ساعت نشان دادن زمان است و فرمت Watch Face به شما امکان می دهد با استفاده از عناصر 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 Hand منبعی را که باید در رندر استفاده شود مشخص می کند:

<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)" /> مشخص شود که در آن:

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

عقربه های ساعت را رنگ آمیزی کنید

برای اینکه کاربر بتواند ظاهر صفحه ساعت را سفارشی کند، معمولاً یک رنگ قابل تنظیم برای عقربه های ساعت وجود دارد.

یک راه برای رسیدن به این هدف این است که از طریق 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>