O Xamarin.Forms Tabbed Page consiste em uma barra de guias e área para o conteúdo do app, que ao clicar na guia você navega para a página relacionada à guia. Este artigo demonstra como usar uma página com guias para navegar através de uma coleção de páginas.

Visão geral

As seguintes imagens mostram uma página com guias em cada plataforma:

tab1

Veja o detalhe do componente em cada plataforma:

tabbedpage-components

 

O layout da página tabulada, e suas guias dependente da plataforma:

No iOS, a lista de guias aparece na parte inferior da tela.

Cada guia também tem um ícone que deve ser um PNG 30×30 com transparência para a resolução normal, 60×60 em alta resolução, e 90×90 para a resolução do iPhone 6 Plus.

Se houver mais de cinco guias, uma guia “mais” irá aparecer, que pode ser usado para acessar as guias adicionais.

Para mais informações sobre o carregamento de imagens em um aplicativo Xamarin.Forms, consulte Trabalhando com imagens.

No Android, a lista de guias aparece na parte superior da tela. Os nomes das guias são automaticamente convertido para letras maiúsculos, o usuário pode deslizar as guias caso haja uma quantidade superior que caiba na tela.

No Windows Phone, a lista de guias aparece na parte superior da tela. Os nomes das guias são automaticamente convertidos em letras minúsculas, o usuário pode deslizar as guias, se houver muitas guias que não caibam na tela.

Criando uma página com guias

Podemos fazer isso de duas maneiras:

Nas duas abordagens, o TabbedPage irá exibir a página de acordo com cada guia que o usuário seleciona.

Recomenda-se que o TabbedPagedeve ser preenchido apenas com instâncias de NavigationPage e ContentPage. Isso vai ajudar a garantir que funcione corretamente em todas as plataformas.

Preenchendo o TabbedPage com uma coleção de Page

O seguinte exemplo de código XAML mostra uma página com guias construído por preenchê-lo com uma coleção de objetos de criança Página:

[xml] <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" Icon="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
[/xml]

O exemplo a seguir mostra o mesmo TabbedPage em C#:

[csharp] public class MainPageCS : TabbedPage
{
public MainPageCS()
{
var navigationPage = new NavigationPage(new SchedulePageCS());
navigationPage.Icon = "schedule.png";
navigationPage.Title = "Schedule";

Children.Add (new TodayPageCS());
Children.Add (navigationPage);
}
}
[/csharp]

A página com guias é preenchida com duas Páginas. O primeiro item é uma instância de ContentPage, e o segundo guia é um NavigationPage que recebe uma instância de um objeto ContentPage.

O TabbedPage não suporta virtualização de UI. Portanto, o desempenho pode ser afetado se houver muitas abas.

As seguintes imagens mostram o TodayPage ContentPage, que é mostrado na guia Today:

today-page

 

Selecionando a guia Schedule é exibido a instância de Schedule ContentPage, que é está envolto em uma instância de NavigationPage, veja na imagem abaixo:

schedule-page

Para obter informações sobre o layout de um NavigationPage, consulte Performing Navigation.

Embora seja aceitável colocar um NavigationPage em uma TabbedPage, não é recomendado para colocar um TabbedPage em um NavigationPage. Isto porque, no iOS, um UITabBarController sempre atua como um wrapper para o UINavigationController. Para mais informações, consulte Combined View Controller Interfacesna Biblioteca de desenvolvedor iOS.

Navegando de dentro da Aba

A navegação pode ser realizada através de uma ação de um botão qualquer chamando o método PushAsync que se encontra na propriedade Navigation da instância de ContentPage, conforme demonstrado no seguinte exemplo de código:

[csharp]

async void OnUpcomingAppointmentsButtonClicked (object sender, EventArgs e)
{
await Navigation.PushAsync (new UpcomingAppointmentsPage ());
}

[/csharp]

O código acima faz com que a pagina UpcomingAppointmentsPage se torna a página ativa. Veja nas imagens abaixo:

navigationpage

Para mais informações sobre a execução de navegação usando a classe NavigationPage, consulte Hierarchical Navigation.

Populando o TabbedPage com Template

O seguinte exemplo de código XAML abaixo mostra um TabbedPage construída através da atribuição de um DataTemplate à propriedade DataTemplate para retornar páginas através de uma coleção de objetos:

[xml]

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}" Font="Bold,Large" HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}" WidthRequest="200" HeightRequest="200" />
<StackLayout Padding="50, 10">
<StackLayout Orientation="Horizontal">
<Label Text="Family:" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}" Font="Bold,Medium" />
</StackLayout>

</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>

[/xml]

No código abaixo o TabbedPage será preenchido com dados, definindo a propriedade ItemsSource no construtor do code-behind da página:

[csharp]

public TabbedPageDemoPage ()
{

ItemsSource = MonkeyDataModel.All;
}

[/csharp]

O exemplo de código a seguir mostra o equivalente criado em códido C#:

[csharp] public class TabbedPageDemoPageCS : TabbedPage
{
public TabbedPageDemoPageCS ()
{
var booleanConverter = new NonNullToBooleanConverter ();

ItemTemplate = new DataTemplate (() =&amp;amp;gt; {
var nameLabel = new Label {
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
nameLabel.SetBinding (Label.TextProperty, "Name");

var image = new Image { WidthRequest = 200, HeightRequest = 200 };
image.SetBinding (Image.SourceProperty, "PhotoUrl");

var familyLabel = new Label {
FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
FontAttributes = FontAttributes.Bold
};
familyLabel.SetBinding (Label.TextProperty, "Family");

var contentPage = new ContentPage {
Icon = "monkeyicon.png",
Content = new StackLayout {
Padding = new Thickness (5, 25),
Children = {
nameLabel,
image,
new StackLayout {
Padding = new Thickness (50, 10),
Children = {
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Family:", HorizontalOptions = LayoutOptions.FillAndExpand },
familyLabel
}
},

}
}
}
}
};
contentPage.SetBinding (TitleProperty, "Name");
return contentPage;
});
ItemsSource = MonkeyDataModel.All;
}
}
[/csharp]

Cada aba exibirá um ContentPage com um StackLayout e um label para exibir dados. As imagens abaixo mostram o conteúdo do aba Tamarin:
tab3

O TabbedPage não suporta UI Virtualização. Portanto, o desempenho pode ser afetado se a TabbebPage contém muitos elementos filhos.

Para mais informações sobre TabbedPage, consulte o Capítulo 25 do Xamarin.Forms livro de Charles Petzold.

Resumo

Este artigo demonstrou como usar uma página com abas para navegar através de uma coleção de páginas. O Xamarin.Forms TabbedPage consiste em uma lista de abas que carrega o conteúdo específico para cada aba

 

Artigo Original:  https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/tabbed-page/

 

1 Comentário. Deixe novo

Deixe uma resposta

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

Preencha esse campo
Preencha esse campo
Digite um endereço de e-mail válido.
Você precisa concordar com os termos para prosseguir

Menu