O X do Xamarin Forms — Títulos grandes do IOS 11 Custom Renderer em Ação

Image for post
Image for post

Fala galera,

No iOS 11 a apple implementou (alem do topetinho do iphone trump,digo X) em sua interface títulos grandes :

Image for post
Image for post
Titulos grandes Fonte: Blog Xamarin

Claro que a galera da Xamarin ia implementar isso para utilizarmos de forma nativa , e criou na ViewDidLoad do Projeto iOS a propriedade “NavigationBar.PrefersLargeTitles = true;” .

Se quer conhecer como funciona , pode acessar o blog oficial deles clicando aqui

But,Entretanto , todavia… e se eu quiser ter mais controle? Como assim ? se eu quero decidir quais paginas utilizarão esse recurso ou não, ao invés de apenas fixar no projeto ?

Simples, implementa não mão :D , como ? Vamos ver!

Implementando títulos grandes

Primeiro vamos criar uma propriedade para controlarmos a exibição do titulo grande:

Utilizando o conceito de attached properties fica mais facil para utilizarmos nossa propriedade no próprio XAML.

Agora vamos criar nosso custom renderer que sera responsável pela alteração do titulo…

Para tudo! Mas que diabos é custom renderer? OK, vamos fazer uma pausa na customização para eu explicar de forma resumida!

#if(explicacaoCustomRenderer)

Xamarin.Forms é realmente incrível,porem seu conceito é simples : Controles Comuns a todas as plataformas. Manjaram ? No caso o que queremos fazer é utilizar uma propriedade que existe apenas no iOS,logo temos que ir alem do Xamarin.Forms.

É ai que entra o custom renderer,com ele podemos acessar os controles nativos de cada plataforma, modificando: aparência, comportamento , propriedades e etc. Basicamente estamos programando de forma nativa para cada plataforma.

Se quiser saber mais sobre custom renderer pode acessar a documentação oficial clicando aqui.

#endif

Certo! Agora vamos criar nosso prorpio custom renderer no projeto IOS:

Basicamente, quando nossa ViewAparecer ele ira verificar a propriedade, e caso esteja true ele ira alterar as preferencias para titulo grande. Quando mudarmos de tela (ou sair da view de outra forma) ele ira mudar as preferencias para titulo normal.

Mas como ele entende que precisa chamar o custom renderer? A resposta esta na linha : [assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))] . Nela eu consigo vincular o custom renderer CustomPageRenderer a ContentPage.

Assim ao utilizar a ContentPage ele sabe que precisa utilizar os eventos nativos do IOS.

Agora vamos implementar no XAML:

Rodando! MA oeeee!

Com titulo grande ExibirTituloGrande=”True”:

Com titulo normal ExibirTituloGrande=”False”:

Legal né?

Com custom renderer o céu é o limite!

O Objetivo desse artigo é explicar um pouco da liberdade do custom renderer , entretanto existem coisas que podemos resolver com um simples effects.. O que é effects? Nos vemos no próximo episódio ;)

Se quiser pode baixar o código de exemplo aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store