Tiago Aguiar

UITableView Tutorial: Como Criar Listas em um App No Xcode

avatar
Preview Image

Já leu o artigo passado de como criar um aplicativo iOS do zero? Então, neste tutorial você vai aprender algo um pouco mais e irá construir um simples app iOS como listas utilizando o componente UITableView.

UITableView: O principal componente iOS para criar listas

Primeiro, você precisa saber que a Table View é um dos componentes mais utilizados na construção de Interfaces em apps iOS e, por essa razão, eu decidi explicá-la primeiro antes de qualquer outro componente iOS. Muitos apps utilizam esse componente para mostrar listas de dados.

O exemplo mais claro são aplicativos já incluso dentro do seu iPhone como por exemplo:

  • Configurações
  • Contatos
  • TODO lists
  • App de Email

Os dados podem ser exibidos de uma forma padronizada com apenas textos e imagens ou exibidos com um design customizado. O próprio aplicativo da App Store faz uso de Table Views.

Antes de prosseguir com esse tutorial, vamos entender os conceitos fundamentais e pré-requisitos para prosseguir.

Pré-requisitos

Este tutorial é para você que já entende fundamentos básicos de:

Crie um novo projeto

Agora que você tem tudo pronto para continuar. Vamos “por a mão na massa”! Aqui está os itens que cobrirei neste artigo:

  • Criar um novo projeto para o app de listas
  • Design uma TableView
  • Adicionar uma estrutura de dados para a table view
  • Assinar o UITableViewDelegate e UITableViewDataSource
  • Conectar o Delegate e DataSource
  • Adicionar imagens (miniaturas) a Table View

Abra o Xcode. Escolha a opção Create a new Xcode project > Escolha a Single View App a aperte Next.

xcode 9 new project

single view app project

Com o Xcode aberto preencha todos os campos obrigatórios para o projeto iOS:

  • Product Name: youpet – Este é o nome do seu aplicativo.
  • Team: Sua conta Apple (caso já tenha uma)
  • Organization Identifier: br.com.iosdeveloper – Este é o nome do seu domínio para identificar o autor do projeto. Caso não tenha, você pode utilizar o meu ou preencher com “com.example”.
  • Organization Name: iOS Developer – Este é o nome da empresa/do autor.
  • Language – Escolha Swift.

Clique em Next para continuar. O Xcode irá te perguntar onde ele deve salvar o projeto “youpet”. Escolhar qualquer pasta (ex.: Desktop) para salvar o seu projeto. Tire a seleção de Create Git repository on my Mac para não utilizar o Controle de Versão Git pelo Xcode.

create xcode git

Quando confirmar o Xcode irá criar o projeto “youpet” baseado em todas as opções que você forneceu a IDE Xcode.

Se você já me segue deve saber que ensino a criar apps iOS com a mesma metodologia utilizada pela maioria dos desenvolvedores do Vale do Silício. Programaticamente em puro Swift!

Mas neste tutorial, em específico vou cubrir não só a construção de Views programaticamente mas também através de uma Interface Builder.

Tutorial Criando uma TableView com Storyboard

Primeiro vamos criar uma table view usando a Storyboard. Selecione o arquivo Main.storyboard para abrir a edição pela interface.

tutorial uitableview criando com storyboard

Na biblioteca de objetos no canto inferior direito, procure pelo objeto table view. Segue e arraste este objeto para dentro da view controller principal.

object library table view

Quando o objeto estiver dentro da viewcontroller você precisará adicionar constraints para aplicar o AutoLayout e garantir que seu aplicativo iOS funcione em todas as proporções de dispositivos (iPhone 6, iPhone 7, iPhone 8, etc). Logo, vamos clicar no ícone inferior a direita conforme a imagem add new constraints.

autolayout com storyboard adicionando constraints

Para manter as proporções preenchendo os 4 cantos da tela, iremos indicar o valor zero (0) no top, bottom, leading (esquerda), trailing (direita). Clique em add constraints para aplicar as alterações.

Clique no botão “play” para compilar e executar o seu aplicativo e garantir que tudo está funcionando e nenhum erro de compilação aparecerá.

Seu aplicativo já possui uma tableview, agora é hora de adicionar alguns dados para a lista e tabela.

Adicionando dados a Table View

Para adicionar dados a sua tableview você precisará assinar os delegates e datasources UITableViewDelegate e UITableViewDataSource respectivamente a sua ViewController.

Seu código deverá parecer como o bloco abaixo:

1
2
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
}

Uma vez declarado os protocols como UITableViewDelegate e UITableViewDataSource devemos implementar os métodos definidos como obrigatórios para garantir que não ocorra erros de compilação.

Adicionando a UITableViewDelegate e UITableViewDataSource

Antes de adicionar os métodos obrigatórios de quem implementa os protocols destes delegates e datasources, deixa eu te explicar um pouco mais sobre estas classes.

Alguns componentes do SDK como a Table View são feitas para se seja flexível a uma variedade de tipos de dados. Você pode listar tipos de dados em textos como listas de tarefas. Tipos de imagens de galerias como de produtos. Nomes em contatos ou até mensagens de um Chat.

Então como conectamos uma Table View à uma lista de dados qualquer?

E a resposta é através da UITableViewDataSource! Este protocol declara dois métodos obrigatórios que qualquer classe que assinar esse protocol deverá implementá-los.

Estes são métodos que “conectam” os dados a Table View. Logo, dizemos quantas linhas devemos reservar e qual dados vai ser exibidos em cada linha.

Já a UITableViewDelegate possui métodos referentes a aparência de uma Table View. Há ainda alguns métodos capazes de customizar rodapé, cabeçalhos, alturas de cada linha e etc.

Nos próximos artigos, entrarei mais a fundo nas customizações da UITableView.

Estrutura de Dados

Antes de implementarmos os métodos declarados em cada protocol vamos adicionar uma estrutura de dados pré-definida para o nosso aplicativo “youpet”.

1
2
3
4
5
6
7
8
9
10
11
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

	let dogs = ["Pastor Alemão","Pastor Belga","Pastor de Brie",
				"Pastor dos Pirenéus de Cara Rosa","Pequinês",
				"Perdigueiro","Pitbull","Podengo","Pointer","Pug"]

	override func viewDidLoad() {
		super.viewDidLoad()
	}

}

Definimos algumas raças de cães que o nosso app “youpet” exibirá ao usuário final. Agora, vamos implementar os métodos obrigatórios. O que indica a quantidade de linhas em uma seção e como será cada linha desta seção.

Para fazer isso, adicione o código abaixo que indicará, através do array quantas linhas essa lista terá:

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

Agora, vamos implementar o método que será chamado toda vez que uma linha precisar ser exibida.

1
2
3
4
5
6
7
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	let cell = tableView.dequeueReusableCell(withIdentifier: "cellId")!

	cell.textLabel?.text = dogs[indexPath.row]

	return cell
}

Se você clicar no botão “play” e executar o seu aplicativo verá que nenhum registro aparecerá! Ele continuará como antes, uma table view branca.

Isso acontece porque ainda não indicamos que esta table view será o delegate e o datasource dos métodos implementados.

Conectando o DataSource e Delegate

Precisamos estabelecer a conexão entre a Table View e os métodos delegate e datasource criados. Abra o arquivo Main.storyboard. Selecione a Table View. Clique, segure o ctrl e arraste até o ícone amarelo da ViewController.

Um popup aparecerá com as opções datasource e delegate. Selecione as duas para fazer a conexão entre esta Table View e a sua fonte de dados (ViewController).

delegate e datasource storyboard

O próximo passo é dizer qual é o identifier das células da tabela para que o xcode possa “conectar os pontos” e instanciar as UITableViewCell para você e reusá-las quando necessário conforme o método dequeueReusableCell.

Selecione a tableView. No canto superior direito clique no ícone show the Attributes inspector e adicione mais um prototype Cells

prototype cell storyboard

Depois disso, clique na célula dentro da TableView e escreva no campo identifier o mesmo adicionado anteriormente no código Swift.

identifier cell storyboard

Teste seu Aplicativo iOS

Finalmente seu aplicativo iOS está pronto para ser testado. Simplesmente aperte o botão “play” a deixe o simulador fazer o seu trabalho.

uitableview tutorial list

Tutorial Criando uma TableView com puro Código Swift

Primeiro vamos literalmente excluir a Main.storyboard porque não iremos utilizá-la. Clique no projeto e remova a Main.storyboard do Deployment Info -> Main Interface conforme a imagem:

excluir storyboard tableview

Agora abra o AppDelegate.swift e adicione o seguinte código no método didFinishLaunchingWithOptions. Este código será necessário para termos uma UIWindow (view) que será nossa View raiz contendo a nossa ViewController principal.

Saiba que o objeto UIWindow é o container/tela raiz onde podemos adicionar ViewControllers à ela através da atribuição rootViewController.

1
2
3
4
5
6
7
8
9
10
var window: UIWindow?

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

	window = UIWindow(frame: UIScreen.main.bounds)
	window?.rootViewController = ViewController()
	window?.makeKeyAndVisible()

	return true
}

Depois vamos criar uma table view usando o código Swift. Selecione o arquivo ViewController para adicionar a tabela.

1
2
3
4
5
6
7
8
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

	let tbl: UITableView = {
		let v = UITableView(frame: .zero, style: .plain)
		v.translatesAutoresizingMaskIntoConstraints = false
		return v
	}()
	// mais codigos

Vamos adicionar o bloco acima para ter uma instância de UITableView assim que nossa ViewController estiver pronta. O construtor criará um objeto tableView default com os frames zerados! Isso porque também usaremos AutoLayout programaticamente - com Visual Format Language.

Logo, adicionaremos as seguintes linhas no viewDidLoad():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
override func viewDidLoad() {
	super.viewDidLoad()

	// 1
	view.addSubview(tbl)

	// 2
	view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(),  metrics: nil, views: ["v0" : tbl]))

	view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0" : tbl]))

	// 3
	tbl.delegate = self
	tbl.dataSource = self

	// 4
	tbl.register(UITableViewCell.self, forCellReuseIdentifier: "cellId")
} 
  1. Adicionamos a TableView a View principal (elemento View da ViewController)
  2. Criamos as constraints utilizando a Visual Format Language
  3. Adicionamos o delegate e datasource. Esta ViewController irá “observar” os eventos da TableView
  4. Registramos qual o tipo de classe será utilizada quando precisarmos reutilizar uma célula no método dequeueReusableCell.

Seu App mais elegante: Tutorial Adicionando imagens a TableView

Como nossa lista “youpet” possui apenas nomes de cães, vamos adicionar um ícone (uma miniatura) para as linhas da tabela e deixar o aplicativo um pouco mais elegante ok?

Primeiramente, baixe uma imagem quadrada no seu computador como esta aqui. Ao salvar o arquivo JPG, selecione a pasta Assets.xcassets. Segure a imagem em seu Finder e arraste para dentro desta pasta no Xcode.

xcode assets import img

Agora abra a ViewController. No método cellForRowAt adicione a seguinte linha antes do return cell:

1
cell.imageView?.image = UIImage(named: "dog")

O método final deverá ficar assim:

1
2
3
4
5
6
7
8
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	let cell = tableView.dequeueReusableCell(withIdentifier: "cellId")!

	cell.textLabel?.text = dogs[indexPath.row]
	cell.imageView?.image = UIImage(named: "dog")

	return cell
}

A TableViewCell possui já textFields e ImageViews para que você possa facilmente ter um aplicativo iOS pronto para usar. Claro que podemos customizar nossas células e adicionar mais componentes a ela, mas isso ficará para um próximo tutorial. Novamente, aperte o botão “play” a deixe o simulador executar o seu aplicativo.

tableview images and text

Recapitulando

Realmente é bem simples ter uma lista para ser exibida em uma TableView. Na minha opinião, a TableView é o principal componente iOS competindo apenas com a CollectionView e muitos aplicativos são construídos com base nesse componente.

Você aprendeu como:

  • Criar um novo projeto para o app de listas Design uma TableView
  • Adicionar uma estrutura de dados para a table view
  • Assinar o UITableViewDelegate e UITableViewDataSource
  • Conectar o Delegate e DataSource
  • Adicionar imagens (miniaturas) a Table View

Nesse tutorial eu dei um “overview” dos fundamentos básicos de uma UITableView. De fato, uma tableView não irá mostrar dados que já estão dentro de um código Swift. Geralmente eles são acessados de um servidor remoto ou de uma base de dados local (localStorage). Nos próximos tutoriais/artigos nós iremos aprender como gravar e ler dados de um servidor e arquivo para a UITableView.

Caso ainda tenha alguma dúvida sobre os fundamentos da UITableView, leia o artigo novamente e deixe o seu comentário me dizendo mais sobre o assunto.

Para ter o código completo, acesse:

Como Criar um aplicativo iOS 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:

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