234. Xamarin (4) - TabBar

Una herramienta muy útil para navegar en nuestra aplicación es por medio de una TabbedPage, esta nos permite tener un solo control, que administre a donde va a ir nuestra aplicación.

Ahora bien por default el tabPage, en IOS lo coloca en la parte inferior, pero en Android en la parte superior, lo cual no es deseable, ya que por lo regular este tipo de controles siempre están en la parte inferior, por lo que el objetivo de este post será crear el tabbedPage y colocarlo en la parte inferior de la aplicación para ambos sistemas operativos moviles.

¿Cómo se hace esto?

Primero creamos un contentPage (XAML), en la que el contenedor será un TabbedPage

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:local="clr-namespace:AudioLetras"
             x:Class="AudioLetras.MenuPrincipal">
    <local:Hogar IconImageSource="home"></local:Hogar>
    <local:Buscar IconImageSource="search"></local:Buscar>
    <local:Audio IconImageSource="play"></local:Audio>
</TabbedPage>

En este código vamos a destacar varias partes.

1. Es necesario crear un espacio de nombres que haga referencia al proyecto sobre el que estamos trabajando.

xmlns:local="clr-namespace:AudioLetras"

2. Cada una de las pestañas del tabbedPage las vamos a agregar de esta forma

    <local:Hogar IconImageSource="home"></local:Hogar>
    <local:Buscar IconImageSource="search"></local:Buscar>
    <local:Audio IconImageSource="play"></local:Audio>

Ahora vamos a escribir el código del backend

    public partial class MenuPrincipal : Xamarin.Forms.TabbedPage
    {
        public MenuPrincipal()
        {
            InitializeComponent();
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        }
    }

¿Que vemos aquí?

1. Tenemos que cambiar la forma de la cual estamos heredando las características para el trabajo en la misma

public partial class MenuPrincipal : Xamarin.Forms.TabbedPage

2. Vamos a colocar en Android explícitamente la barra en la parte inferior

On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

y la ultima fase, vamos a crear formularios por cada pagina que vamos a tener en este tabbedPage

Al ejecutar nuestro código

Felices Lineas