ユーザー構成を定義する

UserConfigurations を使用すると、ユーザーが選択できるオプションを作成できます。選択した値に基づいてウォッチフェイス要素の外観を調整できます。

ユーザー構成オプションは次のとおりです。

  • BooleanConfiguration: 通常、ユーザーが要素を表示するかどうか、または 2 つのスタイルのどちらを選択するかを選択できる場合に使用されます。
  • ListConfiguration: ユーザーにさまざまなオプションを提供します。たとえば、ウォッチフェイスに 4 つの異なる背景画像から選択できる場合
  • 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>

ブール値オプションは、次の 2 つの方法で使用できます。

  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>

ブール値オプションと同様に、このオプションを使用する方法は 2 つあります。

  1. SceneListConfiguration 要素を使用する:

    <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>
    

カラー テーマ

Watch Face Format では、ColorConfiguration を使用してカラーテーマを定義できます。ユーザーはウォッチフェイス エディタからテーマを選択できます。このテーマの色は、ウォッチフェイスの定義全体に表示できます。

たとえば、2 つのエントリと 3 つの色を含むテーマを定義するには、次のようにします。

リラックス

都市部

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 進数の色の値の代わりにデータソースとして使用できます。テーマの 1 つ目、2 つ目、3 つ目の要素を選択するようにインデックス値が指定されていることに注目してください。

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

ColorOption に定義されている色が 1 つしかない場合は、インデックスなしで CONFIGURATION.myThemeColor として参照することもできます。

代替テキストをここに挿入 代替テキストをここに挿入

ユーザーはウォッチフェイス エディタで任意のテーマ エントリを選択できます。

フレーバー

: フレーバーは、ウォッチフェイス フォーマットのバージョン 2 以降でサポートされています。

UserConfigurations はユーザーに多くの柔軟性を提供しますが、定義する構成要素の数が増えると、組み合わせの数は圧倒的に増加する可能性があります。

Flavors を使用すると、ハイライト表示する価値があると思われる UserConfigurationsプリセットを定義できます。

ユーザーは、これらのプリセット フレーバーをコンパニオン アプリ内で選択することも、各構成値を個別に選択することもできます。

たとえば、3 つの設定を定義するウォッチフェイスについて考えてみましょう(わかりやすくするため、内部要素と属性の詳細は省略しています)。

<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 つのテーマ(1 つはカラフル、もう 1 つはモノクロ)を定義しました。
  2. 時計の外観の選択肢のリスト。大きな太字の時計と、よりミニマルな外観の時計の 2 つの選択肢を定義しました。
  3. ウォッチフェイスにユーザーの心拍数を表示するかどうかを選択できます。

さらに、ウォッチフェイスに ComplicationSlot があります。

ユーザーにハイライト表示する Flavors が 2 つあると判断します。これらの設定の組み合わせは他にもたくさんありますが、最も効果的と思われるものを以下に示します。

  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>

次に、各フレーバーを 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>