定義使用者設定

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 定義色彩主題。使用者可以在錶面編輯器中選取所需主題,而這個主題的顏色會顯示在整個錶面定義中。

舉例來說,如要定義主題,其中包含兩個項目和三種顏色:

放鬆

Urban

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

這些值可用做資料來源,而非十六進位顏色值。請注意如何指定索引值,以便選取主題的第一、第二或第三個元素:

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

接著,請在 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>