Définir les configurations utilisateur

UserConfigurations vous permet de créer des options parmi lesquelles l'utilisateur peut choisir. Vous pouvez ajuster l'apparence des éléments du cadran en fonction des valeurs choisies.

Les options de configuration utilisateur peuvent être les suivantes :

  • BooleanConfiguration : généralement utilisé lorsque l'utilisateur peut choisir d'afficher ou non un élément, ou choisir entre deux styles
  • ListConfiguration : fournit à l'utilisateur un éventail d'options. Par exemple, si le cadran de la montre proposait quatre images d'arrière-plan différentes
  • ColorConfiguration : définit les thèmes de couleur parmi lesquels l'utilisateur peut sélectionner son thème préféré.

Options booléennes

Les options booléennes sont peut-être les plus simples des configurations utilisateur. Elles peuvent être définies comme suit :

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

Les options booléennes peuvent ensuite être utilisées de deux manières :

  1. Utilisation de la structure BooleanConfiguration dans le Scene du cadran :

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

    Notez que les options de configuration ne peuvent pas être imbriquées.

  2. Vous pouvez également utiliser l'option de configuration dans les expressions :

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

Options de liste

Les options de liste fonctionnent de manière très similaire aux options booléennes. Par exemple, pour fournir une liste d'images d'arrière-plan parmi lesquelles l'utilisateur peut choisir :

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

Comme pour les options booléennes, il existe deux façons d'utiliser cette option :

  1. Utilisation de l'élément ListConfiguration dans Scene :

    <!-- 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. Vous pouvez également utiliser l'option de configuration dans des expressions plus complexes :

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

Thèmes de couleur

Le Watch Face Format vous permet de définir des thèmes de couleur via ColorConfiguration. Les utilisateurs peuvent sélectionner le thème de leur choix dans l'éditeur de cadran. Les couleurs de ce thème peuvent apparaître dans toute la définition de votre cadran.

Par exemple, pour définir un thème avec deux entrées et trois couleurs, définissez un ColorConfiguration comme suit :

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

Elles peuvent ensuite être utilisées comme sources de données au lieu de valeurs de couleur hexadécimales. Notez comment la valeur d'index est spécifiée pour sélectionner le premier, le deuxième ou le troisième élément du thème :

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

Dans le cas spécifique où chaque ColorOption n'a qu'une seule couleur définie, il est également possible de le référencer sous la forme CONFIGURATION.myThemeColor, sans l'index. L'utilisateur peut ensuite sélectionner l'entrée de thème de son choix dans l'éditeur de cadran.

Saveurs

Remarque : Les saveurs sont compatibles avec la version 2 et les versions ultérieures du format de cadran.

Les UserConfigurations offrent beaucoup de flexibilité à l'utilisateur, mais à mesure que vous augmentez le nombre d'éléments de configuration que vous définissez, le nombre de combinaisons peut devenir extrêmement important.

Flavors vous permet de définir des préréglages pour les UserConfigurations qui, selon vous, méritent d'être mis en avant.

L'utilisateur peut ensuite sélectionner l'une de ces saveurs prédéfinies dans l'application associée ou continuer à choisir chaque valeur de configuration individuellement.

Prenons l'exemple d'un cadran de montre pour lequel vous définissez trois paramètres :

  1. Configuration d'un thème de couleurs, permettant à l'utilisateur de sélectionner le thème de couleurs à appliquer. Vous avez défini deux thèmes : un thème coloré et un thème monochrome.
  2. Liste des arrière-plans. Vous avez défini deux choix parmi lesquels l'utilisateur peut sélectionner.
  3. Choix d'afficher ou non la fréquence cardiaque de l'utilisateur sur le cadran de la montre.

De plus, vous avez un ComplicationSlot sur le cadran.

Vous décidez de mettre en avant deux Flavors pour l'utilisateur. Il existe de nombreuses autres combinaisons possibles de tous ces paramètres, mais voici celles qui vous semblent les plus efficaces :

  1. Une saveur sportive : elle comprendra les éléments suivants :
    1. Le thème de couleurs vives, pour vous dynamiser et vous inciter à bouger (ID : 0)
    2. Première image de fond (ID : 0)
    3. Fréquence cardiaque affichée sur le cadran pour référence
    4. Emplacement de la complication affichant le nombre de pas
  2. Une saveur sophistiquée : elle se composera des éléments suivants :
    1. Thème de couleur monochrome, pour s'adapter à toutes les tenues (ID : 1)
    2. La deuxième image de fond (ID : 1)
    3. La fréquence cardiaque ne s'affiche pas sur le cadran
    4. Emplacement de complication non activé

Les saveurs doivent être activées dans watch_face_info.xml. L'élément FlavorsSupported du fichier watch_face_info.xml doit donc être défini sur value="true".

Chaque saveur est définie dans UserConfigurations comme suit :

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