O X do Xamarin Forms — Bottom Tab page

Image for post
Image for post

Fala galera,

Tabbed-page é um controle bem conhecido em Xamarin.Forms. Geralmente implementamos o mesmo como um Menu, principalmente no iOS.

Por padrão o Tabbed-page no iOS fica localizado na parte inferior da tela, enquanto no Android fica na parte superior.:

Image for post
Image for post

Geralmente quem desenvolve para Android utiliza o famoso Menu Hambúrguer (Master-Detail) :

Image for post
Image for post

Porem se você quer realmente utilizar o Tabbed-page no Android igual do iOS, existe uma solução CustomRenderer! O que vamos fazer um CustomRenderer para isso ? Não, pra que se tem um pacote pronto ? :D

Naxam.BottomTabbedPage resolve nosso problema.

O pacote alem de implementar o Tabbed-page no Android igual ao do iOS,permite uma serie de customizações na sua page :

mas pra que falar (escrever no caso) se eu posso mostrar? Bora?

Vamos ao nuget instalar o plugin Naxam.BottomTabbedPage

Image for post
Image for post

Pronto! Vamos usar!

Para utilizarmos o controle temos que referenciar o namespace : xmlns:naxam=”clr-namespace:Naxam.Controls.Forms;assembly=Naxam.Controls.Forms” , em seguida vamos trocar a contentPage pela BottomTabbedPage :

Agora vamos criar 3 Paginas:

Image for post
Image for post

Vamos criar as 3 como no padrão abaixo, com icone e titulos :

Em seguida para ficar mais facil de mostrar, vamos colocar alguns atributos customizados na MainActivity do Android:

Vamos rodar no Android, afinal é onde queremos ver as tabs :D :

Image for post
Image for post
Image for post
Image for post

Muito loco em ?

Claro que podemos criar os ícones com os tamanhos certos por tamanho de tela e etc, mas a ideia aqui é apenas mostrar o controle ;)

Se quiser conhecer mais sobre o componente , pode acessar o repositório oficial clicando aqui.

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

Quer ver outros artigos sobre Xamarin ? Clique 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