O X do Xamarin Forms — 3.6 Bem Vindo Material Design !

Fala galera,

beleza?

Quentinho do forno acaba de sair ( Quinta-feira dia 07/03/2019) direto do Bloco "Unidos do Xamarin.Forms" o update 3.6!

Em um resumão geral tivemos diversas alterações / correções que vocês podem ver clicando aqui .

Dentre as todas as alterações do link acima tivemos a chegada do Xamarin.Forms.Visual.Material !!! Que adiciona controles do Material Design ao Xamarin.Forms , sensacional não ? Não ? Então espera ae que eu vou te mostrar !!


Antes de mais nada, creio que você sabe o que é material desing.. Porem caso não conheça ele nos foi introduzido pelo google em 2014 (pode ver como funciona clicando aqui ) . O Material possibilita criar interfaces muito bonitas seguindo um conjunto de padrões definidos pelo google.

Certo.. Mas google, Android.. E o iOS? Não se preocupe, o google também disponibiliza um conjunto de controles para o iOS então é possível utilizar o material design nele..

Só que mais incrível que isso, é a possibilidade de utilizar nas duas plataformas ao mesmo tempo, seguindo um mesmo padrão.. Com o nosso ❤ Xamarin.Forms!


Antes de começarmos existem alguns pré requisitos a serem seguidos no projeto android :

  • Xamarin.Forms 3.6
  • FormsAppCompatActivity
  • Android Support Libraries 28.0.0 ou maior.
  • Target Android framework (v9.0 atual)
  • Versão mínima do Android 5.0 (API 21)

Certo agora vamos la!

Configurando o pacote

Vamos ao Nuget instalar o pacote Xamarin.Forms.Visual.Material em todos os projetos:

Agora no iOS no AppDelega.cs vamos iniciar o global::Xamarin.Forms.FormsMaterial.Init(); :

e no Android na MainActivity.cs :

Pronto, vamos Brincar :D

Utilizando o material

Ate o momento desse artigo foram adaptados 11 controles para o material sendo eles :

  • ActivityIndicator
  • Button
  • DatePicker
  • Editor
  • Entry
  • FramePicker
  • ProgressBar
  • Slider
  • Stepper
  • TimePicker

Por padrão sera exibido o visual normal que estamos acostumados,então para habilitar o visual "material" basta utilizar a tag "Visual", veja no exemplo :

Então temos :

Bem legal não?

Essa tag é tão sensacional que também existe a Visual=”Default”.. O que tem de sensacional nisso ? Você pode ativar e desativar o material em Tempo de execução… Imagina as possibilidades?

O Material possui um sistema de herança, ou seja, você pode declarar o Visual em qualquer layout, ContentPage ou até mesmo no nível do aplicativo, e ele se tornará cascata para todos os controles filho :

Mesmo resultado :

Sensacional não ?

Lembrando que os controles ficam dessa forma pois seguem as Guidelines do material do google, caso queira altera-los é possível criar effects,renderes,behaviors e etc…

Acabou ? Não, você pode também criar seus próprios controles !!

Para isso vamos precisar criar um Custom Renderer ( caso não saiba o que é um Custom Renderer clique aqui) .

Para criar seu controle basta utilizar o IVisual :

E um botão por exemplo :

Em resumo o material pode ser utilizado nos controles existentes e você ainda pode criar o seu!!!

SEJA BEM VINDO MATERIAL DESIGN AO XAMARIN.FORMS ❤ !

Quer ver exemplos com o material ? Se liga nesse exemplo do David Ortinau

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!