O X do Xamarin Forms — Alterando toda interface do seu APP — XF-Material
Fala galera,
tudo beleza?
Quando a versão do Xamarin.Forms 3.6 foi lançada eu fiz um artigo falando de como utilizar o Material Design (O X do Xamarin Forms — 3.6 Bem Vindo Material Design !).
Com o Material nativo podemos utilizar as interfaces comuns entre as plataformas do Xamarin.Forms com um unico padrão, deixando-as quase iguais!
Hoje o material do Forms tem adaptado os controles :
- ActivityIndicator, Button,DatePicker, Editor, Entry, FramePicker, ProgressBar, Slider, Stepper e TimePicker.
Alem da possibilidade de criar seu próprio controle com o padrão Material.
Porem caso você queira mais controles, e não queira customizar seu próprio material existe um pacote sensacional com um conjunto de controles que vai alterar completamente a aparência do seu app… O XF-Material-Library !
Então vamos conhecer o mesmo e como utiliza-lo!
Configurando o controle
Vamos ao nosso querido Nuget instalar o pacote XF.Material em todos os projetos :
Agora precisamos iniciar o controle em todos os projetos, inclusive no projeto compartilhado :
Existe uma ultima configuração, no iOS você precisa adicionar a chave UIViewControllerBasedStatusBarAppearance no info.plist :
Pronto, hora de brincar com o Material!
Utilizando o pacote
Não foi exagero quando eu disse que o XF -Material iria alterar toda a aparência do seu app ele é tão customizável, que você pode padronizar as cores do tema, fontes e tudo mais que você quiser !
Antes de mais nada para dar uma tapa a mais no visua eu adicionei mais 3 fontes nos projetos iOS e Android :
Caso você não saiba como adicionar e utilizar fontes pode dar uma olhada nesse artigo : O X do Xamarin Forms — Fontes customizadas
No App.Xaml nós podemos criar um ResourceDictionary customizado para utilizar em todo o projeto, basta declarar os Namespaces:
xmlns:mtrl=”clr-namespace:XF.Material.Forms.Resources;assembly=XF.Material.Forms”
xmlns:mtrltypo=”clr-namespace:XF.Material.Forms.Resources.Typography;assembly=XF.Material.Forms”
E seguir o exemplo abaixo :
Sim é bastante coisa, mas é para mostrar que é possível customizar o que você quiser do visual.
Agora só precisamos iniciar essa configuração :
Claro, você não é obrigado a customizar tudo, pode utilizar a configuração padrão. Para isso basta inicializar :
Pronto! Agora é só começar a utilizar os controles :)
Navegação
O XF.Material é tão incrível que ele nos permite customizar a Navigation e StatusBar das plataformas com pouco esforço.
Para utilizar as propriedades precisamos utilizar a classe MaterialNavigationPage ao invés da NavigationPage que estamos acostumados.
Então vamos inicializar nosso aplicativo da seguinte forma :
Agora em nossa MainPage podemos adicionar algumas propriedades para mudar o Visual da mesma e inclusive da StatusBar :
Basicamente adicionamos os namespaces e é possível customizar as cores, fonte e etc tanto da navigation como da Statusbar :
Facil em ? ja ficou com outra cara :D
Existem diversas opções para customizar a Appbar você pode conferir todas clicando aqui.
Controles
O Material nos permite também adicionar alguns controles incríveis. Por exemplo podemos criar uma cartão definir sua elevação e adicionar um Label dentro :
O Material nos permite configurar a animação, bordas e cores em praticamente todos os controles. Seja em um botão, slider,um loading e ate um "Chip".
No caso do Entry, podemos utilizar o TextField e customizar ate um texto abaixo do campo para passar alguma informação ao Usuario na hora de preencher :
O Material também possui radioButtons e checkbox alem de outros controles, é possível conferir todos clicando aqui.
Alertas e Dialogos
Vou te dizer, este pacote é tão completo que ele ja vem com muitas opções para janelas de Dialogos e Alertas .
No caso desses dois ele utiliza por baixo dos panos, outro plugin o Rg.Plugins.Popup.
Se você não conhece ele ainda eu fiz um artigo sobre :O X do Xamarin Forms — Pop-ups .
Para simplicar o plugin e garantir que no caso do Android o botão voltar não remova as caixas de dialogo, precisamos realizar uma implementação simples na MainActivity.cs sobrescrevendo o evento OnBackPressed():
Pronto ! Agora vamos implementar 3 botões para demonstrar 3 tipos de caixas de Dialogo diferentes :
Em seguida o backend para exibi-las :
Agora é só executar :
Muito legal não?
Existem diversas customizações de Dialog e você pode ver todas as possibilidades clicando aqui .
XF.Material é um conjunto de controles incrível, vale a pena dar uma olhada na documentação e ver que praticamente tudo q vc precisa de controle esta la ;)
Caso queira baixar o código utilizado no Exemplo: Clique aqui.
Quer ver outros artigos sobre Xamarin ? Clique aqui.
Espero ter ajudado!
Aquele abraço!
