O X do Xamarin Forms — CurvedBottomTabbedPage

Thiago Bertuzzi
Jan 3 · 3 min read

Fala Galera,

Tudo beleza?

Antes de mais nada Desejo um Feliz Ano novo e um Otimo 2020 a todos!

E nada melhor do que começar o Ano Com Artigo novo , não? Então bora que 2020 vai ser no gas!

TabbedPage é um controle extremamente utilizado. Surgiu como padrão para criar menus no iOS da mesma forma que o Menu Hamburguer era o padrão para o Android.

Com o tempo a galera começou a padronizar os Apps utilizando o menu nas duas plataformas, e o TabbedPage que era por padrão "Top" no android começou a ser permitido/utilizado na parte de baixo da tela (bottom).

Porem não bastava utilizar a TabbedPage padrão, muitos designers querem modificar a mesma para dar um destaque especial no seu App. Como por exemplo um botão central arredondado, ou ate maior que os outros.

Não temos como fazer isso por padrão no Xamarin.Forms . Não temos com o que ja vem pronto, mas com criatividade e criando controles tudo é possivel :D.

Existem diversas maneiras de Alterar o TabbedPage para obter o formato e padrão desejado, a maioria utiliza CustomRenderer para criar o controle especifico por plataforma, porem esses dias um controle me chamou a atenção o FormsCurvedBottomNavigationView . ( Quando digo esses dias, foi na semana passada mesmo).

Então brincando um pouco com ele, resolvi trazer para vocês. Quem sabe ajuda alguem que precisa utilizar em seu APP , não?

Então bora ver como utilizar e deixar nosso app com uma TabbedPage muito louca!

Antes de mais nada o Projeto ainda esta em Desenvolvimento e funciona apenas com o Android. no iOS TabbedPage continuara a mesma. Mas nada que logo não seja implementado ;). Inclusive o Desenvolvedor esta aceitando Pull requests para quem quiser ajudar no projeto 👀


Atualização 10/01/2020 : Foi liberada a versão para iOS. Agora o pacote funciona nas duas plataformas \o/


Instalando o controle

Muito bem vamos ao querido nuget instalar o pacote FormsCurvedBottomNavigation no projeto compartilhado :

Simples assim , sem mais configurações.

Utilizando o controle

Vamos substituir nossa pagina principal pela CurvedBottomTabbedPage utilizando o namespace xmlns:curvebottomnavigation=”clr-namespace:FormsCurvedBottomNavigation;assembly=FormsCurvedBottomNavigation” tambem vamos utilizar o namespace xmlns:android=”clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core” para customizarmos a tabbar do Android :

FabIcon é responsavel por dizer qual a imagem que sera exibida na aba do centro.

FabBackgroundColor é a cor do botão.

Podemos usar as propriedades proprias do Android para mudar a cor dos botoes e da barra. (Pode aprender mais sobre essas propriedades clicando aqui. )

Em seguida no MainPage.xaml.cs vamos implementar as chamadas das tabs :

this.NavigateToPage serve para dizer qual pagina sera acionada ao clicar no FabIcon. O Resto é apenas uma configuração normal de uma Tabbedpage.

E Agora para finalizar vamos criar uma pagina simples de Exemplo que sera chamada ao clicar no botão :

Não esqueça de adicionar as imagens dos icones na pasta Resources do Android.

Pronto!

Vamos rodar :

Muito simples não ? Claro que como é uma versão inicial pode conter bugs, porem como eu sempre digo : utilizem controles opensource.

Você pode pegar o conteudo e aplicar direto no seu projeto, ou ajudar a comunidade corrigindo/melhorando o controle e enviando um pull request.

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

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