Barras de tabulação e controladores de barras de guias no Xamarin.iOS

Os aplicativos com guias são usados no iOS para oferecer suporte a interfaces de usuário onde várias telas podem ser acessadas em nenhuma ordem específica. Através da classe, os UITabBarController aplicativos podem facilmente incluir suporte para esses cenários de várias telas. UITabBarController cuida do gerenciamento multitelas, permitindo que o desenvolvedor do aplicativo se concentre nos detalhes de cada tela.

Normalmente, os aplicativos com guias são construídos com o UITabBarController ser da RootViewController janela principal. No entanto, com um pouco de código adicional, os aplicativos com guias também podem ser usados em sucessão a alguma outra tela inicial, como o cenário em que um aplicativo apresenta primeiro uma tela de login, seguida pela interface com abas.

Esta página discute ambos os cenários: quando as guias estão na raiz da hierarquia de exibição do aplicativo e também no não-cenárioRootViewController .

Apresentando o UITabBarController

O UITabBarController suporta o desenvolvimento de aplicativos com guias da seguinte forma:

• Permitindo que vários controladores sejam adicionados a ele.
• Fornecendo uma interface de usuário com abas, através da UITabBar classe, para permitir que um usuário alterne entre controladores e suas exibições.

Os controladores são adicionados à propriedade através de UITabBarController sua ViewControllers propriedade, que é uma UIViewController matriz. O UITabBarController próprio lida com o carregamento do controlador adequado e apresenta sua exibição com base na guia selecionada.

As guias são instâncias da UITabBarItem classe, que estão contidas em uma UITabBar instância. Cada UITabBar instância é acessível por meio TabBarItem da propriedade do controlador em cada guia.

Para entender como trabalhar com o UITabBarController, vamos percorrer a criação de um aplicativo simples que usa um.

Passo a passo do aplicativo com guias

Para este passo a passo, vamos criar o seguinte aplicativo:

Embora já haja um modelo de aplicativo com guias disponível no Visual Studio para Mac, para este exemplo, essas instruções funcionam a partir de um projeto vazio para obter uma melhor compreensão de como o aplicativo é construído.

Criando o aplicativo

Comece criando um novo aplicativo.

Selecione o item de menu Arquivo > Nova > Solução no Visual Studio para Mac e selecione um modelo de Projeto Vazio de Aplicativo > iOS>, Nomeie o projeto TabbedApplication, conforme mostrado abaixo:

Adicionando o UITabBarController

Em seguida, adicione uma classe vazia selecionando Arquivo > Novo Arquivo e escolhendo o modelo Geral: Classe vazia. Nomeie o arquivo TabController como mostrado abaixo:

A TabController classe conterá a implementação do UITabBarController que gerenciará uma matriz de UIViewControllers. Quando o usuário seleciona uma guia, o UITabBarController se encarregará de apresentar a exibição para o controlador de exibição apropriado.

Para implementar o UITabBarController precisamos fazer o seguinte:

1. Defina a classe base de TabController como UITabBarController .
2. Crie UIViewController instâncias para adicionar ao TabController .
3. Adicione as UIViewController instâncias a uma matriz atribuída à ViewControllers propriedade do TabController .

Adicione o seguinte código à TabController classe para obter estas etapas:

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

Observe que, para cada UIViewController instância, definimos a Title propriedade do UIViewController. Quando os controladores são adicionados ao UITabBarController, o UITabBarController irá ler o Title para cada controlador e exibi-lo no rótulo da guia associada, conforme mostrado abaixo:

Definindo o TabController como o RootViewController

A ordem em que os controladores são colocados nas guias corresponde à ordem em que eles são adicionados à ViewControllers matriz.

Para obter o UITabController para carregar como a primeira tela, precisamos torná-lo a janela, RootViewControllercomo mostrado no código a seguir para o AppDelegate:

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

Se executarmos o aplicativo agora, o UITabBarController será carregado com a primeira guia selecionada por padrão. Selecionar qualquer uma das outras guias resulta na exibição do controlador associado sendo apresentada pelo como mostrado abaixo, UITabBarController, onde o usuário final selecionou a segunda guia:

Modificando TabBarItems

Agora que temos um aplicativo de guia em execução, vamos modificar o para alterar a imagem e o texto exibidos, bem como para adicionar um selo TabBarItem a uma das guias.

Definindo um item do sistema

Primeiro, vamos definir a primeira guia para usar um item do sistema. No construtor do TabController, remova a linha que define o controlador para Title a tab1 instância e substitua-o pelo seguinte código para definir a propriedade do TabBarItem controlador:

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

Ao criar o UITabBarItem usando um UITabBarSystemItem, o título e a imagem são fornecidos automaticamente pelo iOS, como visto na captura de tela abaixo mostrando o ícone Favoritos e o título na primeira guia:

Configurando a imagem

Além de usar um item do sistema, o título e a imagem de um UITabBarItem podem ser definidos como valores personalizados. Por exemplo, altere o código que define a TabBarItem propriedade do controlador nomeado tab2 da seguinte maneira:

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

O código acima pressupõe que uma imagem chamada second.png foi adicionada à raiz do projeto (ou a um diretório Resources ). Para suportar todas as densidades de tela, você precisa de três imagens, como mostrado abaixo:

O tamanho recomendado varia de acordo com o estilo da imagem (circular, quadrada, larga ou alta).

A Image propriedade só precisa ser definida para o nome do arquivo second.png, o iOS carregará automaticamente os arquivos de resolução mais alta quando necessário. Você pode ler mais sobre isso nos guias Trabalhando com imagens . Por padrão, os itens da barra de guias são cinza, com uma tonalidade azul quando selecionados.

Substituindo o título

Quando a Title propriedade é definida diretamente no TabBarItem, ela substituirá qualquer valor definido para Title no próprio controlador.

A segunda guia (do meio) nesta captura de tela mostra um título e uma imagem personalizados:

Definindo o valor do selo

Uma guia também pode exibir um selo. Por exemplo, adicione a seguinte linha de código para definir um selo na terceira guia:

tab3.TabBarItem.BadgeValue = "Hi";

Executar isso resulta em um rótulo vermelho com a cadeia de caracteres "Hi" no canto superior esquerdo da guia, conforme mostrado abaixo:

O selo é frequentemente usado para exibir uma indicação de número não lido, novos itens. Para remover o selo, defina o BadgeValue como null como mostrado abaixo:

tab3.TabBarItem.BadgeValue = null;

Guias em cenários não-RootViewController

No exemplo acima, mostramos como trabalhar com um UITabBarController quando é o RootViewController da janela. Neste exemplo, examinaremos como usar um UITabBarController quando ele não é o RootViewController e mostraremos como isso é criado usando Storyboards.

Exemplo de tela inicial

Para esse cenário, a tela inicial é carregada de um controlador que não é um UITabBarControllerarquivo . Quando o usuário interage com a tela tocando em um botão, o mesmo View Controller será carregado em um UITabBarController, que é então apresentado ao usuário. A captura de tela a seguir mostra o fluxo do aplicativo:

Vamos iniciar um novo aplicativo para este exemplo. Novamente, usaremos o modelo iPhone > App > Empty Project (C#), desta vez nomeando o projeto InitialScreenDemo.

Neste exemplo, um storyboard é usado para dispor controladores de exibição. Para adicionar um storyboard:

• Clique com o botão direito do mouse no nome do projeto e selecione Adicionar > novo arquivo.

• Quando a caixa de diálogo Novo arquivo for exibida, navegue até Storyboard vazio do iPhone do iOS>.

Vamos chamar esse novo Storyboard de MainStoryboard , conforme ilustrado abaixo:

Há algumas etapas importantes a serem observadas ao adicionar um Storyboard a um arquivo que não é de storyboard, que são abordadas no guia Introdução aos Storyboards . Estes são:

1. Adicione o nome do seu Storyboard à seção Interface Principal do Info.plist:

   

2. No , App Delegatesubstitua o método Window com o seguinte código:

   public override UIWindow Window {
       get;
       set;
   }
   

Vamos precisar de três View Controllers para este exemplo. Um, chamado ViewController1, será usado como nosso Controlador de Visão Inicial e na primeira aba. As outras duas, nomeadas ViewController2 e ViewController3, que serão usadas na segunda e terceira abas, respectivamente.

Abra o Designer clicando duas vezes no arquivo MainStoryboard.storyboard e arraste três Controladores de Exibição para a superfície de design. Queremos que cada um desses View Controllers tenha sua própria classe correspondente ao nome acima, então, em Identity > Class, digite seu nome, conforme ilustrado na captura de tela abaixo:

O Visual Studio para Mac gerará automaticamente as classes e os arquivos de designer necessários, isso pode ser visto no Solution Pad, conforme ilustrado abaixo:

Criando a interface do usuário

Em seguida, criaremos uma interface de usuário simples para cada uma das exibições do ViewController, usando o Xamarin iOS Designer.

Queremos arrastar um Label e um Button para ViewController1 a partir da ToolBox no lado direito. Em seguida, usaremos o Bloco de propriedades para editar o nome e o texto dos controles para o seguinte:

• Gravadora : Text = Um
• Botão : Title = O usuário toma alguma ação inicial

Estaremos controlando a visibilidade do nosso botão em um TouchUpInside evento, e precisamos nos referir a ele no code-behind. Vamos identificá-lo com o NomeaButton no Bloco de Propriedades, conforme ilustrado na captura de tela a seguir:

O Design Surface deve agora ser semelhante à captura de ecrã abaixo:

Vamos adicionar um pouco mais de detalhes a ViewController2 e ViewController3, adicionando um rótulo a cada um e alterando o texto para 'Dois' e 'Três', respectivamente. Isso destaca para o usuário qual guia/exibição estamos olhando.

Ligar o botão

Vamos carregar ViewController1 quando o aplicativo for iniciado pela primeira vez. Quando o usuário tocar no botão, ocultaremos o botão e carregaremos um UITabBarController com a ViewController1 instância na primeira guia.

Quando o usuário libera o aButton, queremos que um evento TouchUpInside seja acionado. Vamos selecionar o botão e, na guia Eventos do painel Propriedades , declarar o manipulador de eventos – InitialActionCompleted para que ele possa ser referenciado no código. Isso é ilustrado na captura de tela abaixo:

Agora precisamos dizer ao View Controller para ocultar o botão quando o evento for acionado.InitialActionCompleted No ViewController1, adicione o seguinte método parcial:

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

Salve o arquivo e execute o aplicativo. Devemos ver a tela um aparecer e o botão desaparecer no Touch Up.

Adicionando o controlador da barra de guias

Agora temos nossa visão inicial funcionando conforme o esperado. Em seguida, queremos adicioná-lo a um UITabBarController, juntamente com as Visualizações 2 e 3. Vamos abrir o Storyboard no Designer.

Na Caixa de Ferramentas, procure o Controlador da Barra de Guias em Controladores & Objetos e arraste-o para a Superfície de Design. Como você pode ver na captura de tela abaixo, o Tab Bar Controller é sem interface do usuário e, portanto, traz dois View Controllers com ele por padrão:

Exclua esses novos controladores View selecionando a barra preta na parte inferior e pressionando delete.

Em nosso Storyboard, podemos usar o Segues para lidar com as transições entre o TabBarController e nossos View Controllers. Depois de interagir com a Exibição Inicial, queremos carregá-la no TabBarController apresentado ao usuário. Vamos configurar isso no designer.

Clique com a tecla Ctrl pressionada e arraste do botão para o TabBarController. Ao passar o mouse-up, um menu de contexto será exibido. Queremos usar um modal seguido.

Para configurar cada uma de nossas guias, clique com a tecla Ctrl pressionada no TabBarController para cada um de nossos Controladores de Exibição na ordem de um a três e selecione a guia Relacionamento no menu de contexto, conforme ilustrado abaixo:

Seu Storyboard deve se parecer com a captura de tela abaixo:

Se clicarmos em um dos itens da barra de guias e explorarmos o painel de propriedades, você poderá ver várias opções diferentes, conforme ilustrado abaixo:

Podemos usar isso para editar certos atributos, como o selo, o título e o identificador do iOS, entre outros.

Se salvarmos e executarmos o aplicativo agora, descobriremos que o botão reaparecerá quando a instância ViewController1 for carregada no TabBarController. Vamos corrigir isso verificando se o Modo de Exibição atual tem um Controlador de Exibição pai. Se isso acontecer, sabemos que estamos dentro do TabBarController e, portanto, o botão deve estar oculto. Vamos adicionar o código abaixo à classe ViewController1:

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

Quando o aplicativo é executado e o usuário toca no botão na primeira tela, o UITabBarController é carregado, com a visualização da primeira tela colocada na primeira guia, conforme mostrado abaixo:

Resumo

Este artigo abordou como usar um UITabBarController em um aplicativo. Explicamos como carregar controladores em cada guia, bem como definir propriedades em guias, como título, imagem e selo. Em seguida, examinamos, usando storyboards, como carregar um UITabBarController em tempo de execução quando ele não é o RootViewController da janela.

Links relacionados

• Images.zip
• Referência de classe UITabBarController