iOS: auto layout com Constraints

Criando um novo projeto - Apresentação

Olá, boas-vindas à Alura! Esse é o curso de criação de layouts para iOS utilizando o framework UIkit.

Nesse curso nós vamos trabalhar com um projeto novo e remodelado, o Alura Viagens. É o projeto que nós vamos implementar na prática para estudarmos o assunto principal do curso, que é uma das técnicas de auto layout que nós temos no iOS, chamada constraints.

A ideia principal é estudarmos como criar um layout e o adaptamos para ser responsivo em outros dispositivos como, por exemplo, o iPad.

Nós vamos começar o curso desde o início, revisando alguns componentes essenciais de UI que nós temos aqui, como labels, view e imagens; como fazemos para arredondar view e alterarmos a customização de textos.

Também vamos aprender a trabalhar com células customizadas na nossa TableView, como essa de viagem que você está vendo aqui.

Ao decorrer do curso, nós vamos estudando várias das técnicas que nós temos de constraints, até que cheguemos nesse resultado para iPhone e também iPad.

Para concluir esse curso sem nenhum problema, é interessante que você já tenha feito os cursos iniciais de Swift aqui na plataforma da Alura — são os cursos de Swift parte 1, 2 e 3; onde nós falamos do fundamento da linguagem e da parte do foundation — ou que você tenha conhecimentos equivalentes sobre a linguagem.

Esse é o conteúdo que nós vamos ver durante esse curso, e eu espero você!

Criando um novo projeto - Criando um novo projeto

Olá, boas-vindas à Alura! Eu sou o Ândriu e eu serei o seu instrutor durante esse curso, onde nós vamos falar de criação de layout para iOS, utilizando o framework UIkit.

Para começar, eu vou te apresentar qual projeto nós vamos utilizar como base para desenvolvimento. Nós temos aqui o projeto Alura Viagens remodelado, é um novo projeto.

E é esse projeto que nós vamos trabalhar e desenvolver durante esse curso!

O que começaremos a atacar nesse projeto? Uma dica é sempre entender quais são os componentes que temos antes de começarmos a colocar a mão na massa.

Quando eu digo componentes, não é saber o nome de cada componente tecnicamente. Eu tenho aqui um UI “Label”, uma UI “Image View”, uma UI “Table View”, não é nada de nomes técnicos.

Mas sim, você olhar a estrutura do layout e começar a entender de que forma foi feita. Nós temos aqui, por exemplo, uma listagem onde eu tenho um elemento abaixo de outro com scroll.

Nesse caso, são viagens, uma viagem embaixo da outra. Nós temos aqui o cabeçalho onde mostra o nome do aplicativo, nós também temos dentro do cabeçalho um banner e a lista.

Esse já é um bom ponto de partida para começarmos a entender como funciona a criação com UIkit. Nós temos o cabeçalho, que você var ver bastante com o nome de header. Nós temos também a lista de viagens.

Basicamente, nós temos duas divisões importantes nesse layout. Começaremos criando um novo projeto. Eu tenho o Xcode instalado - caso você ainda não tenha o Xcode instalado, basta você ir na Apple Store, procurar por Xcode e fazer o download.

Com o Xcode aberto, eu vou clicar em criar um novo projeto, ou seja, "Create a new Xcode project"... Cliquei nessa opção e ele vai abriu uma caixa com algumas informações.

É importante você verificar se já está marcada a opção “iOS” nessa parte superior. Se a opção “App” também já está marcada.

Nós vamos utilizar essas opções. Vou clicar em "Next" e terei algumas configurações do projeto -como o nome, vou colocar “AluraViagens”.

Aqui também é importante que você verifique se já está marcada a opção “Storyboard”, nós temos as opções “SwiftUI” e “Stoyboard”. Nesse caso, utilizaremos o “Storyboard”. Também verifique se a linguagem também é a linguagem Swift.

Agora eu vou clicar aqui em próximo, "Next" e vou salvar o meu projeto na área de trabalho. Cliquei em "Create".

Quando criamos o projeto, ele já nos traz alguns arquivos prontos. Nós temos aqui o “AppDelegate.swift”, o “SceneDelegate.swift”, um arquivo chamado “ViewController.swift”, um arquivo chamado “Main.storyboard”, os “Assets”, “LaunchScreen.storyboard” e “Info.plist”.

Quando falamos em construção de layout, basicamente temos três técnicas para fazermos essa construção. A primeira é utilizando o storyboard, "Main.storyboard".

Que é essa forma onde vemos as telas que vamos criar e elas se conectam dentro de um arquivo ou vários storyboards. Nós temos a criação de XIB, que é também utilizando a interface builder, ou seja, toda essa facilidade de você ver o layout e utilizar a library para conseguir colocar alimentos, label, botões e tudo mais.

Basicamente, arrastando eles para dentro. Nós temos também a forma através de código, chamada View Code - que é você digitando código e ele gera o layout.

Nós vamos utilizar o storyboard, que é essa que já está aberta. Como você pode perceber, ele simula uma tela de um iPhone - que é exatamente o que nós queremos.

Temos uma tela de um iPhone e tudo que colocarmos aqui dentro vai ser exibido para o usuário. É uma view onde colocamos o que quisermos. Eu tenho aqui o simulador. Clicando em “Simulator", eu tenho aqui o projeto. Nós começaremos criando uma lista simples.

Repare que temos uma lista bonita, com várias informações, imagens, nomes, descrições, valores e outras informações; mas para começarmos, criaremos uma lista simples.

Eu vou abrir o componente chamado “Library” no canto direito superior, que é a nossa biblioteca, "Library". Essa opção aqui, o sinal de adição (“+”).

Eu vou clicar nessa opção e ele vai abrir uma caixa com várias opções, com vários elementos para que consigamos desenvolver o nosso projeto. Nós temos “Label”, botão, um componente chamado “Segmented Control”, “Text Field”, “Slider”, “Swicth”, “Actovoty Indicator View”, entre outros.

O que precisamos entender aqui? Que existem vários componentes e aos poucos nós vamos utilizando vários dos principais que você vai encontrar no mercado, ou quando você for desenvolver o seu projeto pessoal. Passaremos pelos principais que, com certeza, você vai utilizar.

Como eu acabei de falar, nós temos aqui uma lista. Qual é o componente que podemos utilizar para criarmos essa tabela? Nós temos aqui um componente chamado “Table View”, é um componente onde conseguimos listar informações e é exatamente isso que precisamos nesse momento.

Eu cliquei em cima de "Table View". Eu vou clicar e arrastar para dentro da nossa tela. Nós temos aqui uma tela.

Repare que é comum você ouvir as pessoas chamarem de “View Controller”, por causa dessa nomenclatura que nós temos aqui, um controlador de view.

Para cada tela - que é essa que estamos vendo, a tela do celular - nós temos que ter um arquivo para controlarmos essa tela. Esse arquivo se chama “View Controller”, mas poderia se chamar qualquer outro nome.

Eu coloquei uma tabela, uma “Table View”. Vou clicar e redimensionar ela para que ocupe todo o espaço. Já coloquei a minha tabela dentro do nosso “ViewController” e agora nós vamos aprender a utilizar uma “Table View”.

Nós temos a parte da view, que é o que estamos vendo aqui e nós temos a parte da configuração dessa view, que é no arquivo "View Controller".

O que vamos fazer? Temos que entender como funciona uma “Table View”. Se você parar para pensar, provavelmente você já utilizou Word ou algum arquivo de documentos do Google ou da Microsoft para edição de texto.

Em algum momento provavelmente você já precisou criar algumas tabelas - // Tabelas. Quando você cria uma tabela no Word, por exemplo, ele te dá a opção de colocar o número de linhas, em uma tabela do Word você pode colocar o número de linhas, // numero de linhas.

E o número de colunas. Também você pode configurar cada linha. O que é configurar cada linha? Por exemplo: eu quero fazer uma lista das coisas que eu preciso comprar no mercado, eu preciso comprar 10 itens, então eu coloco o número de linhas: = 10.

E eu também vou colocar em cada linha as coisas que eu preciso comprar. Eu vou colocar, por exemplo, o pão na primeira linha, na segunda linha eu preciso comprar também ovos, na terceira linha eu vou colocar que eu preciso comprar leite e assim por diante - // 1 linha = pão, // 2 linha = ovos e // 3 linha = leite.

Essa é uma tabela básica que criamos no Word, aqui é a mesma coisa. Vamos fazer essa abstração, como criamos uma tabela no nosso aplicativo. Basicamente, precisamos das mesmas informações: o número de linhas e o que cada linha vai ter, só que agora aprenderemos a fazer isso utilizando a linguagem Swift.

Quando trabalhamos com o “Table View” é comum utilizarmos um recurso que a linguagem nos fornece chamado de protocolos. Se pararmos para pensar, o que é um protocolo? Por exemplo: quando você vai a algum lugar e está escrito "respeite os protocolos de segurança", provavelmente você tem que colocar um capacete ou óculos para você não se machucar.

Ou você vai em um hospital e está escrito "respeite os protocolos" - um médico, por exemplo, coloca o avental e tudo mais. O que eu quero dizer com isso? Protocolos são algumas regras que temos que seguir para que consigamos fazer alguma coisa.

Aqui é a mesma coisa, nós precisamos, obviamente, implementar um protocolo para a “Table View” funcionar. Como eu implemento esse protocolo? Eu posso vir na linha 10, colocar uma vírgula (,) e o nome do protocolo, que é , UITableViewDataSource.

O que eu acabei de fazer? Eu disse que o meu View Controller vai implementar o protocolo chamar UITableViewDataSource. Só que ele já está reclamando aqui que não estamos seguindo esse protocolo.

Para seguirmos esse protocolo, precisamos basicamente de dois métodos: um onde vamos dizer quais são as linhas, qual a quantidade de linhas; e o outro, como vai ser cada linha.

Se eu clicar no símbolo vermelho de erro e clicar em “Fix”, ele já vai me trazer dois métodos. Deixe-me passar tudo isso para a linha debaixo, só para ficar com uma visualização melhor.

Vamos tentar ler esse método e ver o que entendemos. O tableView ele fala que estamos utilizando a tableView e dá isso na assinatura do método.

Aqui, que é a parte mais importante, o número de linhas na sessão, numberOfRowsInSection. Número de linhas, lembra que eu falei que precisamos falar qual o número de linhas? E embaixo nós temos também o método cellForRowAt.

Ou seja, célula para linha - qual vai ser a célula para a linha 1, qual vai ser a célula para a linha 2, qual vai ser a célula para a linha 3 e assim por diante. Que é exatamente a parte onde preenchemos cada linha

Para começarmos a fazer o nosso projeto rodar com o nome de algumas viagens, por exemplo, ele pede que retornemos um Int, um inteiro. Vou retornar, por exemplo, 10, vou deixar fixo, que é só para começarmos a entender como funciona - return 10.

E na linha debaixo nós precisamos de uma célula, ou seja, ele pede no retorno que implementemos um UITableViewCell. O que eu vou fazer? Eu vou criar uma célula e inicializar ela passando um estilo default: let cell = UITableViewCell(style: .default,.

Esse reuseIdentifier: String?) por enquanto não vamos utilizar, eu não vou passar nada. Eu vou colocar aqui cell.textLabel?, que é basicamente uma informação que eu vou colocar na célula; e eu vou setar um texto para isso, .text = "viagem.

O número de linha que eu coloquei aqui - por exemplo: 10 - ele vai colocar viagem 1, viagem 2, viagem 3 até chegar na viagem 10. Na verdade, a indexação é de 0 a 9, vai colocar de 0 a 9.

Eu vou colocar aqui o número de linha que ele está passando, que é o /(indexPath.row), ou seja, a linha. Eu vou retornar isso para o método, vou dar um return e vou retornar a célula: return cell.

Você tem o título, para Label que nós temos aqui na célula e em seguida o número de linhas que ele está passando no momento. Vamos tentar rodar o projeto para vermos se está funcionando, vou escolher um simulador do iPhone, você pode colocar qual simulador quiser.

Nós vamos rodar o nosso projeto. Ele vai subir o simulador. Nós temos aqui uma tela e aparentemente ele não mostrou nada. Repare que temos algumas linhas, é a tabela que colocamos, a tableView.

Mas aparentemente ele não interpretou esses dois métodos que colocamos aqui. Isso acontece porque nós precisamos criar uma configuração adicional, ou seja, precisamos de alguma forma associar que essa tabela que nós colocamos aqui no storyboard está ligada a esses dois métodos que nós colocamos.

Como fazemos isso? Eu vou selecionar a tabela que nós acabamos de criar no storyboard. De alguma forma precisamos criar uma referência dessa tabela no nosso ViewController.

Quando precisamos criar essa referência, nós chamamos isso de outlets. Como eu crio uma referência dessa tabela no ViewController? Eu seleciono a tabela e clico nessa opção no canto superior direito, que é o nosso “Spector” e eu escolho a opção "Spector > Assistant".

Ele vai dividir a tela em dois, do lado esquerdo eu tenho o storyboard e do lado direito eu tenho o meu código.

Eu vou criar a referência no meu código, vou apertar a teclar “Ctrl” do meu teclado, clico e arrasto para o meu código. Eu vou chamar, por exemplo, de viagensTableView e clicar em "Connect".

Eu criei uma conexão da tabela no “ViewController.swift”, vou abri-la. O que eu preciso fazer? Eu preciso dizer que essa tabela vai implementar esse protocolo de TabelViewDataSource.

Eu vou pegar a viagensTableView, que é o outlet que acabamos de criar. Ele tem uma propriedade chamada dataSource, viagensTableView.dataSource.

Qual é o dataSource dessa TableView? É o próprio Controller: viagens.dataSource = self. Eu vou rodar novamente o projeto e nós vamos conferir se já está tudo OK - "Stop > Play".

Olhe só que legal, temos aqui a listagem simples com as configurações da TableView! Uma coisa que eu queria mostrar para vocês é que é muito comum hoje em dia os desenvolvedores, nos projetos que você pegar, o protocolo de dataSource não estar junto com a definição de classe.

A galera acaba criando umas extensões, ou seja, eu posso fazer isso: posso criar uma extensão da minha classe de extension ViewController: e implementar o protocolo de UITableViewDataSource {.

Eu passo esses dois métodos para baixo; seleciono da linha 19 até 29, copio e colo na linha 21. Fica assim.

Não muda em nada o funcionamento do projeto, é a mesma coisa; mas é outra forma de você separar todos os protocolos que você for utilizando dentro do seu “ViewController.swift”.

Você acaba deixando um pouco mais organizado. Se for um projeto grande, que você vai ver que vai ter vários protocolos, você pode criar uma extensão de implementação para cada protocolo para ficar mais legível e mais fácil de você achar cada pedaço.

Vou rodar novamente só para você ver que está funcionando da mesma forma, vou clicar em "Play".

Nós temos aqui a nossa primeira lista de viagens!

Cabeçalho do aplicativo #1 - Criando o header

De volta com o nosso projeto, nós acabamos de criar a lista onde nós ainda estamos mostrando somente uma mensagem qualquer, mas já temos uma lista.

Agora é hora de nós avançarmos com a próxima etapa, que é a criação do cabeçalho do nosso projeto, ou seja, do header. Nós temos aqui, basicamente, uma view azul com uma label e um banner.

Nós vamos começar criando uma nova view para encaixarmos dentro do header da nossa TableView. Eu venho na pasta principal do projeto, clico com o botão direito em "AluraViagens > New File".

E agora nós vamos criar uma nova view para o nosso projeto! Eu vou selecionar a opção “View”, que está dentro da seção interface builder, “User Interface”, na verdade. Vou clicar em “Next”.

Ele pede um nome para a nossa view. Qual nome eu vou colocar? Eu vou colocar "HomeTableViewHeader". “Home” porque é a tela inicial, a tela principal do nosso aplicativo; e “TableViewHeader”, que é a nomenclatura que daremos para o nosso header.

Cliquei em "Criate". Ele traz aqui uma view como se fosse a tela realmente de um iPhone, só que se você for perceber, nós precisamos de uma view menor, uma view pequena para encaixarmos na parte de cima da nossa listagem.

Começaremos redimensionando essa view. Eu tenho as medidas que vamos utilizar: a largura de 414 e a altura 300. Como eu faço para redimensionar uma view? Eu clico em cima dela e abro as opções de configuração da view no “Show the Size inspector”, no canto superior direito.

Cliquei e ele me trouxe várias opções. Eu vou selecionar a opção onde eu tenho esse size inspector e vai me trazer a largura e altura. Como eu faço para alterar essas opções? Repare que eu não consigo mexer.

Eu venho em “Show the Attributes Inspector” e clico no campo de “Size” e coloco a opção “Freeform”. Quando eu clico nessa opção “Freeform”, eu consigo colocar a altura que eu quiser. Vamos só checar a altura. Nós temos uma altura de 300, então onde está 896 eu vou colocar 300.

Já tenho um espaço muito mais parecido como o que nós precisamos criar e agora eu vou alterar a cor de fundo. Como eu faço para alterar? Eu tenho aqui a cor branca e eu quero deixar azul.

Cliquei em cima da view e eu vou selecionar a opção de cor de fundo, ou background color, e vou ter várias opções. Eu vou clicar em "Background color > Custom", que é uma cor customizada que utilizaremos.

E ele me pede uma cor RGB. Eu já tenho aqui a cor para aplicarmos: 30, 59 e 119. Abri “Sublime Text". Vamos lá! Digitei 30 na linha Red, 59 na linha Green e 119 na linha Blue. [03:46] Vou só conferir - 30, 59, 119. Já temos a cor da nossa view, agora vamos colocar uma label! Vou voltar no simulador e repare que nós temos a label “alura viagens”.

Como colocamos uma nova label na nossa view? É muito simples, basta abrirmos a opção da biblioteca de elementos nesse sinal de adição, "Library". Eu vou clicar e arrastar e label para dentro da nossa view do cabeçalho.

Eu tenho aqui uma label, a primeira coisa que eu vou fazer é alterar o texto dessa label. Ao invés de label, vamos colocar alura viagens como está no simulador.

Tem duas formas práticas de fazer isso: eu posso dar dois cliques sobre Label e digitar alura viagens; ou eu posso vir na seção no canto direito onde eu tenho a “Label”. E eu posso alterar aqui o texto; posso colocar qualquer coisa, que e ele vai alterar na view.

Vou voltar o texto para alura viagens. Agora precisamos alterar o tipo de fonte e o tamanho. Eu tenho o tipo que vamos seguir. Vou selecionar “Label > Font”, onde eu tenho a parte de fonte no canto direito, eu vou clicar no “T”.

Eu tenho a opção que já vem pré-selecionada, a default, e eu vou querer uma fonte customizada, vou clicar em custom e ele me traz várias opções, "T > Custom".

A opção que eu tenho aqui, a que nós vamos seguir, é utilizar a fonte “Konihoor Devanagari”, vou clicar em cima dela e vou alterar o estilo para “Style > Semibold”.

Repare que a nossa label já está com uma formatação diferente. Só vou conferir a fonte e o tamanho, 23. Como eu faço para alterar o tamanho? Eu clico novamente no “T”, onde eu tenho a opção “Size” (tamanho). Eu vou alterar para “23” e clicar em "Done" para confirmar.

Agora o último passo é altearmos a cor da label. Vou novamente selecionar a label. Eu seleciono a opção "Color > White Color". Olhe só!

Já temos algo parecido com o que nós estamos desenvolvendo, que é o header do nosso app. O próximo passo que veremos a seguir é como colocamos essa view dentro da nossa tabela. Vamos encaixar essa view que acabamos de criar na parte de cima da listagem das viagens que nós temos aqui.

Sobre o curso iOS: auto layout com Constraints

O curso iOS: auto layout com Constraints possui 213 minutos de vídeos, em um total de 48 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:

• Criando um novo projeto
• Cabeçalho do aplicativo #1
• Cabeçalho do aplicativo #2
• Editando e apagando constraints
• Criando células customizadas
• Tamanho de classes (size classes)