Xamarin | Estilos, temas e recursos dinâmicos
Bora centralizar a estilização, da nossa aplicação, e abrir a possibilidade do usuário ter uma experiência personalizada com temas?
Esse post tem o intuito de compartilhar um pouco da minha experiência com relação ao ResourceDictionary do Xamarin, assim poder mostrar como centralizamos alguns recursos e a possibilidade de os tornar dinâmicos.
Estilos
Você provavelmente já deve ter visto algumas centralizações de estilos dentro do Application.Resources, mas sabia que podemos ter arquivos separados exclusivamente para esses recursos?
Vamos criar uma pasta para definir onde vai ficar nossos estilos:
Agora vamos centralizar os estilos relacionados à componentes de texto, dentro de um dicionario de recursos chamado Texto.xaml.
Note que eu comecei com um estilo base para o label, pois são propriedades que eu pretendo usar em todos os textos que eu for exibir nesse exemplo.
Depois criei um estilo para textos que serão exibidos em forma de título e outro para os que serão exibidos no corpo de assuntos, apresentados na aplicação. Essa herança de estilos se dá através da propriedade BasedOn, da classe Style.
Utilizando dessa premissa, podemos criar estilos de varias categorias (imagens, páginas e etc..) em documentos separados, mas precisamos mescla-los para definirmos que a aplicação utiliza esses recursos.
Vamos criar um outro dicionario de recursos para unir todos os demais dicionários que organizamos em arquivos diferentes. Vou chamar esse de TemaBase.xaml para, no próximo tópico, a gente começar a tratar a alternância de temas para nossa aplicação.
Perceba que eu mesclo apenas o Texto.Xaml, mas, caso você utilize mais arquivos, basta adicionar novas linhas conforme o exemplo acima.
Tema Escuro | Tema Claro
Tendo em vista que agora sabemos que podemos utilizar arquivos para separar os nossos dicionários de recursos, vamos usar essa pratica para criar temas pré definidos para nossa aplicação.
Vou criar um arquivo chamado TemaClaro.xaml e definir alguns parâmetros que correspondem àesse tema.
Importante! aqui temos que definir a propriedade Source, desse dicionario de recursos, com nosso arquivo TemaBase.xaml para ele acabar “herdando” a mesclagem dos demais arquivos de estilo.
Utilizei alguns parâmetros, de diferentes tipos, para mostrar um pouco da capacidade dos recursos dinâmicos, em nossas aplicações.
Vamos alternar algumas Strings, Cores e até um estilo que afetará o ImageSource de um componente de imagem. Note que se você utiliza imagens por plataforma, você pode utilizar apenas o recurso de string, sem criar um estilo dinâmico para alterar a imagem. Minha proposta aqui é mostrar a capacidade de definirmos até recursos embarcados, juntamente com a utilização de extensões.
Agora basta fazer similar para o TemaEscuro.xaml, alterando conforme o objetivo do estilo.
Feito isso, tudo que precisamos fazer para alterar o estilo atual é definir a propriedade App.Current. Resources.
Importante! É necessário definir um tema inicial, para quando a aplicação for executada já possuir um dicionario de recursos válido. Podemos fazer isso definindo na classe App.xaml.
Alterando tema
Cada plataforma tem sua forma de notificar quando uma preferencia de usuário foi alterada, sendo assim, vamos centralizar a lógica de gerenciamento dos temas.
Aqui basicamente a gente faz uma persistência de qual tema está definido atualmente e, quando alteramos, validamos essa informação antes de tentar criar um novo dicionario de recursos.
Com essa classe você já é capaz de disponibilizar, dentro da aplicação, uma forma do usuário alterar o tema atual. Você pode persistir essa preferência e recarregar na inicialização da sua aplicação.
Detectando tema no Android
Vamos precisar definir, na nossa MainActivity.cs, que queremos “escutar” as alterações do modo interface definidas pela propriedade ConfigurationChanges = ConfigChanges.UiMode.
Agora vamos sobre escrever a lógica do método OnConfigurationChanged, para validar se o tema foi alterado.
Detectando tema no IOS
Aqui vamos utilizar uma técnica ninja baseada no CustomRenderer da ContentPage, que nos fornece acesso ao método TraitCollectionDidChange.
Feito isso, sua aplicação já será capaz de detectar o tema utilizado no dispositivo e utilizar os recursos adequados.
Caso deseje ter telas de carregamento diferentes para os modos, claro e escuro, eu sugiro o post do Brandon Minnick, que aborda a criação em ambas as plataformas (IOS e Android).
O código do exemplo criado nesse post está disponível no Github: https://github.com/felipebaltazar/Xamarin.Theming
