ייצוג הזמן

התפקיד העיקרי של תצוגת שעון הוא להציג את השעה, ו-Watch Face Format מאפשר ליצור שעונים אנלוגיים ודיגיטליים באמצעות הרכיבים 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 מאפשר לקבוע איך הזמן יוצג באמצעות שילוב של שעות, דקות ושניות. האפשרויות הספציפיות משתנות בהתאם לגרסה של Watch Face Format שבה אתם משתמשים. בגרסה 2 יש יותר אפשרויות.

בדוגמה הקודמת, Font מוגדר להשתמש בגופן המערכת.

כדאי גם להציג את השעה במיקומים אחרים בעולם, למשל שעון עולמי. אפשר לעשות זאת באמצעות האלמנט 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)" />, כאשר:

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