Define los parámetros de configuración del usuario

UserConfigurations te permite crear opciones entre las que el usuario puede elegir. Puedes ajustar la apariencia de los elementos de la cara del reloj según los valores elegidos.

Las opciones de configuración del usuario pueden ser las siguientes:

  • BooleanConfiguration: Se suele usar cuando el usuario puede mostrar un elemento o no, o elegir entre dos estilos.
  • ListConfiguration: Proporciona al usuario un rango de opciones. Por ejemplo, si la cara del reloj tuviera cuatro imágenes de fondo diferentes para elegir
  • ColorConfiguration: Define temas de color, entre los que el usuario puede seleccionar su tema preferido.

Opciones booleanas

Las opciones booleanas son quizás las más simples de las configuraciones del usuario. Se pueden definir de la siguiente manera:

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

Las opciones booleanas se pueden usar de dos maneras:

  1. Cómo usar la estructura BooleanConfiguration dentro de la Scene de la cara de reloj:

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

    Ten en cuenta que las opciones de configuración no se pueden anidar en su uso.

  2. Como alternativa, la opción de configuración se puede usar en expresiones:

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

Opciones de lista

Las opciones de lista funcionan de manera muy similar a las opciones booleanas. Por ejemplo, para proporcionar una lista de imágenes de fondo para que el usuario elija, haz lo siguiente:

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

Al igual que con las opciones booleanas, existen dos formas de usar esta opción:

  1. Usa el elemento ListConfiguration en 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. Como alternativa, la opción de configuración se puede usar en expresiones más complejas:

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

Combinaciones de colores

El formato de cara de reloj te permite definir temas de color a través de ColorConfiguration. Los usuarios pueden seleccionar el tema que prefieran en el editor de caras de reloj, y los colores de este tema pueden aparecer en toda la definición de la cara de reloj.

Por ejemplo, para definir un tema con dos entradas y tres colores, define un ColorConfiguration de la siguiente manera:

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

Luego, se pueden usar como fuentes de datos en lugar de valores de color hexadecimales. Observa cómo se especifica el valor del índice para seleccionar el primer, segundo o tercer elemento del tema:

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

En el caso específico en el que cada ColorOption solo tiene un color definido, también es posible hacer referencia a él como CONFIGURATION.myThemeColor, sin el índice. Luego, el usuario puede seleccionar la entrada de tema que prefiera en el editor de la carátula del reloj.

Sabores

Nota: Los sabores son compatibles con la versión 2 y posteriores del formato de caras de reloj.

UserConfigurations le brinda al usuario mucha flexibilidad, pero, a medida que aumenta la cantidad de elementos de configuración que defines, la cantidad de combinaciones puede crecer de forma abrumadora.

Flavors te permite definir ajustes predeterminados para el UserConfigurations que crees que vale la pena destacar.

Luego, el usuario puede seleccionar entre estos ajustes predeterminados en la app complementaria o seguir eligiendo cada valor de configuración de forma individual.

Por ejemplo, considera una cara de reloj en la que defines tres parámetros de configuración:

  1. Es una configuración de tema de color que permite al usuario seleccionar qué tema de color aplicar. Definiste dos temas, uno colorido y otro monocromático.
  2. Es una lista de fondos. Definiste dos opciones entre las que el usuario puede elegir.
  3. Opción para mostrar o no la frecuencia cardíaca del usuario en la cara del reloj

Además, tienes un ComplicationSlot en la cara de reloj.

Decides que hay dos Flavors que quieres destacar para el usuario. Hay muchas más combinaciones posibles de todos estos parámetros de configuración, pero estas son las que crees que funcionan mejor:

  1. Un sabor deportivo: Consistirá en lo siguiente:
    1. El tema de color brillante, para energizarte y activarte (ID: 0)
    2. La primera imagen de fondo (ID: 0)
    3. Frecuencia cardiaca que se muestra en la cara del reloj como referencia
    4. El espacio para complicación que muestra el recuento de pasos
  2. Un sabor sofisticado: Consistirá en lo siguiente:
    1. El tema de color monocromático, para combinar con cualquier atuendo (ID: 1)
    2. La segunda imagen de fondo (ID: 1)
    3. No se muestra la frecuencia cardíaca en la cara del reloj
    4. La ranura de complicación no está habilitada

Las variantes requieren habilitación en watch_face_info.xml, por lo que el elemento FlavorsSupported en el archivo watch_face_info.xml debe establecerse con value="true".

Cada variante se define dentro de UserConfigurations de la siguiente manera:

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