Projeto com UINavigationController e UITableView

Neste post como criar um projeto utilizando UINavigation e como ele funciona. Primeiro vamos criar o projeto no xCode e escolher Navigation-based Application como template do projeto e NÃO selecionaremos a opção "Use Core Data for storage". Core Data é o banco de dados nativo de iOS. Mais pra frente falaremos sobre isso.

Por | @reprotector Programação

Nos aplicativos de iOS a interface é uma das coisas que o usuário mais considera na hora de baixar um app. Um aplicativo simples mas com uma boa interface tem maiores chances de ser baixado do que um aplicativo complexo mas com uma interface horrível. Por isso, sempre devemos pensar bem em como será a interface do usuário. Para isso, devemos seguir as guidelines de iPhone/iTouch e de iPad.

Não tente "reinventar a roda", não tenha medo de ser simples. A simplicidade é o melhor amigo do usuário. Tente fazer com que seu app seja o mais intuitivo possível, de forma que o usuário não tenha que pensar aonde ele deve clicar.

Após essas breves dicas, iniciamos a falar um pouco dos objetos de UI. Listarei a seguir os principais:

  • UIView : Região aonde colocaremos nossos objetos, como botões, labels, etc
  • UITabBar: Uma espécie de "menu", onde há a troca imediata da tela
  • UINavigationBar: Navegação, seguindo uma sequência
  • UIButton: Botão para interatividade básica com usuário
  • UILabel: Label, pequeno texto estático
  • UITextField: Entrada de texto por parte do usuário
  • UITextView: Para textos grandes, com possibilidade de scroll
  • UITableView: Tabela, possibilidade de scroll
  • UITableViewCell: Cédula da tabela, possibilidade de customização


Acredito que estes 9 itens são os principais para o começo de nosso desenvolvimento. Neste post como criar um projeto utilizando UINavigation e como ele funciona. Primeiro vamos criar o projeto no xCode e escolher Navigation-based Application como template do projeto e NÃO selecionaremos a opção "Use Core Data for storage". Core Data é o banco de dados nativo de iOS. Mais pra frente falaremos sobre isso.
Projeto com UINavigationController e UITableView


Salve-o com o nome que desejar. Salvei com o nome de Navigation, então se você salvar com um nome diferentes , terá que ficar "convertendo" para o nome que você salvou. Vamos abrir o arquivo MainWindow.xib no Interface Buider. Veja na imagem abaixo.
Projeto com UINavigationController e UITableView
Projeto com UINavigationController e UITableView


Percebe-se que que foi criado um objeto de UINavigationController dentro da MainWindow. Dentro do UINavigationController temos um UIViewController, que é o RootViewController. Isso significa que a primeira tela deste NavigationController será a tela de RootViewController. Vamos dar um Build&Run para vermos na prática isso.
Projeto com UINavigationController e UITableView


Se abrirmos o arquivo RootViewController.xib vemos que dentro dele temos uma table view, que é o que está sendo mostrado na tela. Vamos agora aprender um pouco sobre table view e seus métodos. Vamos criar um "link" para o user, ao clicar em uma linha da table view, vá para uma tela que fale detalhes sobre o item clicado.

Primeiro vamos colocar o conteúdo na table view.

Em RootViewController.h , adicione a linha: NSMutableArray *elements; (veja abaixo)
@interface RootViewController : UITableViewController {
   NSMutableArray *elements;
}
@end


Criamos um mutable array aonde estarão os elementos que serão listados na table view. Agora criaremos um método para carregar o array. O Código de RootViewController.h deve ficar desta forma:
@interface RootViewController : UITableViewController {
    NSMutableArray *elements;
}
-(void) loadArray;
@end


Pronto, agora vamos criar o método loadArray dentro de RootViewController.m:
-(void) loadArray{
    [elements addObject:@"Banana"];
    [elements addObject:@"Tangerina"];
    [elements addObject:@"Abacaxi"];
}


Dentro de viewWillAppear devemos allocar o array de elements, e chamar o método para carregar o array. Para isso, usamos o código abaixo:
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    elements = [[NSMutableArray alloc] init];
    [self loadArray];
}


E não podemos nos esquecer de dar release no método dealloc. Não se esqueça, sempre que allocar na memória deve-se dar release para não haver vazamento de memória.
- (void)dealloc {
    [super dealloc];
    [elements release];
}


Neste momento temos um array com os elementos que serão mostrados na table view, já devidamente carregados. Vamos agora utilizar os métodos de table view para finalmente mostrá-los na tela.
// Customize the number of sections in the table view.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [elements count];
}
 
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
 
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] 
        initWithStyle:UITableViewCellStyleDefault 
        reuseIdentifier:CellIdentifier] autorelease];
    }
 
    // Configure the cell.
    [cell.textLabel setText:[elements objectAtIndex:indexPath.row]];
 
    return cell;
}


Os métodos acima possuem uma nomenclatura bem clara, mas vou explicá-los:
  • -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView - Número de sections da table, ou seja, quantos "grupos" ela terá. Cada section possui um header e um footer. Mas neste exemplo não abordaremos isso.
  • - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section - Número de linhas para uma determinada section. Se seu projeto possuir mais de uma section, deve-se fazer um código condicional para dizer quantas linhas tem cada section
  • - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath - Enfim, o conteúdo de cada cell. Recebe um indexPath como parâmetro. O indexPath é uma sctruct composta por row e section, ou seja, segue o formato de indexPath.row e indexPath.section. Mais uma vez, se seu projeto possui mais de uma section, deve haver uma condicional para seu controle.

[PG1]
Dentro de "cellForRowAtIndexPath" criamos a cell que usaremos na nossa table view. Estamos utilizando a cell padrão, como vemos na seguinte linha: "[[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];" .

Neste momento, já temos tudo que precisamos para exibir os itens do array na table view. Se dermos um Build&Run veremos os itens listados na tableview.
Projeto com UINavigationController e UITableView


Agora vamos fazer criar uma nova classe para ser chamada ao clicarmos na linha da table view.Vou chamá-la de Details. Clique com o botão direito em classes e em New File. Vai abrir uma janela perguntando qual o template do arquivo. Selecione UIViewController subclass e marque o Create .xib
Projeto com UINavigationController e UITableView


Ainda em RootViewController.m devemos importar Details.h e NavigationAppDelegate.h .

Details deve ser importada pois é aqui que criaremos seu objeto ao clicarmos na table view. Já a NavigationAppDelegate deve ser importada pois é onde está o nosso UINavigationController. O UINavigationController funciona como uma pilha, ou seja, através de push e pop. Seguimos uma ordem hierárquica para chegar até determinado ponto. E para voltarmos, vamos passando pelas views que foram colocadas. Vamos ver o código que usamos quando clicamos em uma cell:
- (void)tableView:(UITableView *)tableView 
didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
Details *viewDetails = [[Details alloc] initWithNibName:@"Details" bundle:nil];
[((NavigationAppDelegate*)[[UIApplication sharedApplication] delegate]).navigationController pushViewController:viewDetails animated:YES];
[viewDetails release];
}


Vemos que o método recebe como parâmetro o indexPath. De novo, podemos fazer alguma condicional para tratar deste parâmetro. Neste primeiro momento, só quero mostrar o funcionamento da table view e do navigationController. Instanciamos um objeto de Details e colocamos ele no topo da pilha do navigation controller. Desta forma simples e fácil, usamos nosso navigation controller.

Agora, dentro de Details, vamos colocar um botão para Voltarmos para a nossa lista de frutas. Em Details.h vamos criar uma action, que será chamada ao clicarmos dentro do botão:
@interface Details : UIViewController {
}
-(IBAction) close : (id) sender;
@end


E em Details.m iremos novamente importar o NavigationAppDelegate.h mas não importaremos o RootViewController.h, pois o objeto de RootViewController está instanciado em NavigationAppDelegate, e não vamos recriá-lo. O código do método close, para voltarmos para a lista de frutas é apenas um pop da pilha, ou seja, estamos retirando-o da pilha de views.
-(IBAction) close : (id) sender{
[((NavigationAppDelegate*)[[UIApplication sharedApplication] delegate]).navigationController popViewControllerAnimated:YES];
}


Agora vamos criar o botão e linká-lo. Abra o Details.xib , clique em Round Rect Button e arraste-o até o view da tela. Agora, clique em Connections. Selecione o "Touch Up Inside" e arraste-o até o File Owner (details), e finalmente, selecione close: . Como vemos a seguir:
Projeto com UINavigationController e UITableView


Pronto, agora temos tudo que precisamos. Podemos clicar em Build&Run e ver funcionando. Disponibilizei o projeto para download neste link

Ficou um pouco maior do que eu esperava, tentei ser o mais claro possível em todas as etapas. Se tiverem alguma dúvida, postem abaixo.

Mais sobre: mobile desenvolvimento iphone
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo