사용자 구성 정의

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

사용자 구성 옵션은 다음과 같습니다.

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

불리언 옵션

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

<WatchFace ...>
  <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>
  ...
</WatchFace>

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

  1. 시계 화면 Scene 내에서 BooleanConfiguration 구조 사용:

    <Scene>
        <BooleanConfiguration id="show_date">
            <BooleanOption id="TRUE">
            <!-- ...Content to show date -->
            </BooleanOption>
            <BooleanOption id="FALSE">
            <!-- ...Content when date not required -->
            </BooleanOption>
        </BooleanConfiguration>
    </Scene>
    

    구성 옵션은 사용 시 중첩할 수 없으므로 다음은 유효하지 않습니다.

    <!-- Will not work -->
    <!-- <Scene>
      <BooleanConfiguration id="show_date">
        <BooleanOption id="TRUE">
          <BooleanConfiguration id="show_time">
            <BooleanOption id="TRUE">
              Content intended for when show_date and show_time both set to TRUE
            </BooleanOption>
          </BooleanConfiguration>
        </BooleanOption>
      </BooleanConfiguration>
    </Scene> -->
    
  2. 또는 구성 옵션을 표현식에 사용할 수 있습니다.

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

목록 옵션

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

<ListConfiguration id="bg_img" displayName="bg_img_lbl" icon="bg_img_ico"
    screenReaderText="bg_img_lbl" defaultValue="0">
  <ListOption id="0" displayName="bg0_lbl" screenReaderText="b0_lbl" icon="bg0_ico" />
  <ListOption id="1" displayName="bg1_lbl" screenReaderText="bg1_lbl" icon="bg1_ico" />
  ...
</ListConfiguration>

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

  1. Scene에서 ListConfiguration 요소를 사용합니다.

    <ListConfiguration id="bg_img">
      <ListOption id="0">
        <!-- Show background 0 -->
      </ListOption>
      <ListOption id="1">
        <!-- Show background 1 ... etc -->
      </ListOption>
    </ListConfiguration>
    
  2. 또는 구성 옵션을 더 복잡한 표현식에 사용할 수 있습니다.

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

색상 테마

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

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

Relaxed

도시

다음과 같이 ColorConfiguration를 정의합니다.

<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진수 색상 값 대신 데이터 소스로 사용할 수 있습니다. 테마의 첫 번째, 두 번째, 세 번째 요소를 선택하도록 색인 값이 지정되는 방식에 유의하세요.

<HourHand resource="hour" ... tintColor="[CONFIGURATION.myThemeColor.0]" />
<MinuteHand resource="minute" ... tintColor="[CONFIGURATION.myThemeColor.1]" />
<SecondHand resource="second" ... tintColor="[CONFIGURATION.myThemeColor.2]" />

ColorOption에 정의된 색상이 하나뿐인 특정 경우에는 색상을 색인 없이 CONFIGURATION.myThemeColor로 참조할 수도 있습니다.

여기에 대체 텍스트 삽입 여기에 대체 텍스트 삽입

그런 다음 사용자는 시계 화면 편집기에서 원하는 테마 항목을 선택할 수 있습니다.

참고: 버전 2 이상에서는 워치 페이스 형식의 버전이 지원됩니다.

UserConfigurations는 사용자에게 많은 유연성을 제공하지만 정의하는 구성 요소 수가 늘어남에 따라 조합 수가 엄청나게 늘어날 수 있습니다.

Flavors를 사용하면 강조 표시할 가치가 있다고 생각되는 UserConfigurations사전 설정을 정의할 수 있습니다.

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

예를 들어 세 가지 설정을 정의하는 시계 화면을 생각해 보세요 (명확성을 위해 내부 요소와 속성 세부정보는 생략됨).

<UserConfigurations>
  <ColorConfiguration id="themeColor" ...>
    <ColorOption id="0" displayName="bright_label" ... />
    <ColorOption id="1" displayName="monochrome_label" ... />
  </ColorConfiguration>
  <ListConfiguration id="clockAppearance" ... >
    <ListOption id="0" displayName="big_and_bold_label" ... />
    <ListrOption id="1" displayName="minimal_label" ... />
  </ListConfiguration>
  <BooleanConfiguration id="showHr" ... />
</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에서 사용 설정해야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<WatchFaceInfo>
    ...
    <MultipleInstancesAllowed value="true" />
    <FlavorsSupported value="true" />
</WatchFaceInfo>

그런 다음 각 Flavor는 다음과 같이 UserConfigurations 내에 정의됩니다.

<Flavors defaultValue="sportyFlavor">
  <Flavor id="sportyFlavor" ... >
    <Configuration id="themeColor" optionId="0"/>
    <Configuration id="clockAppearance" optionId="0"/>
    <Configuration id="showHr" optionId="TRUE"/>
    <ComplicationSlot slotId="0">
      <DefaultProviderPolicy
              defaultSystemProvider="STEP_COUNT"
              defaultSystemProviderType="SHORT_TEXT"/>
    </ComplicationSlot>
  </Flavor>
  <Flavor id="sophisticatedFlavor" ... >
    <Configuration id="themeColor" optionId="1"/>
    <Configuration id="clockAppearance" optionId="1"/>
    <Configuration id="showHr" 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>