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:

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:

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.

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)

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

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!