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:
- Defina a classe base de
TabController
comoUITabBarController
. - Crie
UIViewController
instâncias para adicionar aoTabController
. - Adicione as
UIViewController
instâncias a uma matriz atribuída àViewControllers
propriedade doTabController
.
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, RootViewController
como 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 UITabBarController
arquivo . 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:
Adicione o nome do seu Storyboard à seção Interface Principal do
Info.plist
:No ,
App Delegate
substitua 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.