Tiago Aguiar

Delegate e DataSource: Dando Vida a UITableView

avatar
Xcode playground
Xcode playground

UITableView ​é a View mais usada em aplicativos iOS, competindo apenas com o seu “primo” ​UICollectionView​.

Aplicativos como Facebook, Instagram e Spotify são exemplos empíricos de que a UITableView ​está presente em boa parte dos aplicativos mais comuns.

Seja você iniciante ou Expert, dominar esse componente irá te ajudar a criar aplicativos de mercado além de aumentar a sua capacidade de criação de novos projetos. Isso porque a UITableView ​​está presente em ​mais de 80% dos aplicativos já criados​.

A ​​UITableView​ ​permite que o usuário final do aplicativo faça duas coisas que são, na minha opinião, essenciais na era da informação:

  1. Listar dados (de uma forma elegante, customizada e eficiente)
  2. Permitir a interação dos dados com outras Views (ver detalhes, reordenar, excluir, etc)

Neste artigo quero compartilhar um conceito muito importante sobre a TableView e que você usará em diversos outros componentes iOS. Delegate e DataSource.

UITableView Delegate: Escutando Eventos na UITableView

O delegate em curtas palavras é um protocol com assinaturas de funções obrigatórios ou opcionais onde, aquela classe que implementar (concordar) com aquele delegate, terá em mãos o “poder” para utilizar determinadas funções/métodos. Vou te dar um exemplo:

Imagine você declarando uma nova ViewController chamada ListProductViewController, ok?

No momento em que dissermos ao programa que nossa ViewController estará de acordo em implementar um UITableViewDelegate, você desenvolvedor iOS está dizendo que aquela classe (ListProductViewController) irá conter métodos que responderão à eventos de uma determinada UITableView. Logo, se a sua classe declarada diz ao programa que ela será o delegate daquela UITableView, literalmente os eventos (Listeners) daquela UITableView estarão nesta classe.

1
2
3
4
5
6
7
class ListProductViewController: UIViewController, UITableViewDelegate {
	@IBOutlet weak var tableView: UITableView!
	override func viewDidLoad() {
		super.viewDidLoad()
		self.tableView.delegate = self
	}
}

O código acima demonstra exatamente nossa classe implementando um Delegate da UITableView (em alguns casos como na própria documentação da Apple, você encontrará a palavra conforms para indicar que a classe implementa o protocol).

Simplesmente agora, todos os eventos desse objeto tableView serão “escutados” pela classe ListProductViewController.

Acesse a documentação da UITableViewDelegate da própria Apple e veja a quantidade de métodos que podemos utilizar a partir de agora na nossa classe. O mais comum e básico para quem está começando é utilizar o método tableView(_:didSelectRowAt:) didSelectRowAt que responde a eventos quando o usuário clica em uma linha (célula) da tableview.

Importante observar aqui é que esses métodos são executados em determinadas situações que ocorram com a UITableView, como no caso do didSelectRowAt. Por isso muitos programadores gostam de chamar esses eventos como listeners.

Outro ponto importante também é que alguns métodos são obrigatórios e outros são opcionais como no caso optional func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?. Esse método não é obrigatório porque nem todas as UITableView precisam e tem um cabeçalho.

A minha sugestão é que você olhe a documentação no site da Apple e comece a testar diferentes métodos deste protocol para aprender mais. De fato, nós só aprendemos colocando a “mão na massa” ;).

UITableView DataSource: Representando o Data-Model de uma UITableView

A UITableViewDataSource é um outro protocol que usamos para representar um modelo de dados para a nossa UITableView. De fato ela é semelhante a uma UITableViewDelegate com alguns métodos que nos permite:

  • Customizar nossas células
  • Definir a quantidade de linhas
  • Quantidade de seções
  • O que acontece quando editamos
  • Ou reordenamos as células e muito mais.

Veja a documentação da UITableViewDataSource e navegue nos diversos métodos disponíveis.

O métodos fundamentais para construir uma tabela são:

  • tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
  • tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

O primeiro para dizer que nossa tabela terá X números de linhas naquela seção e o segundo para dizer qual objeto UITableViewCell terá em cada linha e o que exibir nesta linha.

Ok! Vamos criar nossa UITableView, e seus respectivos protocols (leia-se listeners) para fazer nosso aplicativo funcionar.

Adicione o protocol UITableViewDataSource para nossa tableview trabalhar com os dados da nossa classe.

1
2
3
4
5
6
7
8
class ListProductViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
	// ... variaveis
	override func viewDidLoad() {
		super.viewDidLoad()
		self.tableView.delegate = self
		self.tableView.dataSource = self
	}
}

Adicione os métodos obrigatórios do UITableViewDataSource

1
2
3
4
5
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	let cell = tableView.dequeueReusableCell(withIdentifier: "cellIdentifier")!
	cell.textLabel?.text = "row at \(indexPath.row)"
	return cell
}

O cellIdentifier deve ser definido no seu storyboard. em identifier UITableViewCell.

1
2
3
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	return 30
}

Adicione o seguinte método do UITableViewDelegate para que as ações de cliques do usuários seja escutada.

1
2
3
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
	print(indexPath.row)
}

Pronto! Agora podemos clicar em cada célula e teremos uma simples UITableView com diversas linhas clicáveis.

enter image description here

Se você gostou deste artigo, compartilhe com um amigo ou alguém que quer aprender a criar aplicativos iOS. Esse conteúdo pode ajudar essa pessoa de alguma coisa.

Como Criar um aplicativo iOS de Lista de Tarefas (todo)

Para aqueles que querem dar um passo além neste tutorial e começar a criar um app a partir da UITableView, assista esse video:

Até a póxima!


Comece antes de estar pronto! Just do it!

Maravilha! Em breve você receberá conteúdos exclusivos por e-mail. Continue lendo os artigos para aprender mais sobre programação.