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
Comentários