Já reparou que são tabelas por trás das apresentações de conteúdo da maioria dos aplicativos que usamos? Esse modelo é amplamente utilizado no desenvolvimentos de aplicações mobile, podendo ser encontrado em aplicativos populares como a linha do tempo do Facebook, o feed de imagens do Instagram, entre outros. A classe existente para criar tabelas em iOS e que será utilizada nesse tutorial é a UITableView.


A classe UITableView possui dois protocolos, UITableViewDelegate e UITableViewDataSource, com métodos utilizados para determinar a quantidade e tamanho de seções e tuplas, para criação de células, headers e footers personalizados, para edição de tuplas específicas, entre outros.


O protocolo UITableViewDataSource possui dois métodos obrigatórios:

  1. cellForRowAtIndexPath
  2. numberOfRowsInSection

Cada tupla de uma UITableView é uma UITableViewCell, classe que pode ser categorizada para que se crie uma célula customizada, que atenda às necessidades de design. Esta criação pode ser feita via storyboard ou programaticamente e utilizando-se de ferramentas como Auto Layout, é possível criar uma célula que terá seu tamanho inferido em tempo de execução, flexibilizando a altura da tupla em situações de diversidade de conteúdo.

Esse tutorial será divido em duas partes, nesse primeiro post mostrarei como criar uma tabela com uma célula padrão e no segundo post mostrarei como criar uma célula customizada com tamanho automático. E ai, bora por as mãos à obra? Nesse tutorial utilizei o XCode 9 e Swift 4 e você pode baixar o starter project nesse link do meu GitHub.

  1. selecione o arquivo Main.storyboard
  2. pesquise o componente TableView e arraste para dentro do ViewController

  1. adicione constraints nos 4 cantos com constante de 0 em todas

  1. abra o assistant editor (caso esteja na opção manual, mude para automatic)
  2. segurando a tecla control arraste da Table View para o código

Pronto! Temos toda a parte de layout necessária para podermos usar nossa tabela. Agora selecione o arquivo ViewController.swift e adicione o seguinte código:

https://gist.github.com/c1a290b2adeac22bb3c68a388e1528ed

  1. inicialize o delegate e data source da tabela como self (o próprio ViewController)
  2. registre a classe UITableViewCell com o identificador “tableCell”, assim poderemos usar a classe no método do data source
  3. toda vez que entrar nessa classe iremos atualizar a tabela com o método reloadData

Uma boa prática no desenvolvimento iOS em Swift é dividir seu código em extensions, onde cada extension tem o conteúdo separado por contexto. Nesse próximo trecho implementaremos os dois métodos obrigatórios do protocolo UITableViewDataSource.

https://gist.github.com/c1799e810b232908cdf2b8d9876818cf

  1. o primeiro método obrigatório do protocolo UITableViewDataSource é o “numberOfRowsInSection”, onde retornaremos a quantidade de linhas que queremos na tabela. Esse método geralmente retorna o contador de um array, onde os objetos de cada célula são guardados.
  2. o segundo método obrigatório do protocolo UITableViewDataSource é o “cellForRowAtIndexPath”
  3. nesse segundo método criaremos uma célula com o mesmo identificador que utilizamos no viewDidLoad ao registrar a classe da célula
  4. a classe UITableViewCell já possui uma textLabel, que usaremos para inserir um texto

Se você compilar o projeto agora, perceberá que ao clicar na célula, a mesma fica selecionada até clicar em outra. A próxima coisa a fazer é responder ao clique da tabela e deselecionar a mesma tupla dando um efeito de “ripple”, como em um botão.

https://gist.github.com/4de8847d710344936c13dc3d0ec708bb

  1. ao detectar o toque em uma tupla, a própria classe UITableView chama o método “didSelectRowAt” de seu delegate. Aqui você pode chamar um segue de uma nova tela, por exemplo.
  2. como temos células de mesmo tamanho, é nesse método “heightForRowAt” que definimos qual a altura de cada tupla. O tamanho padrão é 44 mesmo.

E voilà! Esse é nosso resultado, bem simples, porém incrementaremos esse mesmo projeto nos próximos tutoriais.

E ai curtiram? O projeto final está nesse link do meu GitHub e se você tiver alguma dúvida é só deixar um comentário que eu responderei o mais rápido possível. E não esquece de acompanhar o blog pra ver os próximos tutoriais que sairão por aqui :]

Cheers!