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

وظیفه اصلی یک صفحه ساعت نمایش زمان است و قالب صفحه ساعت به شما امکان می‌دهد با استفاده از عناصر 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 به شما امکان می‌دهد نحوه نمایش زمان را با استفاده از ترکیبی از ساعت، دقیقه و ثانیه کنترل کنید. گزینه‌های دقیق بسته به نسخه قالب ساعت مورد استفاده متفاوت است؛ نسخه ۲ گزینه‌ها را در اینجا گسترش می‌دهد.

در مثال قبلی، فونت طوری تنظیم شده است که از فونت سیستم استفاده کند.

همچنین می‌تواند برای نمایش زمان سایر مکان‌های جهان، مثلاً ساعت جهانی ، مفید باشد. این کار را می‌توان از طریق عنصر 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 استفاده کنید، به طوری که یکی پشت دیگری قرار گیرد و از یک منبع جداگانه برای عقربه‌ای که نمایانگر سایه است استفاده کنید.

تزئینات صورت

صفحه ساعت‌های آنالوگ اغلب دارای تزئیناتی در اطراف صفحه هستند که ساعت یا دقیقه را نشان می‌دهند. برای رسیدن به این هدف، دو رویکرد وجود دارد:

  1. یک تصویر پس‌زمینه تمام‌صفحه که شامل صفحه ساعت از پیش طراحی‌شده شما باشد، قرار دهید. به بخش کار با تصاویر مراجعه کنید . 

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

  2. تزئینات جداگانه بکشید و با استفاده از چرخش، آنها را در اطراف صورت قرار دهید. 

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