시간을 나타냅니다.

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

디지털 시계

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

<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 속성을 사용하면 시, 분, 초의 조합을 사용하여 시간을 표시하는 방법을 제어할 수 있습니다. 정확한 옵션은 사용 중인 워치 페이스 형식 버전에 따라 다릅니다. 버전 2에서는 여기의 옵션이 확장됩니다.

위의 예에서는 글꼴이 시스템 글꼴을 사용하도록 설정되어 있습니다.

세계 시계와 같이 전 세계 다른 지역의 시간을 표시하는 데도 유용합니다. 이는 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에 구성 옵션을 제공하여 사용자가 예를 들어 AnalogClock 요소에 tintColor="[CONFIGURATION.handColors.0]을 추가하도록 선택할 수 있습니다.

그림자

시계 바늘 효과를 사실적으로 표현하려면 각 바늘 뒤에 그림자를 사용하면 깊이감을 줄 수 있습니다.

이렇게 하려면 단일 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