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

Thiago Bertuzzi
Apr 12, 2018 · 3 min read

Fala galera,

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

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!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade