Xamarin Forms – Android TabbedPage com navegação inferior

Se você tem acompanhado o lançamentos e atualizações do Xamarin e Xamarin Forms deve ter acompanhado que nas versões 3.0 e 3.1 foram disponibilizadas diversas melhorias para criação e telas e performance nos aplicativos.

Neste post, vou falar um pouco sobre uma melhoria que foi disponibilizada na versão 3.1 do Xamarin Forms que já vinha sendo pedida a tempos pela comunidade, criar em aplicativo Android, uma página com Abas onde fosse possível setar a barra de navegação na parte inferior da página, em outras palavras setar a barra de navegação da tab page na parte de baixo da tela, comportamento nativo do iOS. A falta desta feature causou algumas horas a mais de trabalho para muitos desenvolvedores Xamarin..

Você pode ver todas as features que foram disponibilizadas na versão 3.1 do Xamarin Froms neste endereço.

Importante: Para que você consiga reproduzir o comportamento citado neste post, você precisará ter a versão 3.1.0.637273 ou superior do Xamarin Forms instalado no projeto .Net Standart e em todas as plataformas. Para verificar/atualizar, verifique os pacotes nugets instalados nos projetos.

Setando a barra navegação na parte inferior da página

Crie um aplicativo Xamarin Forms no Visual Studio, então adicione uma nova TabbedPage e altere o App.xaml.cs para que esta página seja a inicial do aplicativo. No meu caso, nomeei a TabbedPage de TabBottomPage o construtor da App.xaml.cs ficou assim:

public App ()
{
    InitializeComponent();

    MainPage = new TabBottomPage();
}

Após setado a TabBottomPage.xaml como MainPage do aplicativo, vamos configura-la para que a barra de negação das abas fique na parte inferior da página.

Abra a página TabBottomPage.xaml, na área de declaração de namespaces da página vamos adicionar as linhas:

xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"

A primeira linha refere-se ao namespace do Xamarin referente ao tratamento de comportamento das plataformas e a segunda é onde setamos a posição da barra de navegação.

Veja que na segunda linha setamos a propriedade ToolbarPlacement para Bottom. Isto fará com que a barra de navegação seja exibida na parte inferior da tela. Caso você queria alterar para que barra de navegação volte a ser exibida na parte superior você apenas apagar esta linha ou setar como Top.

Alterando a cor das abas

Para alterar a cor dos itens na aba, vamos adicionar a linha de código abaixo também na declaração da TabbedPage:

android:TabbedPage.BarItemColor="#ff0000"

E para alterar a cor do item selecionado na barra de navegação das abas:

android:TabbedPage.BarSelectedItemColor="#00ff00"

Conclusão

A melhoria liberada pela equipe de desenvolvimento do Xamarin Forms é bastante útil para aplicativos que devem ter a mesma experiência de navegação entre abas nas duas plataformas (android e ios). De forma simples, sem que precisemos manipular as plataformas, com poucas linhas de código temos acesso a esta personalização.

E ai, curtiu?

—

#Ubuntu

Imagem utilizada no post Pixabay