ユーザー構成を定義する

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

ユーザー構成オプションは次のいずれかになります。

  • BooleanConfiguration: ユーザーが要素を表示するかどうかを選択したり、2 つのスタイルから選択したりできる場合によく使用されます
  • 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>

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

  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>

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

  1. SceneListConfiguration 要素を使用する:

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

<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 に定義されている色が 1 つだけの場合は、インデックスなしで CONFIGURATION.myThemeColor として参照することもできます。ユーザーは、ウォッチフェイス エディタで好みのテーマ エントリを選択できます。

フレーバー

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

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

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

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

たとえば、3 つの設定を定義するウォッチフェイスを考えてみましょう。

  1. カラーテーマの構成。ユーザーが適用するカラーテーマを選択できます。ここでは、カラフルなテーマとモノクロのテーマの 2 つを定義しました。
  2. 背景のリスト。ユーザーが選択できる 2 つの選択肢を定義しました。
  3. 文字盤に心拍数を表示するかどうかを選択できます。

また、ウォッチフェイスに ComplicationSlot が表示されます。

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

  1. スポーティなフレーバー: 以下の要素で構成されます。
    1. 明るいカラーテーマ。活力を与え、活動を促します(ID: 0)
    2. 最初の背景画像(ID: 0)
    3. ウォッチフェイスに心拍数が表示されている
    4. 歩数を表示するコンプリケーション スロット
  2. 洗練されたフレーバー: 以下の要素で構成されます。
    1. どんな服装にも合うモノクロのカラーテーマ(ID: 1)
    2. 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>