Tutorial iOS – Criando células personalizadas

On 11 de setembro de 2014 by Conrado Carneiro

Em um de nossos tutoriais anteriores ensinamos a criar tabelas, hoje iremos ensinar a como criar células personalizadas para a tabela.

Vale ressaltar que tabelas são muito utilizadas no desenvolvimento iOS, pois ela auxiliam na estruturação do Layout, por isso aprender a criar células personalizadas é fundamental. Além disso, devemos frisar que a classe UITableView possui um sistema de re-utilização de célula fundamental em manter um bom desempenho da aplicação, em outras palavras, se você possui uma tabela com 400 células, possivelmente o sistema irá criar 4 ou 5 células e re-utilizalas durante a execução da aplicação apenas substituindo os valores delas de acordo com a rolagem da tela.

Vamos continuar o projeto, do tutorial passado e ao compila-lo a imagem deve ser parecida a imagem a seguir:

Untitled

O primeiro passo é  criar os arquivos necessários para personalizar a célula, para isso clique com o botão direito do mouse sobre o menu da esquerda New File -> Cocoa Touch -> Objective-C Class em seguida defina o nome da célula, no exemplo em questão usaremos CustomCell e a SubClass deveremos colocar  UITableViewCell, atenção lembre-se de marcar a opção: Also create XIB file, em seguida clique em Avançar e Criar.

Bom, feito isso o resultado esperado é similar a imagem a seguir:

Captura de Tela 2014-09-11 às 21.51.33

Agora vamos personalizar a célula e para isso basta clicar no arquivo CustomCell.xib. Na imagem a seguir, temos a celular personalizada com um elemento UILabel chamado “Nome do Carro” que está linkado ao próprio código, você deverá saber isso baseado nos tutoriais antigo.

Captura de Tela 2014-09-11 às 21.56.47

Bom, agora precisamos adicionar um pouco de Código a viewController responsável em popular a Tabela (UITableView), para isso selecione o arquivo ViewController.m e importe o arquivo CustomCell.h no cabeçalho.
Agora vamos alterar algumas coisas na função:

– (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *) então ela ficará conforme indicado no código a seguir:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
– (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"CustomCell";
CustomCell *cell = (CustomCell *)[self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
}

cell.carName.text = [carros objectAtIndex:indexPath.row];
return cell;
}
[/sourcecode]

Por fim, devemos alterar o tamanho da altura da célula, este valor deve ser igual ao indicado no arquivo CustmoCell.xib e no meu caso será 82 e a função responsável em definir esse valor ficará assim:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
– (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
{
return 82;
}
[/sourcecode]

Por fim, volte ao arquivo CustomCell.xib, selecione a célula (1) vá ao Attributes inspector e defina o valor do Identifier(2) como CustomCell (3)

Captura de Tela 2014-09-11 às 22.11.05

 

Agora é so rodar o aplicativo, e o resultado deverá ser igual o exibido a seguir:

iOS Simulator Screen shot 11.09.2014 22.12.51

Caso tenha alguma dúvida, a seguir temos o link de download do projeto completo: tableViewCustom ou se preferir deixe sua dúvida nos comentários!

Deixe um comentário

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