Olá, neste post irei demonstrar como criar bottom tabs em suas aplicações Android feitas com Xamarin.Forms.
A partir do Android Support Library 25, os Apps não estão mais limitados que suas Tabs fiquem na parte superior da interface.
Para utilizar este recurso é necessário a versão 3.1.0 do Xamarin.Forms.
Bottom Tabs
Em sua TabbedPage adicione o nomespace para android e defina TabbedPage.ToolbarPlacement como “Bottom”.
| <?xml version="1.0" encoding="utf-8" ?> | |
| <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
| x:Class="BottomTabsDemo.Home" | |
| Title="Demo" | |
| BarBackgroundColor="#2196F3" | |
| BarTextColor="White" | |
| xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" | |
| android:TabbedPage.ToolbarPlacement="Bottom"> | |
| <ContentPage Title="Home" Icon="home.png"/> | |
| <ContentPage Title="RSS" Icon="rss.png"/> | |
| </TabbedPage> |
Estilizando
Para facilitar na estilização, foram fornecidas duas novas propriedades:
- BarItemColor
- BarSelectedItemColor
Veja como utiliza-las a seguir.
| <?xml version="1.0" encoding="utf-8" ?> | |
| <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" | |
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
| x:Class="BottomTabsDemo.Home" | |
| Title="Demo" | |
| BarBackgroundColor="#2196F3" | |
| BarTextColor="White" | |
| xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" | |
| android:TabbedPage.ToolbarPlacement="Bottom" | |
| android:TabbedPage.BarItemColor="#66FFFFFF" | |
| android:TabbedPage.BarSelectedItemColor="White"> | |
| <ContentPage Title="Home" Icon="home.png"/> | |
| <ContentPage Title="RSS" Icon="rss.png"/> | |
| </TabbedPage> |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
