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:
- cellForRowAtIndexPath
- 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.
- selecione o arquivo Main.storyboard
- pesquise o componente TableView e arraste para dentro do ViewController
- adicione constraints nos 4 cantos com constante de 0 em todas
- abra o assistant editor (caso esteja na opção manual, mude para automatic)
- 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
- inicialize o delegate e data source da tabela como self (o próprio ViewController)
- registre a classe UITableViewCell com o identificador “tableCell”, assim poderemos usar a classe no método do data source
- 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
- 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.
- o segundo método obrigatório do protocolo UITableViewDataSource é o “cellForRowAtIndexPath”
- nesse segundo método criaremos uma célula com o mesmo identificador que utilizamos no viewDidLoad ao registrar a classe da célula
- 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
- 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.
- 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!
Paulo Marne
Bem interessante, gostei!!!!