Como criar uma tableView simples com ViewCode (programaticamente)

Joana Lima
Apple Developer Academy | UFPE
2 min readSep 29, 2022

Eai, povo, tudo bom? Hoje vou ensinar como fazer uma tableView bem simples usando viewCode em Swift. No final de tudo ela deve ser parecer com isso aqui:

Primeiro vamos precisar ter dois arquivos: um do tipo UITableViewCell e outro do tipo UIViewController, é com eles que vamos trabalhar e onde o código será construído.

  1. UITableViewCell

A TableViewCell é onde vamos configurar e colocar todas as informações que queremos que apareça na célula da nossa tableView. Aqui temos o código completo:

  • Resumindo

Linhas 6 a 13, 15 a 21 e 24 a 31: Configuração das labels de meio de venda, preço e ranking, respectivamente. Dentro de cada bloco definimos o tamanho da letra, fonte e placeholder.

Linhas 33 a 53: Configuração das Stacks onde as informações serão colocadas.

Linhas 57 a 65: Inicialização da TableViewCell e definição da aparencia da mesma.

Linhas 71 a 78: Definição da hierarquia das Stacks e Labels que estão dentro da TableViewCell.

Linhas 80 a 88: Configuração das constraints da StackView que contém todas as labels e informações.

Linhas 90 a 94: Função que recebe do ViewController os dados que serão mostrados na célula da TableView.

Linhas 96 a 104: Configurações de exibição da contentView (aparência que ela vai ter).

2. UIViewController

É no ViewController que vamos de fato configurar nossa tableView e fornecer todas as informações para construção da mesma.

  • Resumindo

Linhas 9 e 11: Declaração das arrays que contém as informações que serão exibidas na TableViewCell.

Linhas 13 a 24: Definição da TableView. Configuração de sua aparência.

Linhas 35 a 44: Configuração das constraints da TableView.

Linhas 47 a 49: Retorna o número de linhas que a TableView terá, nesse caso ela tem 10 linhas.

Linhas 54, 55 e 56: Definem os valores de ranking, tipo de venda e preço, respectivamente, que serão retornados para a TableViewCell.

Linha 57: Retorna os valores que foram definidos anteriormente para a TableViewCell para que eles possam ser exibidos.

Linhas 63 a 65: Retorna a altura que cada TableViewCell terá, nesse caso corresponde a 100.

Conclusão:

Esse com certeza não é o melhor tutorial que você ja viu na sua vida mas espero que tenha ajudado de alguma forma :) Obrigada pela atenção! 💕

PS: Essa é uma das telas de um app que construi com a ajuda de três pessoinhas incríveis, se tiver interesse aqui tem um post mt legal sobre o processo de criação dele e aqui o repositório no GitHub para o código completo.

--

--