사용자 구성 정의

UserConfigurations를 사용하면 사용자가 선택할 수 있는 옵션을 만들 수 있습니다. 선택한 값을 기반으로 시계 화면 요소의 모양을 조정할 수 있습니다.

사용자 구성 옵션은 다음 중 하나일 수 있습니다.

  • BooleanConfiguration: 사용자가 요소를 표시할지 여부를 선택하거나 두 스타일 중에서 선택할 수 있는 경우에 일반적으로 사용됩니다.
  • ListConfiguration: 사용자에게 다양한 옵션을 제공합니다. 예를 들어 시계 모드에 선택할 수 있는 배경 이미지가 4개 있는 경우
  • ColorConfiguration: 사용자가 원하는 테마를 선택할 수 있는 색상 테마를 정의합니다.

불리언 옵션

불리언 옵션은 사용자 구성 중 가장 간단한 옵션일 것입니다. 다음과 같이 정의할 수 있습니다.

<!-- Under WatchFace element -->
<UserConfigurations>
    <!-- show_date and show_date_label defined in res/values/strings.xml -->
    <BooleanConfiguration id="show_date"
        displayName="show_date_label"
        screenReaderText="show_date_label"
        defaultValue="TRUE"
        />
</UserConfigurations>

그러면 불리언 옵션을 두 가지 방법으로 사용할 수 있습니다.

  1. 시계 화면 Scene 내에서 BooleanConfiguration 구조를 사용합니다.

    <!-- Within the main Scene of the watch face -->
    <BooleanConfiguration id="show_date">
        <BooleanOption id="TRUE">
            <!-- ...Content when date required -->
        </BooleanOption>
        <BooleanOption id="FALSE">
            <!-- ...Content when date not required -->
        </BooleanOption>
    </BooleanConfiguration>

    구성 옵션은 사용 시 중첩될 수 없습니다.

  2. 또는 구성 옵션을 표현식에서 사용할 수 있습니다.

        <Expressions>
            <Expression name="my_expression">
                <!-- Use show_date as part of a more complex evaluation -->
                <![CDATA[[CONFIGURATION.show_date] == "TRUE" && [HOUR_0_23] < 15]]
            </Expression>
        </Expressions>
        <Compare expression="my_expression">
            <!-- Content goes here -->
        </Compare>
    </Condition>

목록 옵션

목록 옵션은 불리언 옵션과 매우 유사한 방식으로 작동합니다. 예를 들어 사용자가 선택할 수 있는 배경 이미지 목록을 제공하려면 다음을 실행하세요.

<!-- Under WatchFace element -->
<UserConfigurations>
    <ListConfiguration id="background_image" displayName="background_image_label"
        icon="background_option_icon"
        screenReaderText="background_image_label" defaultValue="0">
        <ListOption id="0" displayName="background0_image_label"
            screenReaderText="background0_image_label" icon="background0_icon" />
        <ListOption id="1" displayName="background1_image_label"
            screenReaderText="background1_image_label" icon="background1_icon" />
        ...
    </ListConfiguration>
</UserConfigurations>

불리언 옵션과 마찬가지로 이 옵션을 사용하는 방법에는 두 가지가 있습니다.

  1. Scene에서 ListConfiguration 요소 사용:

    <!-- Within the main Scene of the watch face -->
    <ListConfiguration id="background_image">
        <ListOption id="0">
            <!-- ...Content for option 0 -->
        </ListOption>
        <ListOption id="1">
            <!-- ...Content for option 1 -->
        </ListOption>
    </ListConfiguration>

  2. 또는 더 복잡한 표현식에서 구성 옵션을 사용할 수 있습니다.

        <Expressions>
            <Expression name="background_zero_and_something_else">
                <!-- Use as part of a more complex evaluation -->
                <![CDATA[[CONFIGURATION.background_image] == "0" && [HOUR_0_23] < 15]]
            </Expression>
        </Expressions>
        <Compare expression="background_zero_and_something_else">
            <!-- Content goes here -->
        </Compare>
    </Condition>

색상 테마

워치 페이스 형식을 사용하면 ColorConfiguration를 통해 색상 테마를 정의할 수 있습니다. 사용자는 시계 화면 편집기에서 원하는 테마를 선택할 수 있으며 이 테마의 색상은 시계 화면 정의 전체에 표시될 수 있습니다.

예를 들어 테마에 항목 2개와 색상 3개가 있는 테마를 정의하려면 다음과 같이 ColorConfiguration를 정의합니다.

<!-- Under WatchFace element -->
<UserConfigurations>
    <ColorConfiguration id="myThemeColor" displayName="theme_label" defaultValue="0">
        <ColorOption id="0" displayName="relaxed_label" colors="#3083dc #f8ffe5 #7dde92" />
        <ColorOption id="1" displayName="urban_label" colors="#f4b393 #fc60a8 #7a28cb" />
    </ColorConfiguration>
</UserConfigurations>

그런 다음 이러한 값을 16진수 색상 값 대신 데이터 소스로 사용할 수 있습니다. 테마의 첫 번째, 두 번째 또는 세 번째 요소를 선택하기 위해 색인 값이 어떻게 지정되는지 확인하세요.

<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"
        tintColor="[CONFIGURATION.myThemeColor.0]"/>
    <MinuteHand resource="minute" x="222" y="30" width="16" height="220"
        pivotX="0.5" pivotY="0.9"
        tintColor="[CONFIGURATION.myThemeColor.1]"/>
    <SecondHand resource="second" x="226" y="20" width="8" height="245"
        pivotX="0.5" pivotY="0.8571"
        tintColor="[CONFIGURATION.myThemeColor.2]"/>
</AnalogClock>

ColorOption에 정의된 색상이 하나만 있는 특정 경우에는 색인을 사용하지 않고 CONFIGURATION.myThemeColor로 참조할 수도 있습니다. 그러면 사용자가 시계 화면 편집기에서 원하는 테마 항목을 선택할 수 있습니다.

참고: 버전 2 이상의 시계 화면 형식에서 스타일이 지원됩니다.

UserConfigurations는 사용자에게 많은 유연성을 제공하지만 정의하는 구성 요소의 수를 늘리면 조합의 수가 압도적으로 늘어날 수 있습니다.

Flavors를 사용하면 강조할 만한 UserConfigurations사전 설정을 정의할 수 있습니다.

그러면 사용자는 호환 앱 내에서 이러한 사전 설정된 맛을 선택하거나 각 구성 값을 개별적으로 선택할 수 있습니다.

예를 들어 다음 세 가지 설정을 정의하는 시계 화면을 고려해 보세요.

  1. 사용자가 적용할 색상 테마를 선택할 수 있도록 하는 색상 테마 구성입니다. 다채로운 테마와 흑백 테마 두 가지를 정의했습니다.
  2. 배경 목록입니다. 사용자가 선택할 수 있는 두 가지 선택사항을 정의했습니다.
  3. 워치 페이스에 사용자의 심박수를 표시할지 여부를 선택합니다.

또한 시계 화면에 ComplicationSlot가 표시됩니다.

사용자에게 강조할 Flavors가 두 개 있다고 가정해 보겠습니다. 이러한 모든 설정의 가능한 조합은 훨씬 많지만 가장 적합하다고 생각되는 조합은 다음과 같습니다.

  1. 스포티한 맛: 다음으로 구성됩니다.
    1. 활력을 불어넣고 활동을 유도하는 밝은 색상 테마 (ID: 0)
    2. 첫 번째 배경 이미지 (ID: 0)
    3. 참고용으로 시계 화면에 표시된 심박수
    4. 걸음 수를 표시하는 정보 표시 자리
  2. 세련된 맛: 다음으로 구성됩니다.
    1. 어떤 옷에도 어울리는 흑백 색상 테마 (ID: 1)
    2. 두 번째 배경 이미지 (ID: 1)
    3. 시계 화면에 심박수가 표시되지 않음
    4. 정보 표시 슬롯이 사용 설정되지 않음

watch_face_info.xml에서 맛을 사용 설정해야 하므로 watch_face_info.xml 파일의 FlavorsSupported 요소는 value="true"로 설정해야 합니다.

각 맛은 UserConfigurations 내에서 다음과 같이 정의됩니다.

<!-- Under UserConfigurations -->
<Flavors defaultValue="sporty_flavor">
    <Flavor id="sporty_flavor"
        displayName="flavor_sporty_label" screenReaderText="flavor_sporty_label">
        <Configuration id="theme_color" optionId="0"/>
        <Configuration id="background_image" optionId="0"/>
        <Configuration id="show_hr" optionId="TRUE"/>
        <ComplicationSlot slotId="0">
            <DefaultProviderPolicy
                defaultSystemProvider="STEP_COUNT"
                defaultSystemProviderType="SHORT_TEXT"/>
        </ComplicationSlot>
    </Flavor>
    <Flavor id="sophisticated_flavor"
        displayName="flavor_sophisticated_label" screenReaderText="flavor_sophisticated_label">
        <Configuration id="theme_color" optionId="1"/>
        <Configuration id="background_image" optionId="1"/>
        <Configuration id="show_hr" optionId="FALSE"/>
        <ComplicationSlot slotId="0">
            <!--
              Type here is set to empty to demonstrate how to hide a complication
              slot in Flavors.
            -->
            <DefaultProviderPolicy
                defaultSystemProvider="SUNRISE_SUNSET"
                defaultSystemProviderType="EMPTY"/>
        </ComplicationSlot>
    </Flavor>
</Flavors>