Tutorial iOS: Criando uma UITableView no XCode 5, usando Storyboard

On 14 de fevereiro de 2014 by Conrado Carneiro
Tutorial para iOS

Tutorial para iOS

A partir de hoje iremos abordar também aqui no Blog assuntos relacionados ao mundo Apple. Dicas, notícias e principalmente Tutorias relacionados a programação para iOS, como por exemplo, técnicas e boas práticas de programação. Meu nome é Conrado Carneiro, sou estudante de Ciência da Computação na Universidade Federal de Ouro Preto e faço parte da equipe de desenvolvimento do iMobilis.
Em nosso primeiro post irei falar sobre como criar uma UITableView no XCode 5 utilizando uma Storyboard…

Primeiro, o que é uma TableView? TableView é um elemento de Interface de Usuário (UI) comum nos aplicativos para iOS. Muitos aplicativos, em vários aspectos, usam o TableView para exibir uma lista de dados. O melhor exemplo é o aplicativo de contatos do iPhone, onde todos os contatos são exibidos em uma TableView, um outro exemplo é o aplicativo Mail, que usa para exibir os e-mails. Podemos utilizar também para exibir imagens, como por exemplo o aplicativo produzido pelo nosso laboratório uGuide UFOP, que exibe os eventos em um TableView, combinando textos e imagens, conforme a imagem a baixo:

UITableView utilizada no uGuide

UITableView utilizada no uGuide

Criando o projeto:

Agora que temos uma ideia do que é a TableView, vamos por a mão na massa e criar um aplicativo simples…
Abra o XCode, crie um novo projeto usando o template “Single View Application”. 

Criando Projeto

Selecionando o template no Projeto do XCode

Clique em “Next” para continuar.
Na tela seguinte, preencha todas as opções necessárias para  criar o projeto.

Product Name: SimpleTable – Esse é o nome do seu aplicativo.
Orgazination Name: Conrado – Nome da organização / empresa ou responsável pelo aplicativo.
Company Identifier: com.conrado – Esse é na verdade, o nome de domínio escrito ao contrário. Se você tem um domínio, você pode usar seu próprio nome de domínio. Caso contrário, pode usar algo como “edu.self”.
Class Prefix: SimpleTable – O XCode usa o Class Prefix para o nome de classes automático.

Opções do Projeto

Opções do Projeto

Clique “Next” para continuar. O XCode irá perguntar onde você deseja salvar o projeto “SimpleTable”. Escolha qualquer pasta (Ex.: Desktop) , em seguida desmarque a opção “Source Control”. Clique em “Create” para continuar e o projeto será criado automaticamente com base nas opções fornecidas por você.

Tela principal do Projeto

Tela principal do Projeto

Projetando a View


Primeiro nos vamos criar a interface do usuário (User Interface) e adicionar a tableView.
Selecione o arquivo Main.storyboard no Project Navigator (lista de arquivos a esquerda) alternando assim, para a interface da Storyboard, conforme a imagem a seguir.

Tela principal da Storyboard

Tela principal da Storyboard

Na biblioteca de objetos (Object Library) selecione a  e arraste para dentro da view.

Adicionando TableView

Arraste o objeto TableView selecionado para a view

Redimensione a altura da Table View evitando que ela não cubra a barra de status, conforme mostrado na imagem abaixo:

Redimensionando a TableView

Redimensionando a TableView

Executando seu aplicativo pela primeira vez

Antes de continuarmos, tente executar seu aplicativo usando o Simulador. Clique no botão “Run” (Command+R) para compilar seu aplicativo e testa-lo, se tudo estiver certo, o resultado apresentado é igual a imagem a seguir:

Resultado exibido no Simulador

Resultado exibido no Simulador

Fácil né? Você está pronto para fazer o designer da TableView do seu aplicativo. Até o momento a tabela está em branco, agora escreveremos algumas linhas de código para adicionar conteúdo a ela.

Adicionando Dados a Tabela

Volte no Project Navigator, o mesmo utilizado para selecionar o Main.storyboard e selecione o arquivo “ViewController.h”. O código deverá ser igual ao apresentado a seguir:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end
[/sourcecode]

Vamos adicionar os protocolos UITableViewDataSource e UITableViewDelegate que são responsáveis em controlar a TableView e adicionar informações a elas.

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@end
[/sourcecode]

UITableViewDataSource e UITableViewDelegate O que eles são? A UITableView é a classe por trás da exibição da TableView, ela foi desenvolvida para ser flexível e lidar com vários tipos de dados. Você pode exibir nela uma lista de países ou nomes de contatos, ou como nosso exemplo, exibir uma lista de carros. Então como fazemos para a Table View exibir essa lista de dados? UITableViewDataSource é a resposta! Esse protocolo é responsável pela ligação entre os dados e o que será exibido na tabela. O Protocolo UITableViewDataSource requer que dois métodos sejam declarados: Método responsável em preencher os dados de cada célula.

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
– (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
[/sourcecode]

Método responsável em determinar o número de células disponíveis na tabela.

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
– (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section
[/sourcecode]

O Protocolo UITableViewDelegate, por outro lado, lida com a aparência da UITableView. Métodos opcionais podem alterar, por exemplo a altura da linha na tabela, definir cabeçalhos e rodapés, reordenar células, etc. Assunto que iremos tratar no próximo tutorial: Customizando uma UITableView (colocar link)

Bom, vamos continuar… Selecione o arquivo “ViewController.m” e vamos definir e instanciar uma variável do tipo NSArray para armazenar os valores da tabela, conforma o código a baixo:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#import "ViewController.h"

@interface ViewController ()
{
NSArray *carros;
}
@end

@implementation ViewController

– (void)viewDidLoad
{
[super viewDidLoad];
carros = [NSArray arrayWithObjects:@"Gol",
@"Golf",
@"Polo",
@"Parati",
@"Fusca",
@"Kombi", nil];
}
[/sourcecode]

Finalmente, vamos adicionar os dois métodos do UITableViewDataSource, citados anteriormente, conforme podemos notar no código da imagem a baixo, a primeira função retorna a quantidade de células a serem criadas de acordo com o tamanho do NSArray e a segunda função define o texto a ser exibido em cada célula:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
#pragma mark – UITableView Datasource
– (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section
{
return [carros count];
}

– (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier;
UITableViewCell *cell;

cellIdentifier = @"SimpleTableCell";
cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:cellIdentifier];
}

cell.textLabel.text = [carros objectAtIndex:indexPath.row];

return cell;
}

[/sourcecode]

Feito isso, se compilarmos o projeto com o Run a tabela exibida estará em branco.
Por que isso acontece? Nos definimos a variável que irá armazenar os dados da tabela e adicionamos a ela os nomes dos carros, em seguida definimos os métodos obrigatórios, utilizando-se da variável (NSArray) que armazena os dados da tabela. Mas por que a Table View não exibe nada?  Ainda falta uma coisa!!

Conectando a UITableViewDataSource e UITableViewDelegate

Vá ao arquivo Main.storyboard, selecione a Table View, mantenha pressionado a tecla control do teclado, clique na table view e arraste até o menu a esquerda da view sobre a opção “View Controller”, conforme a imagem:

Definindo os protocolos da Table View

Definindo os protocolos da Table View

Em seguida um menu será exibido, marque a primeira opção, em seguida torne a fazer o mesmo processo para marcar a segunda, conforme exibido a baixo:

Definindo protocolos na Table View

Definindo protocolos na Table View

ATENÇÃO: Embora na imagem esteja parecendo que a view está selecionada, o correto é selecionar APENAS a tableView, ou seja, ao selecionar a table view, a barra de status deve permanecer branca, conforme indicado na imagem a seguir.

Se os passos tiverem sido realizados corretamente, ao selecionar a TableView, o menu a esquerda, na aba “Connections Inspector” deverá estar da seguinte forma:

DataSoure e Delegate atribuido ao ViewController

DataSoure e Delegate atribuido ao ViewController

Feito isso, execute novamente seu projeto com o “Run” e o resultado será o esperado!

 Resultado Final

Resultado Final

7 Responses to “Tutorial iOS: Criando uma UITableView no XCode 5, usando Storyboard”

  • Olá, boa tarde. Você irá continuar com a sequência desse tutorial? Desde já agradeço…

  • Tutorial excelente. Quando sai a segunda parte. Estou ansioso para ver como se customiza uma célula.

  • Ola, primeiramente parabéns pelo tutorial. Pode me ajudar com um problema, criei uma view que faz consulta a um banco de dados sqlite interno, e ele traz o resultado numa label na mesma view. Isto está funcionando, o que eu quero é que traga o resultado numa tableview e quando eu clici na célula abra numa nova view mais detalhada. Já criei a tableview e a nova view, mas não consigo fazer a linhagem, carregar o resultado que trazia na label para a tabela. Como faço para carregar esta label que traz o resultado da minha consulta na tableview???

    • Olá Junior, você já está recuperando apenas o nome do Banco de dados e populando sua tableView, correto? Então é o seguinte, a forma mais fácil para se fazer, embora não seja a mais eficiente, seria ao clicar na celula, você fazer uma nova consulta ao banco de dados, buscando toda as informações detalhadas baseado no nome q vc clicou, em seguida exibir uma nova view com essas informações que foram recuperadas. Caso não tenha entendido, posso providenciar um tutorial.

  • Parabéns pelo post.
    Tenho uma duvida que não consigo resolver: como imprimir essa table vier de forma fácil?

    Obrigado.

Deixe um comentário

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