Fala, galera! Beleza?

Diretamente do bloco “Unidos do Xamarin.Forms”, acaba de sair o update 3.6!

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

Dentre 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 que eu vou te mostrar!

Antes de mais nada, creio que você saiba o que é Material Design. Porém, caso não conheça, ele foi introduzido pela Google em 2014 (pode ver como funciona clicando aqui). O Material Design possibilita criar interfaces muito bonitas seguindo um conjunto de padrões definidos pelo Google.

Certo, Google e Android – mas e o iOS? Não se preocupe, a 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 amado 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 lá!

Configurando o pacote

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

No iOS, em AppDelega.cs, vamos iniciar o global::Xamarin.Forms.FormsMaterial.Init();:

using System;
using System.Collections.Generic;
using System.Linq;

using Foundation;
using UIKit;

namespace MaterialDesingExemplo.iOS
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the 
    // User Interface of the application, as well as listening (and optionally responding) to 
    // application events from iOS.
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        //
        // This method is invoked when the application has loaded and is ready to run. In this 
        // method you should instantiate the window, load the UI into it and then make the window
        // visible.
        //
        // You have 17 seconds to return from this method, or iOS will terminate your application.
        //
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            global::Xamarin.Forms.FormsMaterial.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

Já no Android, na MainActivity.cs:

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace MaterialDesingExemplo.Droid
{
    [Activity(Label = "MaterialDesingExemplo", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
       
    }
}

Pronto, vamos brincar!

Utilizando o material

Até o momento deste artigo foram adaptados 11 controles para o Material, sendo eles:

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

Por padrão será exibido o visual normal que estamos acostumados, então, para habilitar o visual “Material” basta utilizar a tag “Visual”. Veja no exemplo:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:MaterialDesingExemplo" 
             Padding="0,60,0,0"
             x:Class="MaterialDesingExemplo.MainPage">
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Ola Material Design!"  />
        
        <Button Text="Botão do Forms"/>
        <Button Text="Botão com Material" Visual="Material"/>
    </StackLayout>
</ContentPage>

Com isso, temos:

Bem legal, né?

Essa tag é tão sensacional que também existe a Visual=”Default”. Mas o que tem de sensacional nisso? Você pode ativar e desativar o Material em tempo de execução! Imagine 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:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:MaterialDesingExemplo" 
             Padding="0,60,0,0"
             Visual= "Material"
             x:Class="MaterialDesingExemplo.MainPage">
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Ola Material Design!"  />
        
        <Button Text="Botão do Forms" Visual="Default"/>
        <Button Text="Botão com Material" />
    </StackLayout>
</ContentPage>

Mesmo resultado:

Sensacional, né?

Lembrando que os controles ficam dessa forma pois seguem as diretrizes do Material, da Google. Caso queira altera-los, é possível criar effects, renderes, behaviors e etc.

Acabou? Não. Você também pode 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:

namespace MaterialDesingExemplo
{
    public class MeuMaterialControle : IVisual
    {
       
    }
}

E um botão, por exemplo:

using System;
using Android.Content;
using MaterialDesingExemplo;
using MaterialDesingExemplo.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(MeuMaterialControleRenderer), new[] { typeof(MeuMaterialControle) })]
namespace MaterialDesingExemplo.Droid.Renderers
{
    public class MeuMaterialControleRenderer : ButtonRenderer
    {
        public MeuMaterialControleRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);
            Element.Text = "Meu Botão customizado :)";
        }
    }
}

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

Seja bem-vindo ao Xamarin.Forms, Material Design!

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!