UserConfigurations
permite criar opções entre as quais o usuário pode escolher. É possível ajustar a aparência dos elementos
do mostrador do relógio com base nos valores escolhidos.
As opções de configuração do usuário podem ser:
BooleanConfiguration
: geralmente usado quando o usuário pode ter a opção de mostrar um elemento ou não ou escolher entre dois estilosListConfiguration
: oferece ao usuário uma variedade de opções. Por exemplo, se o mostrador do relógio tivesse quatro imagens de plano de fundo diferentes para escolherColorConfiguration
: define temas de cores, dos quais o usuário pode selecionar o preferido.
Opções booleanas
As opções booleanas são talvez as configurações de usuário mais simples. Elas podem ser definidas da seguinte maneira:
<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>
As opções booleanas podem ser usadas de duas maneiras:
Usando a estrutura
BooleanConfiguration
no mostrador do relógioScene
:<Scene> <BooleanConfiguration id="show_date"> <BooleanOption id="TRUE"> <!-- ...Content to show date --> </BooleanOption> <BooleanOption id="FALSE"> <!-- ...Content when date not required --> </BooleanOption> </BooleanConfiguration> </Scene>
As opções de configuração não podem ser aninhadas no uso. Portanto, o seguinte não é válido:
<!-- 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> -->
Como alternativa, a opção de configuração pode ser usada em expressões:
<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>
Opções da lista
As opções de lista funcionam de maneira muito semelhante às opções booleanas. Por exemplo, para fornecer uma lista de imagens de plano de fundo para o usuário escolher:
<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>
Assim como nas opções booleanas, há duas maneiras de usar isso:
Como usar o elemento
ListConfiguration
emScene
:<ListConfiguration id="bg_img"> <ListOption id="0"> <!-- Show background 0 --> </ListOption> <ListOption id="1"> <!-- Show background 1 ... etc --> </ListOption> </ListConfiguration>
Como alternativa, a opção de configuração pode ser usada em expressões mais complexas:
<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>
Temas de cores
O formato do mostrador do relógio permite definir temas de cores usando ColorConfiguration
.
Os usuários podem selecionar o tema de preferência no editor do mostrador do relógio, e as
cores desse tema podem aparecer em toda a definição do mostrador do relógio.
Por exemplo, para definir um tema com duas entradas e três cores:
Relaxado |
|||
Urbano |
Defina um ColorConfiguration
desta maneira:
<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>
Elas podem ser usadas como fontes de dados em vez de valores de cor hexadecimal. Observe como o valor do índice é especificado para selecionar o primeiro, segundo ou terceiro elemento do tema:
<HourHand resource="hour" ... tintColor="[CONFIGURATION.myThemeColor.0]" />
<MinuteHand resource="minute" ... tintColor="[CONFIGURATION.myThemeColor.1]" />
<SecondHand resource="second" ... tintColor="[CONFIGURATION.myThemeColor.2]" />
No caso específico em que cada ColorOption
tem apenas uma cor definida, também
é possível fazer referência a ele como CONFIGURATION.myThemeColor
, sem o
índice.
|
|
O usuário pode selecionar a entrada de tema de sua escolha no editor do mostrador do relógio.
Sabores
Observação: os sabores têm suporte na versão 2 e mais recentes do formato do mostrador do relógio.
O UserConfigurations
oferece muita flexibilidade ao usuário, mas, à medida que você
aumenta o número de elementos de configuração definidos, o número de
combinações pode aumentar consideravelmente.
Flavors
permite definir predefinições para os UserConfigurations
que você
acha que valem a pena destacar.
O usuário pode selecionar uma das variações predefinidas no app complementar ou continuar escolhendo cada valor de configuração individualmente.
Por exemplo, considere um mostrador de relógio em que você define três configurações (os elementos internos e detalhes dos atributos foram omitidos para maior clareza):
<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>
Você definiu:
- Uma configuração de tema de cores, permitindo que o usuário selecione qual tema de cores aplicar. Você definiu dois temas, um colorido e outro monocromático.
- Uma lista de opções de aparência do relógio. Você definiu duas opções, um relógio grande e em negrito e um relógio com aparência mais minimalista.
- Uma opção para mostrar a frequência cardíaca do usuário no mostrador do relógio.
Além disso, você tem um ComplicationSlot
no mostrador do relógio.
Você decide que há duas Flavors
que quer destacar para o usuário.
Há muitas outras combinações possíveis de todas essas configurações, mas estas são
as que você acha que funcionam melhor:
- Um sabor esportivo: consiste em:
- O tema de cores brilhantes, para dar energia e estimular você (ID: 0)
- O relógio grande e em negrito, para que possa ser visto durante o treino (ID: 0)
- Frequência cardíaca exibida no mostrador do relógio para referência
- O slot de complicação mostrando a contagem de passos
- Um sabor sofisticado:
- O tema de cores monocromáticas, para combinar com qualquer roupa (ID: 1)
- O relógio mínimo, para se ajustar bem a qualquer ambiente (ID: 1)
- A frequência cardíaca não aparece no mostrador do relógio
- O slot de complicação não está ativado
As variações precisam ser ativadas em watch_face_info.xml
:
<?xml version="1.0" encoding="utf-8"?>
<WatchFaceInfo>
...
<MultipleInstancesAllowed value="true" />
<FlavorsSupported value="true" />
</WatchFaceInfo>
Em seguida, cada variação é definida em UserConfigurations
da seguinte maneira:
<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>