Criando Onboarding com SwiftUI

Rebecca Mello
Apple Developer Academy | Mackenzie
3 min readDec 5, 2022

É muito comum vermos alguns aplicativos que, na primeira vez que entramos, há alguns passos que nos ensinam a usar tal app. Essa estrutura se chama Onboarding, muito comum principalmente em jogos.

Aqui está um exemplo dele:

Vamos ver como podemos fazer isso em código usando o framework do SwiftUI.

Primeiro, vamos montar a estrutura de como serão as páginas do Onboarding. Para isso, vamos criar um novo arquivo chamado PageView e adicionar os elementos da imagem e texto, em uma VStack para que fiquem um embaixo do outro:

PageView.swift

Em seguida, chamamos essa estrutura em um outro arquivo, OnboardingView, para que apareçam na sequência:

OnboardingView.swift

Agora que já temos a estrutura pronta, precisamos chamar essa view na tela principal do nosso aplicativo e indicar em quais momentos o Onboarding de fato deve aparecer, sendo apenas na primeira vez que abre o aplicativo.

Para que isso aconteça, deve-se criar uma variável que será o controle para a chamada da view, sendo a shouldShowOnboarding:

ContentView.swift

Tendo isso feito, basta criar uma forma de sair da tela do Onboarding para ir à página principal do aplicativo. Nisso, pode-se fazer um botão na última tela que tenha essa ação.

No arquivo da PageView, acrescente uma variável de showDismissButton, do tipo Bool, e, em cada chamada dessa view na tela do OnboardingView, acrescente esse argumento indicando se deve ou não aparecer, colocando “true” na última página e “false” nas demais.

PageView.swift

E finalmente, inserimos a estrutura do botão na PageView e a sua ação. Para isso, fazemos uma verificação para garantir que o botão só apareça nos momentos certos e montar sua estrutura na PageView dentro de sua VStack, embaixo dos demais elementos:

PageView.swift

E para que o botão tenha a ação de indicar que o Onboarding não deve aparecer mais ao abrir o aplicativo, adicionamos uma variável do tipo @Binding, do mesmo nome que a @State tem na tela principal do app, para setarmos ela como false dentro da ação do botão:

PageView.swift e OnboardingView.swift
PageView.swift

E assim está feito o seu Onboarding!

Referência

--

--

Rebecca Mello
Apple Developer Academy | Mackenzie

Desenvolvedora iOS, formada em Ciência da Computação e, atualmente, fazendo pós graduação em Novas Tecnologias, Transformação Digital e Agilidade.