Temas fáceis para Apps em Xamarin Forms

Bonitas interfaces de usuários vendem aplicativos para dispositivos móveis e projetar uma experiência de usuário bem-sucedida para seu aplicativo é um grande primeiro passo para o sucesso. Mas que tal combinar pequenos detalhes como cores e fontes, para criar um design fantástico com Xamarin Forms? Mesmo se você criar o que você acredita ser o projeto perfeito, os usuários, muitas vezes, encontram algo que não gostam.

Por que não deixar que o usuário decida exatamente como eles gostariam que seu aplicativo fosse exibido? Muitos aplicativos populares adotaram essa abordagem. Tweetbot tem modos claros e escuros e a capacidade de mudar fontes para encontrar o que funciona melhor nos olhos durante as sessões Twitter tarde da noite.

O Slack leva a personalização do usuário para o próximo nível, permitindo que os usuários possam personalizar o tema do aplicativo por meio de valores de cores hexadecimais. O suporte apropriado ao tema também traz alguns benefícios tangíveis para o código, como minimizar os valores duplicados de códigos de execução em todos os aplicativos para aumentar a capacidade de manutenção do código.

Xamarin Forms permite que você aproveite o estilo para criar interfaces de usuário personalizadas para iOS, Android e Windows. Neste post, vamos dar uma olhada em como adicionar o tema ao MonkeyTweet, um cliente Twitter minimalista (estamos falando sério!), replicando o modo light e dark do Tweetbot, como também o tema customizável do Slack.

Introdução a Recursos

Os recursos permitem que você compartilhe definições comuns em um aplicativo para ajudá-lo a reduzir valores codificados em seu código, resultando em uma manutenção de código massivamente aumentada. Em vez de ter que alterar todos os valores no seu aplicativo quando um tema é alterado, você só precisa alterar um: o recurso.

No código abaixo, você pode ver vários valores duplicados que poderiam ser extremamente tediosos para substituir e são candidatos ideais para usar recursos:

Os recursos são agrupados e armazenados em um ResourceDictionary, um armazenamento de valor-chave que é otimizado para uso com uma interface de usuário. Como um ResourceDictionary é um armazenamento de valor-chave, você deve fornecer a palavra-chave XAML x: Key para cada recurso definido:

 

Você pode definir um ResourceDictionary na página e no nível da aplicação, dependendo do escopo específico necessário para o recurso em questão. Se um recurso específico for compartilhado entre várias páginas, é melhor defini-lo no nível do aplicativo em App.xaml para evitar duplicação, como fazemos a seguir com o aplicativo MonkeyTweet app:

 

Agora que definimos recursos reutilizáveis ​​em nosso ResourceDictionary de aplicativo, como fazemos referência a esses valores em XAML? Vamos dar uma olhada nos dois principais tipos de recursos, StaticResource e DynamicResource, e como podemos utilizá-los para adicionar um modo claro e escuro para MonkeyTweet.

Recursos estáticos

A extensão de marcação StaticResource nos permite fazer referência a recursos predefinidos, mas tem uma limitação de chave: os recursos do dicionário são buscados somente uma vez durante a instanciação de controle e não podem ser alterados em tempo de execução. A sintaxe é muito semelhante àquela para bindings; Basta definir o valor da propriedade para “{StaticResource Resource_Name}”. Vamos atualizar o ViewCell para usar os recursos que definimos.

 

Recursos Dinâmicos

StaticResources são uma ótima maneira de reduzir os valores duplicados, mas o que precisamos é da capacidade de alterar o dicionário de recursos em tempo de execução (e ter essas atualizações de recursos refletidas quando referenciadas). DynamicResource deve ser usado para chaves de dicionário associadas com valores que podem ser alterados durante o tempo de execução. Além disso, ao contrário dos recursos estáticos, os recursos dinâmicos não geram uma exceção de tempo de execução se o recurso for inválido e simplesmente usará o valor da propriedade padrão.

Queremos que a interface do usuário do MonkeyTweet seja capaz de alternar entre os modos claro e escuro no tempo de execução, então DynamicResource é perfeito para esta situação. Tudo o que precisamos fazer é mudar StaticResources para DynamicResources. Atualizar nossos recursos on-the-fly é super fácil também:

Os usuários podem agora alternar entre um tema claro e escuro com o clique de um botão:

 

Introdução aos Estilos

Ao criar uma interface de usuário e criar um aplicativo, você pode encontrar-se repetidamente configurando controles de forma semelhante. Por exemplo, todos os controles que exibem texto podem usar a mesma fonte, atributos de fonte e tamanho. Os estilos são uma coleção de pares de propriedade-valor chamados Setters. Ao invés de ter que definir repetidamente cada uma dessas propriedades para um recurso específico, você pode criar um estilo e, em seguida, simplesmente definir a propriedade Style para manipular um tema para você.

Construindo Estilos Personalizados

Para definir um estilo, podemos aproveitar o dicionário de recursos de toda a aplicação para tornar esse estilo disponível para todos os controles. Assim como os recursos, cada estilo deve conter uma chave exclusiva e o nome da classe de destino para o estilo. Um estilo é composto por um ou mais Setters, onde um nome de propriedade e valor para essa propriedade devem ser fornecidos. A propriedade TargetType define quais controles o tema pode se aplicar a; você pode até mesmo definir isso para VisualElement para que o estilo se aplique a todas as subclasses de VisualElement. Setters podem até aproveitar os recursos para aumentar ainda mais a manutenção.

 

Podemos aplicar esse estilo definindo a propriedade Style de um controle para o nome da chave exclusiva do estilo. Todas as propriedades do estilo serão aplicadas ao controle. Se uma propriedade é explicitamente definida no controle que também faz parte de um estilo referenciado, o conjunto de propriedades explicitamente substituirá o valor no estilo.

 

Nosso estilo é um recurso dinâmico nos bastidores, para que possam ser alterados em tempo de execução. Eu criei uma página personalizada que permite aos usuários inserir suas próprias cores hexadecimais para o tema MonkeyTweet, graças aos recursos e estilos Xamarin Forms:

 

Conclusão

Neste post, nós demos uma olhada em aplicações de temas com os estilos de Xamarin Forms, mudando o tema da nossa aplicação MonkeyTweet para um tema customizável, definido pelo usuário. Nós apenas arranhamos a superfície do styling; há muitas outras coisas legais que você pode fazer com styling, incluindo herança de estilo, estilo implícito, estilo de plataforma específica e estilos pré-construídos. Certifique-se de fazer o download do aplicativo MonkeyTweet para aplicar seu próprio tema e ver o quão fácil é construir bonitos temas UIs (User Interfaces) com Xamarin Forms!

By Pierce Boggan February 3, 2016.

Fonte: https://blog.xamarin.com/easy-app-theming-with-xamarin-forms-styles/

Tradução: salomaosilva , Azuris. Desenvolvedor Xamarin Azuris

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *