Primeiras aulas do curso Swift parte 2: UIKit, storyboard e o padrão delegate

Swift parte 2: UIKit, storyboard e o padrão delegate

ViewController, modificando componentes - Introdução

Boas vindas à segunda parte do curso de Swift!

Sou o instrutor Ândriu Felipe Coelho, e continuaremos o projeto de refeições iniciado no curso anterior. Então é importante que tenhamos absorvido, estudado e praticado os conceitos importantes da linguagem abordados na primeira parte.

Começaremos entendendo sobre a navegação de telas, pois trabalhamos com apenas uma até o momento. Como acrescentaremos outras novas, poderemos clicar em "Add" para adicionar um novo alimento, o que nos levará para outra tela que nos possibilitará inserir informações e inclusive selecionar alguns itens que a refeição pode conter.

Navegaremos entre as seções e continuaremos estudando outros conceitos, como protocolos por exemplo; quando precisarmos fazer a comunicação entre uma tela e outra por meio da criação e adição de uma nova comida, enviaremos um objeto de um lugar ao outro.

Isso é conhecido como delegates, o qual é um design pattern bastante importante utilizado para fazer esta comunicação.

Continuaremos a aprender como trabalharemos com Table View em uma parte da tela, pois havíamos criado apenas um View Controller que ocupa toda a tela. Também avançaremos para entendermos como uma tabela é implementada.

Aprenderemos a trabalhar com alguns recursos programaticamente, como a criação de telas sem usar o Storyboard por meio de um arquivo .xib que é .xml via Interface Builder, o qual nos permitirá usar seu poder de uma maneira desacoplada do Main.storyboard. Com isso, entenderemos melhor as vantagens e desvantagens desta prática.

Ainda, criaremos mais alguns botões para nosso Navigation Controller programaticamente.

Vamos lá!

ViewController, modificando componentes - Criando TableViewController

Relembraremos o ponto em que paramos no curso anterior.

Com o Xcode e o emulador do projeto abertos, veremos a primeira tela com somente dois campos de texto com títulos e um botão de "Adicionar" que cria uma refeição.

A próxima feature que implementaremos listará todos os alimentos cadastrados. Por exemplo, se digitarmos "Churros" no campo "Nome:", "5" no "Felicidade:" e adicionarmos, este item será inserido em uma tabela e exibido em uma lista.

Logo, precisaremos entender como funciona uma tabela em iOS; para isso, criaremos um novo aplicativo apenas para gerarmos a Table View e trazermos suas informações para nosso trabalho "eggplant-brownie".

Fecharemos o Xcode e clicaremos na opção "Create a new Xcode project" para criar um novo projeto. Em seguida, selecionaremos "Single View App" e avançaremos para nomearmos como "tabela-refeicoes" no campo "Product Name".

Salvaremos este arquivo onde acharmos mais fácil de localizar e finalizaremos a criação em "Create". Feito isso, teremos um projeto semelhante ao nosso principal.

Relembraremos alguns conteúdos que foram aprendidos na primeira parte do curso, começando com o desenho das telas do aplicativo que é feito no arquivo Main.Storyboard.

Por padrão, ao abrirmos, teremos apenas uma tela vazia do View Controller. Como queremos criar uma tabela em iOS, deveremos gerar um componente Table View.

Na barra superior de opções do Xcode, clicamos no ícone da Library para acessar a biblioteca que contém diversos itens gráficos disponíveis para adicionarmos elementos visuais à tela, como fizemos com Text Field e Button anteriormente. Ainda há outros que veremos ao longo das aulas.

Como queremos construir uma tabela, não usaremos este View Controller padrão, pois criaremos nossa própria table. Ao clicarmos no espaço que contém "View Controller" escrito junto à tela, poderemos apagá-lo apenas com a tecla "Delete".

Feito isso, abriremos o Library novamente e escolheremos a opção "Table View Controller". O Xcode já nos fornece um template de uma tabela, então não precisaremos nos preocupar em montá-la manualmente.

Arrastando este item para dentro da área do Storyboard, não teremos mais uma tela vazia, pois passará a conter o nome do componente e o Prototype Cells.

Uma Table View pode ter várias células, como é possível ver no próprio aplicativo Whatsapp por exemplo, onde há uma tabela com cada cell contendo uma conversa.

Em nosso projeto, inseriremos alguns nomes de alimentos; o primeiro passo é adicionarmos mais células estáticas além da que já existe inicialmente na tela, e para isso abriremos o menu lateral com as propriedades e clicaremos na opção "Show the Attribute inspector".

Com a Prototype Cell selecionada, veremos alguns campos da janela "Table View". Na opção "Content", escolheremos "Static Cells" ao invés de "Dynamic Prototypes".

Feito isso, notaremos uma mudança da visualização na tela, pois três novas células estáticas foram criadas, mas poderemos inserir quantas quisermos.

Inclusive, poderemos acessar a Library novamente e procurar por "cell" no campo de busca. O resultado mostrará dois componentes com esta palavra: o "Table View Cell" e o "Collection View Cell".

Arrastando o primeiro para dentro da tela, incluiremos mais uma célula ao conjunto, resultando em quatro cells. Portanto, é possível adicionarmos a quantidade que for necessária.

Selecionaremos as células e setaremos uma visualização padrão, ou seja, faremos com que tenham apenas uma label básica. Com a primeira selecionada, abriremos o menu lateral de propriedades "Table View Cell",e no campo "Style" escolheremos a opção "Basic", a qual nos trará uma etiqueta com um título padrão.

Faremos o mesmo com as outras três cells; para ganharmos tempos, seguraremos a tecla "Shift" e selecionaremos todas de uma só vez. Em seguida, bastará alterarmos o "Style" para "Basic" para adicionarmos um "Title" a cada uma.

Em seguida, alteraremos o valor da label para o nome de alguns alimentos clicando sobre "Title" e digitando "Churros", "Macarrão", "Salada" e "Temaki" por exemplo.

Testaremos o funcionamento da visualização, mas antes mudaremos o simulador de "iPhone XR" para "iPhone 8" por enquanto pois é o que estávamos usando, mas poderíamos utilizar outro também sem problemas.

Clicaremos no ícone de "Run" para rodarmos a implementação da Table View, e notaremos que a tela aparece vazia e não contém a tabela que implementamos. Ou seja, o sistema não encontrou a que deveria carregar.

Para entendermos o porquê disso ter acontecido, abriremos o projeto eggplant-browine.xcodeproj e acessaremos seu Storyboard. Quando iniciamos este trabalho, o Xcode nos trouxe um View Controller com uma seta na lateral da tela, indicando qual é a primeira a ser carregada no simulador.

Comparando com a tabela que estamos fazendo neste passo, notaremos que a seta não aparece, pois ainda não falamos para o Interface Builder carregar esta tela primeiro dentro do arquivo Main.storyboard.

Então deveremos setar esta configuração; selecionaremos o Table View Controller acima da tela e acessaremos suas propriedades no Inspetor de Atributos do menu lateral.

Na parte "View Controller", encontraremos a opção "is Initial View Controller" que deverá ser marcada. Com isso, a seta aparecerá ao lado da tela.

Logo, é importante lembrarmos que, sempre que adicionarmos uma tela customizada ou quisermos inicializar a tela de nosso aplicativo a partir de outro View Controller, bastará arrastarmos esta seta para a tela que queremos carregar ou fazermos este caminho que acabamos de aprender.

Com isso, buildaremos e rodaremos o simulador novamente para testarmos as alterações.

Na tela, veremos o componente Table View com quatro células, conforme o esperado. Inclusive, veremos uma destaque em cada uma que for selecionada com o cursor.

Até agora, montamos apenas uma tabela com informações estáticas, o que não é muito útil por enquanto. Afinal, nosso objetivo é montarmos uma table de acordo com os alimentos que adicionamos em nosso aplicativo.

Avançaremos com esta feature a seguir.

ViewController, modificando componentes - Um exemplo de herança no Swift

Anteriormente, criamos uma Table View estática com um conteúdo imutável. Neste passo, aprenderemos a gerar uma Table View dinâmica, ou seja, que nos possibilita alterar o valor.

Para exemplificarmos, fecharemos este projeto recém-criado para teste e criaremos um novo no Xcode da mesma maneira que já fizemos, e o nomearemos como "tabela-dinamica-refeicoes".

Depois de salvarmos e criarmos o novo projeto, iremos ao seu arquivo Main.storyboard para desenharmos as novas telas. Como já sabemos, o software traz um View Controller vazio por padrão, então deveremos acessar a Library e arrastar o componente Table View Controller para dentro do Storyboard. Como resultado, teremos duas telas para trabalhar.

Conforme vimos no exemplo da etapa anterior, deveremos selecionar qual tela o aplicativo irá inicializar. Como temos dois Views Controllers, arrastaremos a seta conhecida como Storyboard entry point da lateral da primeira tela para a outra, executando o Table View primeiro.

Com isso, poderemos excluir o View Controller vazio, pois não o utilizaremos mais, deixando apenas a tabela.

Conectaremos o Table View Controller com o arquivo ViewController.swift que controlará os elementos da interface gráfica via código.

Clicaremos no Table View Controller, abriremos o menu lateral de propriedades e clicaremos no terceiro ícone que contém a opção "Class" na parte "Custom Class".

Este campo possui um placeholder, ou seja, um texto de exemplo com o tipo esperado que deve ser inserido, que neste caso é o "UITableViewController" que inicia com "UI" de User Interface ou Interface do Usuário.

Geralmente não trabalhamos com este tipo, pois, se abrirmos o arquivo ViewController.swift, veremos que herda de UIViewController, o que é diferente do esperado no campo "Class".

Tentaremos conectar para vermos o que acontecerá; clicaremos no espaço do placeholder e digitaremos "ViewController". Logo quando começarmos a escrever, veremos que o Xcode não fornece nem mesmo o autocomplete.

Isso significa que o Interface Builder é inteligente o suficiente para identificar se o tipo que estamos tentando colocar é compatível com o que é esperado ou não.

Como requer o UITableViewController, alteraremos a classe do arquivo ViewController.swift para este novo nome.

import UIKit

class ViewController: UITableViewController {

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

Se tentarmos setar a classe novamente no campo "Class" das propriedades da Table View, o Xcode fará o autocomplete quando começarmos a digitar "View Controller".

Desta forma, estaremos herdando de UITableViewController. Apertaremos a tecla "Enter" para configurarmos a visualização com seu arquivo de controle, conectando os dois elementos.

Para testarmos e vermos se realmente está funcionando, abriremos o ViewController.swift e utilizaremos o método viewDidLoad() que já aparece no código por padrão. Seu próprio nome já diz que a view foi carregada.

Dentro, poderemos adicionar tudo o que quisermos fazer após o carregamento, como um print() contendo a frase "TableViewController foi carregado" para testarmos a configuração de conexão entre os elementos, por exemplo.

import UIKit

class ViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        print("TableViewController foi carregado")
    }
}

Rodando este código, subiremos o simulador e veremos a mensagem impressa no retorno do Xcode. Logo, conseguimos conectar a view com o View Controller com sucesso.

Agora abordaremos alguns pontos importantes sobre herança.

Quando colocamos a palavra reservada class para declarar uma classe seguida de seu nome, e depois colocamos os dois pontos : com outro tipo na sequência, significa que a classe ViewController está herdando de UITableViewController.

Ou seja, se entrarmos na definição deste último tipo, veremos ainda que este herda de outros elementos, inclusive de UIViewController. Já na definição desta classe, encontraremos vários métodos e atributos como o próprio viewDidLoad() que estamos utilizando.

Por isso mesmo há a palavra override antes da função, o que significa que estamos sobrescrevendo o método - que já existe - de alguma classe que estamos herdando, sendo UIViewController neste caso.

O compilador também nos ajudará com isso; suporemos que, por acaso, não sabemos que já existe viewDidLoad() na classe que estamos herdando. Se apenas criarmos uma func com este mesmo nome sem sobrescrever, o Xcode nos alertará sobre a necessidade de adicionarmos a keyword override para podermos usar o método de fato. Logo, este é um outro aspecto interessante de suporte do Swift.

Também temos o super dentro da função, o qual é utilizado em alguns casos específicos. Para sabermos quando usá-lo, teríamos que entrar na definição do método da classe mãe, o que pode ser um pouco trabalhoso em relação à herança.

Quando trabalhamos desta forma, tudo o que a class original é, nosso código herdeiro também será; ou seja, tudo o que UITableViewController possui, também possuiremos. Logo, poderemos chamar todos os métodos existentes na classe, inclusive os que herda da UIViewController.

Neste link, há uma postagem bastante interessante no Blog da Caelum escrita por Paulo Silveira sobre as diferenças, desvantagens e vantagens no uso de herança ou composição. O texto possui explicações e exemplos importantes que valem a pena serem conferidos, mas muitas vezes é melhor trabalharmos com composição mesmo.

A seguir, continuaremos com a implementação da Table View dinâmica.

Sobre o curso Swift parte 2: UIKit, storyboard e o padrão delegate

O curso Swift parte 2: UIKit, storyboard e o padrão delegate possui 216 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de iOS em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda iOS acessando integralmente esse e outros cursos, comece hoje!

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1222 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas