시간을 나타냅니다.

시계 화면의 기본 작업은 시간을 표시하는 것이며, 워치 페이스 형식을 사용하면 AnalogClock 및 DigitalClock 요소를 사용하여 아날로그 및 디지털 시계를 모두 만들 수 있습니다.

디지털 시계

시계 화면 Scene 내의 DigitalClock 및 TimeText 요소를 사용하여 기본 디지털시계를 정의할 수 있습니다.

<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에서는 여기에 옵션이 확장됩니다.

위 예에서 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>