定义用户配置

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 定义颜色主题。用户可以从表盘编辑器中选择他们喜欢的主题,并且该主题中的颜色可以显示在您的整个表盘定义中。

例如,要定义一个包含两个条目和三种颜色的主题:

轻松

都市

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