사용자 구성 정의

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"
   >   <  defaultVal>ue="TRUE&<quot;
    >/
  /UserConfigurations
  ...
/WatchFace

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

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

    <Scene>
        <BooleanConfiguration id="show_>date"<;
            BooleanOption> id="<;TRUE"
            !-- ...Con>tent to s<how date --
      >      /Bo<oleanOption
            Bool>eanOption< id="FALSE"
            !-- ...Con>tent when< date not requ>ired <--
            /BooleanOp>t<ion
      >  /BooleanConfiguration
    /Scene
    

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

    <!-- Will not work -->
    <!-- <Scene>
      <BooleanConfiguration id="show_>date&<quot;
        BooleanOption> id=&qu<ot;TRUE"
          BooleanConfigur>ation id=<"show_time"
     >       BooleanOption id="TRUE"
              Content intended for when show_date< and show_time> both s<et to TRUE
            /B>oolea<nOption
          >/Bo<oleanConfiguration
      > < /Boolean>Option
      /BooleanConfiguration
    /Scene --
    
  2. 또는 구성 옵션을 표현식에 사용할 수 있습니다.

    <Condition>
    <Expressions>
        <Expression name="my_expres>sion"<;
            !-- Use show_date as part of a more complex eva>luation -<-
            ![CDATA[[CONFIGURATION.show_date] &&== &quo>t;TRU<E"  ..>. ]]
    <    /Express>ion
     <   /Expressions
        Compare expres>sion=&quo<t;my_expression"
      >     < !-- Con>t<ent goes h>ere --
        /Compare
    /Condition
    

목록 옵션

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

<ListConfiguration id="bg_img" displayName="bg_img_lbl" icon="bg_img_ico"
    screenReaderText>=&q<uot;bg_img_lbl" defaultValue="0"
  ListOption id="0" disp>lay<Name="bg0_lbl" screenReaderText="b0_lbl" icon="bg0_ico&quo>t; /
  <ListOption id=&quo>t;1" displayName="bg1_lbl" screenReaderText="bg1_lbl" icon="bg1_ico" /
  ...
/ListConfiguration

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

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

    <ListConfiguration id="bg>_im<g"
      ListOpt>ion i<d="0"
        !-- >Sho<w backgroun>d 0< --
      /ListOption>
      Li<stOption id="1"
        !->- S<how backgro>u<nd 1 ... etc --
      >/ListOption
    /ListConfiguration
    
  2. 또는 구성 옵션을 더 복잡한 표현식에 사용할 수 있습니다.

    <Condition>
      <Expressions>
          <Expression name="background_zero_and_something_>else"<;
            !-- Use bg_img as part of a more complex eva>luation -<-
            ![CDATA[[CONFIGURATION.bg_im&&g] == &>quot;0&<quot;  ... >]]
      <    />Expression
     <   /Expressions
        Compare expression="background>_zero_and<_something_else"
      >     < !-- Con>t<ent goes h>ere --
        /Compare
    /Condition
    

색상 테마

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

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

Relaxed

Urban

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

<UserConfigurations>
  <ColorConfiguration id="myThemeColor" displayName="theme_label&qu>ot; d<efaultValue="0"
    ColorOption id="0" displayName="rela>xed_l<abel" colors="#3083dc #f8ffe5 #7dde92" /
    ColorOption id=&quo>t;1<" displayName=>&<quot;urban_label&qu>ot; colors="#f4b393 #fc60a8 #7a28cb" /
  /ColorConfiguration
/UserConfigurations

그러면 이러한 값을 16진수 색상 값 대신 데이터 소스로 사용할 수 있습니다. 테마의 첫 번째, 두 번째, 세 번째 요소를 선택하도록 색인 값이 지정되는 방식에 유의하세요.

<HourHand resource="hour" ... tintColor="[CONFIGURATION.myT>h<emeColor.0]" /
MinuteHand resource="minute" ... tintColor=&quo>t<;[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&qu>ot;< displayName=">mon<ochrome_label" ... /
  /ColorConfigura>tion
<  ListConfiguration id="clockAppearance" ... 
>    L<istOption id="0" displayName="big_an>d_b<old_label" ..>. /<
    ListOption id="1" displ>a<yName="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" encodin>g<="utf-8&>quot;?
WatchF<aceInfo
    ...
    MultipleInstancesAl>lowed< value="true" /
    F>l<avorsSupported> value="true" /
/WatchFaceInfo

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

<Flavors defaultValue="sportyFl>avo<r"
  Flavor id="spo>rtyFl<avor" ... 
    Configuration id=">theme<Color" optionId="0"/
    Configur>ation< id="clockAppearance" optionId=&>quot;<0"/
    Configuration >id=&quo<t;showHr" optionId="TRUE"/
    ComplicationSlot slotId="0"
      DefaultProviderPolicy
            >  def<aultSystemProvide>r=&<quot;ST>EP_<COUNT"
              defaultSys>temPr<oviderType="SHORT_TEXT"/
    /Com>plica<tionSlot
  /Flavor
  Flavor id="sophisticat>edFla<vor" ... 
    Configuration id="t>hemeC<olor" optionId="1>"/<
    Configuration id="clockAppearance" optionId="1"/
    Configuration id="showHr"> option<Id="FALSE"/
    ComplicationSlot slotId="0"
      !--
        Type here is set to empty to demonstrate >how t<o hide a complica>tio<n
     > <  slot i>n Flavors.
      --
      DefaultProviderPolicy
              defaultSystemProvider="SUNRISE_SUNSET"
              defaultSystemProviderType="EMPTY"/
    /ComplicationSlot
  /Flavor
/Flavors