نمایانگر زمان باشد

وظیفه اصلی صفحه ساعت نمایش زمان است و «قالب صفحه ساعت» به شما امکان می‌دهد بااستفاده از عناصر 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>

بااستفاده از ترکیبی از ساعت، دقیقه، و ثانیه، ویژگی 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>

ساعت‌های آنالوگ

برای ایجاد ساعت آنالوگ، از عنصر 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)" /> مشخص شود که در آن:

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

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