iOS com UIKit: fundamentos de view code

Iniciando o projeto - Apresentação

Olá! Meu nome é Giovanna Moeller e sou instrutora aqui na Alura. Boas-vindas ao curso de fundamentos de view code!

Audiodescrição: Giovanna se descreve como uma mulher branca, de cabelos loiros, lisos e longos com franja, e olhos castanho-escuros. Ela veste uma camisa preta, usa um cordão prateado e está sentada em um cenário iluminado em gradiente rosa e roxo, com uma prateleira à esquerda contendo livros e o logo da Alura e uma planta à direita.

O que vamos aprender?

Durante este curso, vamos começar a construir um aplicativo chamado Cinetopia. O interessante é que esse aplicativo será construído de forma programática; ou seja, não vamos utilizar storyboard, apenas código para construir a interface da pessoa usuária. É muito importante aprender sobre essa abordagem, porque ela é a mais utilizada no mercado de trabalho quando falamos de projetos iOS construídos com UIKit.

Pré-requisitos

Como pré-requisitos deste curso, você precisa ter uma noção da linguagem Swift e também um pouco da construção de aplicativos iOS, um pouco com storyboard. Mas não se preocupe, pois temos todos esses conteúdos aqui na plataforma.

Esperamos que você tenha se animado com esse projeto e tudo o que vamos aprender. Te esperamos na primeira aula!

Iniciando o projeto - Criando nosso projeto

Vamos começar criando o nosso projeto?

Criação do projeto

Com o Xcode aberto, no caso da instrutora, na versão 15, vamos criar um projeto clicando em "Create New Project…".

Não se preocupe se você tiver uma versão posterior ou anterior. Foque apenas no que vamos fazer.

Na janela aberta, selecionaremos a aba "iOS", e dentro dela escolheremos a opção "App". Em seguida, vamos dar um nome para o projeto. Nesse caso, o nome será Cinetopia.

No campo "Interface", em vez de "SwiftUI", vamos selecionar "Storyboard". A linguagem será "Swift", e não vamos habilitar a opção de "Include Tests" (Incluir testes), porque não vamos trabalhar com isso durante este curso.

Feito isso, vamos clicar em "Next" novamente. A próxima etapa é selecionar uma pasta para manter esse projeto. Para finalizar, vamos clicar em "Create". Com isso, já temos o projeto criado. Vamos explorar um pouco dos arquivos?

Já na tela inicial, temos algumas configurações de projeto. A primeira configuração é a da seção "Supported Destinations", ou seja, os destinos suportados dessa aplicação. Neste momento, temos o iPhone, o iPad e também o Mac. Se quisermos remover, por exemplo, o iPad, clicamos no sinal de menos (-) que temos abaixo da lista. Para adicionar, clicamos no sinal de mais (+) e selecionamos a opção desejada.

Temos também uma seção chamada "Minimum Deployments". Significa qual é a versão mínima do iOS que a pessoa deve ter para realizar o download desse aplicativo e usá-lo. Neste caso, usamos iOS 17.0, versão mais recente do iOS. Mas podemos mudar, por exemplo, para 16.5 ou qualquer outra versão. A mínima permitida é a 12.0, uma versão bem antiga do iOS.

Na parte de identificação ("Identity"), definimos basicamente a conta da Apple que utilizaremos para fazer o deploy do aplicativo, para subi-lo na loja.

Além disso, temos informações de deploy ("Deployment Info"). O que significa isso? Podemos mudar, por exemplo, a orientação do iPhone, isto é, se o aplicativo só vai ser exibido no formato vertical, que é o portrait, ou se ele também será exibido no formato horizontal, que é o landscape, e assim por diante.

No projeto, temos o arquivo AppDelegate.swift, um arquivo bem difícil de entender, mas não se preocupe muito com ele. Basicamente, essa classe AppDelegate contém informações do ciclo de vida da sua aplicação. Se ela está em primeiro plano, se ela foi para segundo plano, se a sua aplicação foi encerrada, por exemplo. Você pode implementar diversos métodos em relação a isso.

Nós também temos o arquivo SceneDelegate.swift, extremamente parecido com o AppDelegate.swift, também responsável por controlar o fluxo da aplicação. Porém, essa classe SceneDelegate foi introduzida no iOS 13, porque agora a Apple está introduzindo um conceito de cenas, significando que você pode ter duas instâncias do seu aplicativo na mesma tela.

Se você tem um iPad, talvez já tenha notado que podemos criar múltiplas janelas do mesmo aplicativo. Por isso temos a classe SceneDelegate, a Apple está introduzindo esse conceito. É nesse arquivo que vamos controlar o ciclo de vida da nossa aplicação. Você irá revê-lo posteriormente, quando formos fazer a migração do nosso aplicativo para o view code.

Há também o arquivo ViewController.swift, correspondente à classe responsável pela primeira tela do nosso aplicativo, e ela herda de UIViewController, que é a classe pai, responsável pelo ciclo de vida da nossa tela. Temos um método na linha 12, chamado viewDidLoad(), chamado quando a tela é carregada. Vamos explorar esse arquivo mais adiante.

Na sequência, temos o arquivo Main.storyboard, o único arquivo em que temos em todas as telas da aplicação. Nele, encontramos todo o controle de fluxo e de navegação. Porém, como este curso é focado em view code, não iremos utilizar storyboard na nossa aplicação.

Adiante, temos o arquivo Assets, onde colocamos cores e imagens da nossa aplicação. Também vamos voltar nele.

O arquivo LaunchScreen.storyboard também tem o formato de storyboard onde podemos arrastar elementos para a tela. Porém, esse arquivo é a tela que aparece de forma rápida quando iniciamos um aplicativo, aquela tela de carregamento.

Por fim, temos o arquivo Info.plist, que é basicamente o arquivo de configurações do nosso aplicativo. Também não precisamos nos preocupar muito com ele.

Conclusão

Agora que já conhecemos o que o Xcode nos traz quando criamos um novo projeto, recomendamos que você explore um pouco mais sobre essas funcionalidades, arquivos e tudo mais. Na sequência vamos começar a mexer de fato na nossa aplicação, partindo da importação de imagens e cores!

Iniciando o projeto - Importando imagens e cores

Vamos importar as imagens e as cores necessárias para o nosso projeto?

Importando imagens e cores

Faremos isso no arquivo Assets. A primeira opção que temos é o AccentColor. AccentColor significa a cor de destaque da nossa aplicação. Vamos clicar no quadrado no centro da tela, com a inscrição "Universal", e em seguida abrir o inspetor de atributos, clicando no ícone superior à direita ("Hide or show the inspectors").

Após abrir o painel à direita, na seção "Color", vamos definir a opção "Content" como "sRGB" em vez de "None". Agora podemos inserir uma cor RGB, e além disso, em "Input Method", conseguimos encontrar a opção "8-bit Hexadecimal". Com essa opção selecionada, podemos inserir uma cor hexadecimal.

Não se preocupe, pois vamos disponibilizar todas as imagens e cores utilizadas durante essa aula, mas você também terá acesso ao Figma, então você poderá conferir pelo template quais são as cores utilizadas, quais foram as imagens, realizar o download dessas imagens e assim por diante.

A cor de destaque será mantida como branco, cujo hexadecimal é #FFFFFF.

Na sequência, temos o ícone da aplicação, que é o AppIcon. Neste AppIcon, vamos colocar uma imagem de 1024 pixels por 1024 pixels, que será o logotipo da aplicação. Dentro do Finder, colocamos uma pasta chamada "images", onde temos todas as imagens. Vamos arrastar o arquivo App Icon.png para o Xcode; feito isso, já temos o ícone da aplicação.

Agora vamos selecionar o arquivo Logo.svg e também as três imagens Couple.png, Couple@2x.png e Couple@3x.png. Essas três imagens, na verdade, estão em escalas diferentes, pois temos o "@2x" em uma delas e o "@3x" em outra.

Conforme o tamanho do dispositivo utilizado, o sistema fará o redirecionamento automático dessas imagens. Por exemplo, se utilizarmos o aplicativo em um iPhone, a escala é menor, então ele vai exibir a imagem menor. Se utilizarmos um iPad, em que a escala é maior, ele vai exibir de forma automática a imagem provavelmente 2x ou 3x, em tamanho maior.

Com os arquivos de imagem selecionados, vamos arrastar para o Xcode. Agora, se clicarmos em Couple, conseguimos visualizar os itens 1x, 2x e 3x, as três imagens. Quanto ao Logo, por que não colocamos em três escalas? Porque ele é SVG, ou seja, é um formato vetorial que não perde a qualidade. Já a imagem do casal é PNG, o que significa que perde qualidade.

No Logo, vamos selecionar no inspetor de atributos à direita a opção "Preserve Vector Data", para preservar esse vetor. Além disso, em "Scales", vamos mudar de "Individual Scales" para "Single Scale", ou seja, uma única escala.

Agora que já temos as imagens importadas, vamos colocar as cores. Clicaremos no sinal de mais (+) no canto inferior esquerdo e selecionaremos a opção "Color Set", a qual chamaremos de BackgroundColor.

Dentro de BackgroundColor, teremos dois quadrados. Isso significa que podemos ter uma cor para o light mode (modo claro) e outra cor para o dark mode (modo escuro). Nesse caso, como não haverá distinção de dark mode e light mode, deixaremos apenas uma única cor. Para isso, em "Appearances", em vez de "Any, Dark", colocaremos "None".

Vamos mudar o hexadecimal dessa cor única, cujo código é #15053F, que é um roxo escuro. Faremos isso novamente para criar uma nova cor, mas para essa vamos definir o nome ButtonBackgroundColor. Em "Appearances", vamos alterar para "None", e em seguida vamos mudar o hexadecimal para #B370FF, um roxo meio lilás.

Conclusão

Agora nós já criamos o projeto, importamos as imagens, e também colocamos as cores. Na próxima aula, vamos falar um pouco mais sobre o view code!

Sobre o curso iOS com UIKit: fundamentos de view code

O curso iOS com UIKit: fundamentos de view code possui 102 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:

• Iniciando o projeto
• Adaptando para view code
• Hello, world!
• Construindo a tela inicial
• Trabalhando com navegação
• Conhecendo um novo componente