Tableview: Usando Storyboard


O que são storyboards?

Digamos que um arquivo organizados de forma visual para facilitar a criação de interação com controles, componentes (tableview, pickerview, actionsheets, botões etc…)
Com esse arquivo podemos gerar toda estrutura (wireframe) de nossa aplicação ficando muito mais fácil dar manutenção.

As storyboard foram adicionadas a partir da versão 4.2 do xCode

Iremos criar uma tableview alimentada por um array e para isso iremos utilizar storyboard ao invés de um arquivo .xib em separado.

Ao abrir o xCode deverá ser escolhido o template de projeto Tabbed Application que já vem com uma tabbar definida por padrão.

Template de projeto

Quando criar o projeto seu xCode deve apresentar a estrutura acima

 

Bom, agora começaremos a por a mão na massa.
Selecione o arquivo MainStoryboard.storyboard, escolha que diz First View e apague se conteúdo.
Feito isso arraste o componente TableViewController e solte dentro da view, sua view deveria ficar como a figura abaixo:

Importante: Para que sua Tableview fique com essa aparência é necessário que faça algumas configurações antes.
Selecione a tableview com um clique e vá em suas propriedades na barra lateral direita e selecione o botão Attributes Inspector.

Troque o “Content” para “Static Cells” e logo depois volte para “Dynamic Prototypes”

Deixe a Tableview com apenas uma linha.
Selecione essa linha e vá nas propriedades da linha que irão aparecer no Attributes Inspector

Configure o estilo da célula para “Basic”

Pronto, feito isso vamos para o código.

FirstViewController.h

#import <UIKit/UIKit.h>
@interface FirstViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>
{
  NSArray *list;
}
@end

FirstViewController.m

#import "FirstViewController.h"@implementation FirstViewController
- (void)viewDidLoad
{
  [super viewDidLoad];
  list = [[NSArray alloc] initWithObjects:@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 5", nil];
}
- (void)viewDidUnload
{
  [super viewDidUnload];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
  return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
#pragma mark - TableView delegates
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
  return [list count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"]; 
  [[cell textLabel] setText:[list objectAtIndex:[indexPath row]]];

  return cell;
}
@end

Agora vem a parte principal, pois sem ela nada funciona.
Conectar o Tableview com o código.

Clique no “+” e arraste até a view (onde está sua TableView) e depois solte. irá ficar como a figura acima.

Após isso é só compilar e ver seu projeto funcionando, bastante simples e prático.
Em um próximo artigo falarei em detalhes sobre Tableview e storyboards.

Como seu tableview deverá aparecer depois de finalizado.

 

It’s just Objective-C, but I liked…

 

  1. #1 by Charles on 28/06/2012 - 16:40

    Simples e bacana, consegui fazer funcionar meu projeto.
    Parabéns pelo post.

(não será publicado)