tabbed

Xamarin.Forms – TabbedPage

Como prometemos no Webinar de Customização, vamos falar um pouco da TabbedPage em um post. Então vamos começar?

A TabbedPage é um componente do Xamarin.Forms que nos permite criar uma lista de páginas com abas para acessá-las. O Xamarin.Forms é responsável por renderizá-las em cada plataforma.

A TabbedPage herda a MultiPage que podemos, de forma grosseira, comparar a uma List.

A TabbedPage pode ser feita diretamente no Código ou no XAML. Vamos ver as duas formas de fazer isso :)

No CS:

public MinhasAbas : TabbedPage
    {
        public MinhasAbas ()
        {
            this.Title = "Como Usar Abas";
 
            this.Children.Add(new ContentPage (){
                Title = "1ª Aba",
                Icon = "icon.png",
                Content = new StackLayout(){
                  Children = {
                    new Label(){Text="Primeira Aba"}
                  }
                }
            });
            this.Children.Add(new ContentPage (){
                Title = "2ª Aba",
                Icon = "icon.png",
                Content = new StackLayout(){
                  Children = {
                    new Label(){Text="Segunda Aba"}
                  }
                }
            });
            this.Children.Add(new ContentPage (){
                Title = "3ª Aba",
                Icon = "icon.png",
                Content = new StackLayout(){
                  Children = {
                    new Label(){Text="Terceira Aba"}
                  }
                }
            });
            this.Children.Add(new ContentPage (){
                Title = "4ª Aba",
                Icon = "icon.png",
                Content = new StackLayout(){
                  Children = {
                    new Label(){Text="Quarta Aba"}
                  }
                }
            });
            this.Children.Add(new ContentPage (){
                Title = "5ª Aba",
                Icon = "icon.png",
                Content = new StackLayout(){
                  Children = {
                    new Label(){Text="Quinta Aba"}
                  }
                }
            });
            this.Children.Add(new ContentPage (){
                Title = "6ª Aba",
                Icon = "icon.png",
                Content = new StackLayout(){
                  Children = {
                    new Label(){Text="Sexta Aba"}
                  }
                }
            });
            
        
        }
    }

No XAML:

<TabbedPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:HowUseTab;assembly=HowUseTab"
    x:Class="HowUseTab.MinhasAbas">
    <TabbedPage.Children>
        <ContentPage Title="1ª Aba" Icon="icon.png">
          <StackLayout>
            <Label Text="Primeira Aba" FontSize="18" TextColor="Green" FontFamily="HelveticaNeue-Medium"></Label>
          </StackLayout>
        </ContentPage>
        <ContentPage Title="2ª Aba" Icon="icon.png" />
        <ContentPage Title="3ª Aba" Icon="icon.png" />
        <ContentPage Title="4ª Aba" Icon="icon.png" />
        <ContentPage Title="5ª Aba" Icon="icon.png" />
        <ContentPage Title="6ª Aba" Icon="icon.png" />
    </TabbedPage.Children>
</TabbedPage>

Assim, conseguimos criar o componente de abas nas três plataformas com um código simples.

Podemos criar Templates para as abas e utilizar MVVM para preencher esse template.

Alguns pontos interessantes:

No Android, não está implementada a possibilidade de inserir Imagens na Aba, mas é possível fazer CustomTabbedPageRenderer

No iOS, existe um limitador de 5 abas. Caso apareça a sexta aba, ficamos com 4 abas nossas e o botão “More…” ou “Mais…” e assim podemos acessar as outras abas. O mais interessante é que isso funciona de forma automática e é gerenciado pelo próprio iOS e permite que o usuário escolha os itens que ele gostaria de ver na lista principal dessas abas.

No Android e iOS, as abas não possuem o método de swipe implementado, mas é possível fazer – ExtendTabbedPage.

No WindowsPhone, não existe um componente de aba. Dessa forma, é criado um Panorama para que tenha o funcionamento esperado. Esse também não possui imagens mas é possível criar – estamos desenvolvendo esse Renderer – mas o Swipe existe.

Quando suas abas possuírem busca de dados na Web (Rest/Soap), é interessante que você crie o override do método OnAppearing nas ContentPage para que não demore muito para o App mostrar as Abas. Caso demore muito o app pode ser reprovado nas Stores.

O código já está no GitHub e conta com um TabbedRenderer para utilização de Icones nas Abas do Android.

GitHub

As Imagens como prometido. Como dispor de uma forma mais bonita, coloquei a própria galeria do WordPress.

Por hoje é só! Aprenda mais sobre todos os tipos de Pages suportadas pelo Xamarin neste artigo.

Xamarin.Forms – TabbedPage
5 (100%) 1 voto

Rafael Moura

Desenvolvedor .NET, mais de 5 anos de experiência, apaixonado por tecnologia, Xamarin Student Partner Regional Lead Central/South America, Xamarin Comunity Speaker, Xamarin Certified Mobile Developer e Windows Phone Developer.

3 comentários em “Xamarin.Forms – TabbedPage

    1. Fabrizio, Boa Tarde.

      Nós vamos colocar as imagens sim, como sempre fazemos.

      Só temos um pequeno problema com a rede durante a parte da manhã e tarde. Mas sempre atualizamos na parte da noite.

      Obrigado.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: