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>
그러면 불리언 옵션을 다음 두 가지 방법으로 사용할 수 있습니다.
시계 화면
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> -->
또는 구성 옵션을 표현식에 사용할 수 있습니다.
<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>
불리언 옵션과 마찬가지로 이 옵션을 사용하는 방법에는 두 가지가 있습니다.
Scene
에서ListConfiguration
요소를 사용합니다.<ListConfiguration id="bg_img"> <ListOption id="0"> <!-- Show background 0 --> </ListOption> <ListOption id="1"> <!-- Show background 1 ... etc --> </ListOption> </ListConfiguration>
또는 구성 옵션을 더 복잡한 표현식에 사용할 수 있습니다.
<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>
다음을 정의했습니다.
- 사용자가 적용할 색상 테마를 선택할 수 있는 색상 테마 구성입니다. 컬러풀한 테마와 흑백 테마를 각각 하나씩 정의했습니다.
- 시계 모양 옵션 목록입니다. 큰 글꼴의 시계와 더 간소한 시계라는 두 가지 옵션을 정의했습니다.
- 시계 화면에 사용자의 심박수를 표시할지 여부를 선택합니다.
또한 시계 화면에 ComplicationSlot
가 있습니다.
사용자에게 강조 표시할 Flavors
가 두 개 있다고 가정해 보겠습니다.
이러한 설정은 더 많은 조합으로 구성할 수 있지만 가장 효과적인 조합은 다음과 같습니다.
- 스포츠 스타일: 다음으로 구성됩니다.
- 활력을 주고 활동적으로 만들어주는 밝은 색상 테마입니다 (ID: 0).
- 운동 중에 볼 수 있도록 크고 굵은 시계 (ID: 0)
- 참고용으로 시계 화면에 표시되는 심박수
- 걸음 수를 보여주는 정보 표시 자리
- 세련된 맛: 다음으로 구성됩니다.
- 어떤 옷에도 어울리는 흑백 색상 테마 (ID: 1)
- 모든 환경에 잘 맞는 최소 시계 (ID: 1)
- 시계 화면에 심박수가 표시되지 않음
- 정보 표시 자리가 사용 설정되지 않음
버전은 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>