Mobits

O modelo Split View-based permite que você crie uma interface de visualização dividida em sua aplicação. O lado esquerdo da tela exibe uma lista de itens selecionáveis, e o lado direito exibe os detalhes do item selecionado. Este artigo mostrará como desenvolver um aplicativo baseado nesse modelo para o iPad.

Começando o projeto

Na janela de diálogo de novo projeto, escolha o "Split View-based Application". Dê um nome para o seu projeto (o meu será um projeto de Portfolio).

Observe na imagem abaixo que além do AppDelegate ele cria mais duas classes: o RootViewController e o DetailViewController. Mais tarde eu explicarei como eles se encaixarão nessa dinâmica toda.

Mande rodar o projeto (Command + R) e veja como ficam as telas nas figuras abaixo. Quando o iPad está deitado, a lista fica visível à esquerda. Quando em pé, ele aparece como um menu suspenso.

Olhando o AppDelegate

Se olharmos o código de PortfolioAppDelegate.h,

podemos ver que ele tem um UISplitViewController. Esse elemento vai "abrigar" dois viewControllers: o RootViewController e o DetailViewController - que, respectivamente, serão a lista com os itens a serem selecionados e a tela que exibe algo de acordo com a seleção da lista.

Na implementação do PortfolioAppDelegate, nenhuma novidade:

Somente adiciona a view do splitViewController na window.

Olhando o XIB

Abrindo o arquivo MainWindow.xib, podemos ver que ele tem um Split View Controller. Dentro dele, dois elementos: o NavigationController e um view controller (cuja classe é referenciada pela classe DetailViewController no projeto). Dentro do NavigationController,

temos um Navigation Bar e outro viewController, referenciado pelo RootViewController do projeto.

No AppDelegate, algo que já era de se esperar:

todos os elementos com propriedade IBOutlet no PortfolioAppDelegate.h ligados com seus correspondentes no XIB.

Olhando os ViewControllers

Depois de olharmos o XIB, vamos ver como a mágica acontece dentro dos dois viewControllers do projeto. Numa rápida olhada no RootViewController.h

percebemos que ele é filho de um UITableViewController, que servirá para tabelar os valores a serem exibidos na tela. Eu criei o array portfolio que guardará os valores que serão exibidos na tela.

Agora, olhando o código de DetailViewController.h,

podemos perceber que ele implementa dois protocolos:

• UIPopoverControllerDelegate: para controlar o popover que irá exibir o conteúdo da tableView do RootViewController quando o iPad estiver em pé (posição retrato);
• UISplitViewControllerDelegate: para dizer o que fazer (esconder ou exibir) o PopoverView quando o iPad mudar a orientação.

Na implementação, o Xcode gera para o DetailViewController quatro métodos que nos interessam para o nosso exemplo. O primeiro,

serve para utilização do detailItem dentro da classe. Na declaração da classe ele foi declarado como um id, e a ideia é que ele seja utilizado para popular os valores a serem exibidos na tela. No RootViewController, eu atribuí a ele um NSDictionary com duas chaves: o texto a ser exibido e o nome da imagem a ser mostrada. Mas a ideia é não mexer muito nesse método, e sim no próximo:

Olhando o código você pode perceber que as propriedades da label e da imagem são alteradas, ou seja, é aqui que parte da "mágica" acontece. Os outros dois métodos são implementações dos protocolos assinados:

Confesso que mexi quase nada neles. O primeiro é acionado quando a tela é rotacionada para o modo retrato (em pé). E o outro, o contrário: ele é o que faz o RootViewController ser exibido novamente quando o aparelho é posto em modo paisagem.

Enfim, com um código simples já consigo fazer uma aplicação de portfólio. Para facilitar, eu coloquei em dois arquivos .plist a relação entre os nomes das posições na tableView com os arquivos de imagem e com suas descrições. E criei uma classe utilitária para fazer o acesso aos arquivos. Tudo isso você pode consultar baixando o projeto. Abaixo segue algumas telas do projeto.