UITableView Tutorial: Como Criar Listas em um App No Xcode
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
DesignumaTableView- Adicionar uma estrutura de dados para a
table view - Assinar o
UITableViewDelegateeUITableViewDataSource - Conectar o
DelegateeDataSource - 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.
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.
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.
Na biblioteca de objetos no canto inferior direito, procure pelo objeto table view. Segue e arraste este objeto para dentro da view controller principal.
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.
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).
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
Depois disso, clique na célula dentro da TableView e escreva no campo identifier o mesmo adicionado anteriormente no código Swift.
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.
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:
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")
}
- Adicionamos a TableView a View principal (elemento View da ViewController)
- Criamos as constraints utilizando a Visual Format Language
- Adicionamos o delegate e datasource. Esta ViewController irá “observar” os eventos da TableView
- 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.
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.
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.