Primeiras aulas do curso iOS: Layouts com SwiftUI

iOS: Layouts com SwiftUI

De UIKit para SwiftUI - Introdução

Olá, seja bem-vindo ou seja bem-vinda à Alura. Nesse curso nós vamos falar sobre SwiftUI, que é um novo framework que foi lançado no ano de 2019 pela Apple. Foi anunciado no evento chamado WWDC - Apple Worldwide Developers Conference, que é um evento anualmente realizado pela Apple nos Estados Unidos, no estado da Califórnia. Geralmente ocorre nessa cidade aqui em San Jose, pertinho ali de São Francisco.

É um evento que é muito interessante para nós, profissionais de desenvolvimento de software para os dispositivos da Apple, que eles anunciam as principais novidades, atualizações e tudo mais. Essa imagem resume muito bem como nós ficamos assistindo o evento no ano passado, que foi, de fato, bastante novidades, inclusive foi anunciado esse framework que nós vamos falar durante esse curso, que é o SwiftUI.

Então nós vamos iniciar o nosso curso vendo as principais diferenças entre o UIKit e o SwiftUI, como, por exemplo, onde está o arquivo Storyboard, o que aconteceu com o ViewController e também nós vamos começar a entender a sintaxe declarativa do SwiftUI. Você vai perceber que é uma sintaxe bem intuitiva, parecida com outras plataformas como Flutter e alguma coisa do tipo, é bem interessante.

Nós vamos também começar a entender as principais motivações e vantagens de se trabalhar com SwiftUI, como por exemplo quando nós precisávamos criar um aplicativo para iOS, geralmente nós utilizamos o UIKit, mas se nós precisássemos criar um aplicativo para Mac, para o computador mesmo da Apple, nós teríamos que aprender um outro framework, chamado AppKit, que é bem diferente do UIKit.

Então nós tínhamos que aprender duas sintaxes bem diferentes para criar aplicativos similares para os dispositivos da Apple. O SwiftUI vem justamente para cobrir essas deficiências, como por exemplo: nós conseguimos através de uma única sintaxe, do SwiftUI, criar aplicativos para iOS, para Mac, para tvOS, para iPadOS e watchOS. Então, resumindo é uma sintaxe única que você vai conseguir criar aplicativos para todos esses positivo da Apple, então é bem interessante.

Depois nós vamos seguir vendo as principais novidades, como por exemplo a pré-visualização, então é um recurso bem interessante, onde nós vamos criando o nosso layout e tem uma área específica do Xcode onde nós vamos conseguir ver, em tempo real, as modificações. Então eu coloco, por exemplo, um texto, eu já consigo ver sem precisar buildar o aplicativo a todo momento no simulador, então são algumas novidades bem interessantes.

Na terceira aula, nós vamos nos aprofundar nos componentes de interface do usuário, como por exemplo: textos, listas - que em UIKit chamamos de tableview - botões e o principal, entender como é que funciona esse esquema de empilhamento de elementos no SwiftUI. Por isso é muito interessante que você já tenha feito o curso de layout para iOS, em UIKit mesmo, mas o conceito é basicamente o mesmo.

Então é bem interessante que você já esteja familiarizado com Steck View e tudo mais para que quando você chegue nesse ponto do curso, você consiga entender sem nenhum problema. Depois nós vamos seguir testando os aplicativos em um iPhone e em um iPad e vamos começar a entender como é que fazemos para que migrar esse mesmo layout para os dois tamanhos.

Nós vamos começar a ver então como é que trabalhamos com size class no SwiftUI e vamos aprender tudo isso de forma prática, através de um projeto que, se você acompanha os cursos aqui, você já conhece, que é o aplicativo Alura Viagens. Então é bem interessante, porque se você acompanhou os cursos aqui de iOS, você vai se você vai ter uma base em UIKit e agora você vai aprender a criar o mesmo aplicativo em SwiftUI.

Então fazer esse depara vai ser bem interessante. Nós vamos aprender de forma prática como é que interagimos com esse aplicativo, como é que criamos navegação de telas, como é que customizamos esses elementos e, no final, vamos ter um resultado parecido com esse. Esse é conteúdo que nós vamos ver durante esse curso e eu espero você.

De UIKit para SwiftUI - Criando projeto com SwiftUI

Olá, seja bem-vindo, seja bem-vinda, à primeira aula do nosso curso de SwiftUI aqui na Alura. Agora que você acabou de assistir o vídeo de introdução, onde eu apresento para você todo conteúdo que nós vamos estudar juntos durante essa jornada, vamos começar, sem perda de tempo, criando o nosso primeiro projeto com SwiftUI. Nesse vídeo, a ideia é analisarmos as principais diferenças que essa biblioteca nos traz logo quando nós criamos um novo projeto.

Então nós vamos analisar todas as estruturas para que consigamos começar então o nosso projeto Alura Viagens. Primeiro ponto de atenção que eu queria comentar com vocês é em relação à versão do Xcode. Eu indico, para que você consiga seguir esse curso sem nenhum problema, que você também utilize a mesma versão, ou a versão 11, posterior, assim não vamos encontrar muitas modificações em relação ao posicionamento dos elementos e das ferramentas na IDE.

Então vamos lá. Eu vou clicar aqui em criar novo projeto. É aberta essa caixa de diálogo, onde já vem a opção Single View App, nós vamos manter essa opção selecionada, vou clicar em Next. Primeira coisa que ele me pergunta é o nome do nosso produto, ou seja, o nome do nosso aplicativo. Nós vamos utilizar o nome Alura Viagens: "alura-viagens". Bacana.

Uma coisa nova, que apareceu aqui para nós, é essa caixinha aqui, chamada User Interface. Repara que já vem selecionada a opção SwiftUI, que é a nova biblioteca, que nós vamos estudar aqui, de criação de interface. Só que se eu também quiser utilizar a opção de Storyboard, [CHIBS] e tudo mais, eu ainda tenho a opção aqui Storyboard.

Então tem o SwiftUI e Storyboard. Vamos manter a opção SwiftUI. Bacana. Vou clicar em Next e eu vou escolher o diretório onde eu quero salvar o meu projeto. Eu vou manter a opção Desktop e vou clicar em criar. Logo quando criamos o projeto com a opção SwiftUI selecionada, você já vai ver algumas diferenças na sua tela e a vamos analisar juntos agora.

Repara que a tela veio dividida no meio, onde nós temos aqui o arquivo de código e nós temos aqui também o que nós chamamos de pré-visualização. Isso é um dos pontos mais interessantes sobre SwiftUI, nós conseguimos fazer uma alteração no nosso código e ver em real time a alteração no lado direito, desde que esteja implementado protocolo de pré-visualização na sua View.

Então olha só: eu vou clicar aqui em Resume para que ele carregue a pré-visualização da View, que nós estamos codificando aqui do lado esquerdo, que na verdade já veio por padrão esse texto "Hello, World!". E vamos então começar a alterar algumas coisas para ver como isso funciona. Mas antes disso, eu vou mexer aqui na visualização, repara que está muito grande a pré-visualização.

Então vou clicar aqui no zoom, vou selecionar 75%, repara que já ficou um pouquinho melhor e eu vou também clicar para fechar o menu do lado direito. Então vou clicar aqui e eu tenho mais espaço para ver o meu código e também a pré-visualização. Bacana, vamos então começar a analisar a estrutura básica que nós temos aqui, que já veio criada.

Nós temos o "import" do "SwiftUI". Antigamente nós tínhamos o import do UIKit, quando nós estamos utilizando Storyboard e tudo mais. Agora nós temos o "import SwiftUI". E aqui embaixo nós temos uma "struct" chamada "ContentView:" e ela implementa as características de uma "View:". Quais são essas características?

Nesse momento é uma variável chamada "body:", então nós temos uma variável chamada "body", que é do tipo alguma View, uma View, no caso, genérica, tipo View mesmo. Embaixo nós temos um texto: texto. E nós temos aqui uma string "("Hello, World!")". Bem bacana. Primeiro teste que nós vamos fazer nesse vídeo é alterar o conteúdo desse texto.

Eu vou apagar aqui o "("Hello, World!") e eu vou escrever aqui "("Primeira aula de SwiftUI"). Repara que quando nós alteramos o texto aqui do lado esquerdo da nossa View, o preview, ou seja, a pré-visualização já entende e já altera para nós, assim conseguimos ver em tempo real as modificações de UI que nós temos na nossa View. Isso é muito bacana, muito bacana mesmo.

Se você trabalha com iOS há bastante tempo, ou há pouco tempo, também você vai notar essa diferença em relação a subir o simulador e a utilizar o preview. Então é muito tempo perdido quando precisamos, a todo momento, ficar subindo simulador e tudo mais. Repare que quando eu alterei aqui cima o tipo do device, ele automaticamente já altera aqui o preview também. Isso é muito bacana.

Essa é a primeira modificação drástica que nós temos, esse recurso de pré-visualização, que exatamente essa segunda "struct" que nós estamos vendo aqui embaixo. Olha, tem uma "struct" chamada "ContentView" que nada mais é do que o nome da View, que já veio criada para nós, seguido de "_Previews:". O que essa "struct" tem?

Ela implementa as características de um "PreviewProvider", que nada mais é do que um protocolo que implementa uma variável estática chamada "previews:". Aqui embaixo eu coloco o nome da View que eu quero que eu veja a pré-visualização, nesse caso, "ContenView()", que é o nome dessa View aqui de cima.

Ou seja, resumindo, essa "struct" aqui de baixo, ela serve somente para nos mostrar a pré-visualização da View que nós estamos vendo. Tanto é que se eu tirar e apagar esse trecho de código, essa pré-visualização vai sumir - vai sumir. Mas repara que o nosso código não aponta nenhum erro, porque não é obrigatório implementar essa pré-visualização.

Vou até fazer um teste, que é rodar o simulador, para que você veja que vai dar sucesso e vamos conseguir visualizar, no simulador, da mesma forma .Ou seja, a pré-visualização não é obrigatória, ela apenas nos ajuda a ver as alterações de layout em tempo real. Então aqui estamos subindo o simulador, repara que é um tempo significativo de espera para que ele compile o nosso código e suba no simulador, mas a pré-visualização não interfere no funcionamento do nosso código, nem nada. É somente para nos ajudar.

De UIKit para SwiftUI - Características de classe

Antes de continuarmos com o nosso projeto, eu queria explicar para vocês dois tópicos que talvez você tenha olhado com um pouquinho de estranheza no vídeo passado, que é justamente sobre essa keyword "struct", que pouco nós vimos nos cursos passados. E também sobre esse tipo de variável, que chamamos em Swift, de variável computada.

Então vamos dar uma pausa agora, eu vou explicar nesse vídeo para vocês, a importância de "struct", classe e variável computada e depois voltamos para continuar o nosso projeto. Eu vou utilizar o Playground, que vai nos ajudar bastante nessa explicação. Então ao clicar aqui em arquivo, novo e vou escolher opção Playground. Legal.

Vou manter aqui essa opção e eu vou chamar de "structxclass". Vou dar um Create. Legal, temos aqui então um arquivo Playground, vamos começar falando de classe, que nós já estamos acostumados a trabalhar. Então quando estamos trabalhando com classe ou "Class", nós temos coisas que nós já conhecemos, como por exemplo: variáveis e constantes, podemos criar métodos - criar métodos.

Podemos trabalhar com herança, nós podemos implementar protocolos e várias outras coisas que nós já conhecemos, certo? Mas vamos retomar aqui, para que consigamos ver as diferenças. Vou criar uma classe, chamada "Pessoa", essa classe vai ter alguns atributos. Quais são esses atributos? "nome:", toda a pessoa tem nome, "sobrenome:" e até aqui acho que está ok.

Eu vou criar aqui então o método construtor e eu vou passar algumas informações para que eu consiga criar a classe. Eu vou passar o "(nome:)", que é uma "String" e eu vou passar o ", sobrenome:", que também é "String". Eu pego o meu atributo da classe e falo que é igual ao que eu estou recebendo por parâmetro. Beleza. Vou dar o Playground só para ver se não tem nenhum bug. Cliquei aqui, está dando Running aqui em cima.

A ideia é a seguinte: vamos instanciar uma classe "Pessoa" passando um nome e depois vamos instanciar uma outra classe e vamos ver uma diferença de classe para "struct", que eu vou mostrar para vocês, que é o seguinte - olha, ele já rodou aqui, não tem nenhum problema com nosso código. Então eu vou começar aqui criando - não, instanciando essa classe. Então, por exemplo, o "let aluno = Pessoa".

Esse aluno vai ter um "nome", vou colocar aqui, por exemplo, "Diego", "Silva". Criei o primeiro aluno. Agora eu vou criar um novo aluno: "let novoAluno =" ao primeiro aluno, que é esse que nós acabamos de criar aqui na linha de cima. Eu vou fazer o seguinte, olha: vou imprimir aqui para nós "("ALUNOS: --")", o primeiro que nós criamos e o novo aluno. Vamos rodar isso aqui para ver?

[04:011 Olha que bacana: então eu tenho aqui "ALUNOS: --" "Diego" e "Diego". É óbvio que o nome dele vai ser Diego porque nós criamos um aluno chamado Diego e passamos a referência dessa primeira classe para o novo aluno. Perceba bem na palavra referência - isso faz muito sentido, porque agora vamos fazer uma nova modificação. Olha só: eu vou pegar aqui esse aluno "aluno.nome =" e vou setar um novo nome para ele.

Agora não vai ser mais Diego, vai ser "= "Alberto" ". Ele vai reclamar porque estamos trabalhando com constante, então eu vou mudar aqui para "var". Vou tentar rodar e vamos tentar novamente imprimir esses valores. Então "("APÓS ALTERAÇÃO: --")" nós temos esse resultado, "(aluno.nome)" e aqui nós temos o "(novoAluno.nome)". Vamos ver o que aconteceu?

Vou rodar. O Playground está processando e nós temos as seguintes saídas: a primeira vez nós tínhamos o Diego e criamos o novo aluno, passamos a referência do primeiro aluno para o segundo e é óbvio que ele imprimiu o nome igual. Só que agora a diferença é a seguinte: eu alterei o nome somente do primeiro aluno, então até esse momento aqui, os dois alunos se chamavam Diego.

Eu alterei o nome do primeiro e pedi para imprimir novamente o nome dos dois alunos e ele alterou para Alberto. Por que o nome do novo aluno é Alberto, se eu só alterei o nome do primeiro aluno? Porque quando trabalhamos com classe, trabalhamos com referência. Então essa é a primeira modificação que nós temos que entender: quando nós trabalhamos com classe, nós estamos trabalhando com a referência do objeto.

Ou seja, nós temos aqui o primeiro aluno. Eu criei o segundo aluno passando a referência do primeiro aluno. Se eu fizer uma alteração aqui, vai ser refletido aqui porque os dois têm a mesma referência. Dessa forma, nós trabalhamos com algo que, se você pesquisar na internet sobre classe, eles chamam de Reference Type, tipo de referência.

Ou seja, em inglês, você vai encontrar esse assunto por Reference Type. Classe trabalha com Reference Type, ou seja, nós passamos a referência. Isso é muito importante, porque no próximo vídeo nós vamos estudar um pouquinho sobre struct e você vai ver que struct não trabalha com Reference Type. Vamos ver isso no próximo vídeo.

Sobre o curso iOS: Layouts com SwiftUI

O curso iOS: Layouts com SwiftUI possui 193 minutos de vídeos, em um total de 43 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!

  • 1265 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

  • 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

  • 1265 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

  • 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

  • 1265 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

  • 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

  • 1265 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

  • 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
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas