Durante a WWDC 2019, um dos maiores e mais emocionantes momentos foi o anúncio de lançamento do SwiftUI.
SwiftUI é uma estrutura completamente nova que permite projetar e desenvolver interfaces de usuário com a gravação de menos código de maneira declarativa.
Ao contrário do UIKit, que era comumente usado em conjunto com
storyboards , o SwiftUI é completamente baseado em software. No entanto, a sintaxe é muito fácil de entender e o projeto pode ser visualizado rapidamente usando a Visualização automática.
Como o SwiftUI usa o idioma Swift, ele permite criar aplicativos da mesma complexidade com muito menos código. Além disso, o uso do SwiftUI permite automaticamente que o aplicativo use recursos como
Tipo Dinâmico ,
Modo Escuro ,
Localização e
Acessibilidade . Além disso, está disponível em todas as plataformas, incluindo
macOS ,
iOS ,
iPadOS ,
watchOS e
tvOS . Portanto, agora o código da interface do usuário pode ser sincronizado em todas as plataformas, oferecendo mais tempo para você se concentrar em um código específico da plataforma secundária.
Sobre este artigo
É importante que os desenvolvedores aprendam a usar o SwiftUI em um estágio anterior, pois a Apple enfocará a maior parte de sua atenção nessa estrutura. Neste artigo, examinaremos os conceitos básicos do SwiftUI e aprenderemos a criar navegação mínima, exibir imagens, texto e listas, criando uma lista de contatos simples que exibirá todos os membros de nossa equipe. Ao escolher um membro da equipe, o aplicativo exibe informações detalhadas que contêm a imagem do usuário com sua breve biografia. Vamos começar!
Inicie o
Xcode 11 . No momento da redação deste artigo, o Xcode 11 ainda estava na versão beta, portanto, alguns recursos podem não funcionar conforme o esperado. Neste artigo, usaremos o
Swift 5 . Embora o conhecimento avançado do Swift não seja necessário para este artigo, ainda é recomendável entender o básico do idioma.
Nota do editor: Para visualizar e interagir com imagens do Canvas no Xcode, verifique se o Mac OS 10.15 beta está instalado.
Criando um novo projeto usando o SwiftUI
Vamos começar tudo de novo para que você possa ver imediatamente como iniciar o aplicativo SwiftUI. Primeiro abra o Xcode e selecione "Criar novo projeto do Xcode". Para a plataforma iOS, selecione o aplicativo Single View. Digite um nome para o aplicativo e preencha os campos de texto. No entanto, verifique se Usar SwiftUI está marcado na parte inferior. Se você não selecionar esta opção, o Xcode criará um arquivo de storyboard para você.
O Xcode criará automaticamente um arquivo para você chamado ContentView.swift, e será incrível que uma visualização do seu código seja exibida no lado direito, como mostrado abaixo.
Se você não vir a visualização, clique no botão Continuar na área de visualização. A compilação do projeto levará algum tempo. Seja paciente e aguarde a compilação terminar.
Agora vamos ver como você pode modificar esses arquivos para criar um aplicativo.
Crie uma exibição de lista
A criação de uma exibição de lista é realizada em três estágios. O primeiro é criar linhas em uma lista. Talvez o design seja semelhante a um UITableView. Para fazer isso, crie um ContactRow. O segundo estágio é a transferência dos dados necessários para a lista. Eu tenho dados que já estão codificados e são necessárias apenas algumas alterações para associar a lista aos dados. A etapa final é simplesmente adicionar a barra de navegação e incorporar a lista na exibição de navegação. É bem simples. Agora vamos ver como tudo isso foi implementado no SwiftUI.
Crie uma lista de professores
Primeiro, você precisa criar uma exibição para exibir uma lista de todos os membros da equipe, incluindo fotos do perfil e descrição. Vamos ver como isso pode ser feito.
Como podemos ver, o código gerado possui um componente de texto com o valor "Hello World". No editor de código, altere o valor do código para "Simon Ng".
struct ContentView: View { var body: some View { Text("Simon Ng") } }
Se tudo funcionar corretamente, você verá uma atualização automática à direita. Esse é o efeito da visualização instantânea, como esperávamos.
Vamos adicionar um novo elemento de
texto no aplicativo. Esta será uma breve descrição do participante. Para adicionar um novo elemento de interface ao aplicativo, você precisa clicar no botão + no canto superior direito. Uma nova janela aparece com uma lista de diferentes visualizações. Mova a visualização com o nome Texto e coloque-a sob o elemento
Texto original, conforme mostrado abaixo.
Preste atenção ao código à esquerda:
struct ContentView: View { var body: some View { VStack { Text("Simon Ng") Text("Placeholder") } } }
Você pode perceber que um novo elemento de texto foi adicionado na exibição de texto com um valor de Simon Ng. A diferença é que agora essa visão parece ter envolvido a visão em algo chamado VStack. O VStack é usado para a pilha vertical e substitui o Layout automático no SwiftUI. Se você tem experiência no desenvolvimento de software para o watchOS, provavelmente sabe que não há restrições; além disso, todos os elementos são colocados em grupos. Com uma pilha vertical, todas as vistas serão organizadas verticalmente.
Agora altere o texto de "Placeholder" para "Founder of AppCoda"
Em seguida, vamos adicionar uma imagem à esquerda deste texto. Como queremos posicionar a vista horizontalmente com as vistas existentes, é necessário agrupar o VStack no HStack. Para fazer isso, clique em + no VStack e selecione Incorporar no HStack. Dê uma olhada nisso abaixo:
Este código deve ficar assim:
struct ContentView: View { var body: some View { HStack { VStack { Text("Simon Ng") Text("Founder of AppCoda") } } } }
Ainda não há alterações significativas, mas agora vamos adicionar uma imagem. Mude o código para ficar assim:
struct ContentView: View { var body: some View { HStack { Image(systemName: "photo") VStack { Text("Simon Ng") Text("Founder of AppCoda") } } } }
A partir do iOS 13, a Apple apresenta um novo recurso chamado SFSymbols. O SF Symbols, desenvolvido pela Apple, é uma coleção de mais de 1.500 caracteres que podem ser usados em aplicativos. Como eles podem ser facilmente integrados à fonte do sistema de São Francisco, os caracteres fornecem automaticamente o alinhamento vertical óptico com texto de qualquer tamanho. Como ainda não temos imagens de nossos professores, usaremos o chamado espaço reservado.
Agora, vamos nos concentrar em alguns problemas menores de design. Como é necessário emular a aparência do
UITableRow , vamos alinhar o texto à esquerda (ou seja, torná-lo o principal). Para fazer isso, faça
+ Clique no VStack e clique em
Inspecionar . Selecione o ícone de alinhamento esquerdo, como mostrado abaixo:
A seguir, veremos uma alteração no código. Além disso, o código será alterado em tempo real para exibir novas alterações.
VStack(alignment: .leading) { ... }
Agora que a segunda visualização de texto é o título, vamos alterar a fonte. Como antes, ⌘ + Clique na representação de texto de “Founder of AppCoda” no modo de visualização e selecione Inspecionar. Altere a fonte para "Subheadline" e exiba uma visualização e alteração de código em tempo real.
Vamos também mudar a cor e configurá-la para "Cinza". Este código deve ficar assim:
struct ContentView: View { var body: some View { HStack { Image(systemName: "photo") VStack(alignment: .leading) { Text("Simon Ng") Text("Founder of AppCoda") .font(.subheadline) .color(.gray) } } } }
Agora, depois de terminar o design de várias amostras, chegamos à parte mágica. Veja como é fácil criar uma lista. Execute ⌘ + Clique no HStack e clique em Incorporar na lista. Voila! Veja como o código será alterado automaticamente e a área vazia exibirá 5 belas novas linhas, cada uma mostrando Simon Ng como membro da equipe.
Além disso, observe como a lista foi criada no código. Removendo o HStack e substituindo-o por uma Lista duplicada, uma exibição de tabela foi criada. Agora pense quanto tempo você economizou e quanto menos código escreveu, evitando todos esses UITableViewDataSource, UITableViewDelegate, Auto Layout, implementações para o Dark Mode, etc. Tudo isso por si só mostra o poder e a força do SwiftUI. No entanto, estamos longe de estar completos. Vamos adicionar alguns dados reais à nova lista.
Conectar dados a uma lista
Os dados de que precisamos são uma lista dos membros da equipe e sua biografia, além de uma pasta com todas as suas imagens. Você pode baixar os arquivos necessários
aqui . Você deve encontrar 2 arquivos com os nomes
Tutor.swif te
Tutor.xcasset s.
Após o download, importe o arquivo com a extensão Swift e a pasta do recurso no projeto Xcode. Para importá-los, basta arrastá-los para o navegador do projeto.
No arquivo
Tutor.swif t, declaramos a estrutura do Tutor e a
colocamos em conformidade com o protocolo Identificável. Você entenderá por que isso é importante mais tarde. Também definimos as variáveis id, nome, manchete, bio e imageName. Por fim, adicione alguns dados de teste que serão usados em nosso aplicativo. Tutor.xcassets tem imagens de todos os membros da equipe.
Volte para
ContentView.swift e altere o código da seguinte maneira:
struct ContentView: View {
Tudo é bem simples:
- Defina uma nova variável chamada tutores, que é uma matriz vazia de estruturas do Tutor.
- Como estamos definindo uma nova variável para a estrutura do ContentView, portanto, você também deve modificar o ContentView_Previews para exibir essa alteração. Defina o parâmetro de tutores como testData.
Não haverá alterações na visualização, porque ainda não estamos usando dados de teste. Para exibir dados de teste, altere o código da seguinte maneira:
struct ContentView: View { var tutors: [Tutor] = [] var body: some View { List(tutors) { tutor in Image(tutor.imageName) VStack(alignment: .leading) { Text(tutor.name) Text(tutor.headline) .font(.subheadline) .color(.gray) } } } }
Verifique se o ContentView usa tutores para exibir dados na tela.
Lá vai você! Veja como a visualização mudou.
As imagens são exibidas como um quadrado. Eu gostaria que eles parecessem mais arredondados. Vamos ver como podemos criar uma imagem com cantos arredondados. No canto superior direito, clique no botão + e vá para a segunda guia. Isso exibirá uma lista de modificadores de layout que você pode adicionar às imagens.
Procure o raio do canto, arraste-o da janela de visualização e coloque-o na imagem. Você deve ver o código alterado e a imagem de visualização será alterada para o seguinte.
No entanto, um raio de curva de 3 é muito pequeno. Então, mude para 40. Assim, temos belas imagens arredondadas.
A célula e a lista estão prontas! Em seguida, você precisa exibir informações detalhadas quando o usuário clica na célula. Vamos começar a criar a navegação.
Criar navegação
A visualização de navegação agrupa a visualização existente na barra de navegação e no controlador de navegação. Presumivelmente, você já está familiarizado com o Storyboard e sabe que é bastante simples incorporar a exibição na interface de navegação. Tudo que você precisa fazer é apenas alguns cliques.
No SwiftUI, agrupar uma exibição de lista em um NavigationView também é muito simples. Tudo que você precisa fazer é alterar o código da seguinte maneira:
... var body : some View { NavigationView { List(tutors) { tutor in ... } } } ...
Você deve agrupar o código da lista em um NavigationView. Por padrão, a barra de navegação não possui um título. A visualização deve mover a lista para baixo, deixando uma lacuna muito grande no meio. Isso ocorre porque não definimos um título para a barra de navegação. Para corrigir isso, você precisa definir o cabeçalho adicionando a seguinte linha de código (ou seja, navigationBarTitle):
... var body : some View { NavigationView { List(tutors) { tutor in ... } .navigationBarTitle(Text("Tutors")) } } ...
Agora a tela deve ficar assim:
Em seguida, defina o botão de navegação. NavigationButton leva a uma nova tela, que está na pilha de navegação. Assim como agrupamos a lista em um NavigationView, precisamos agrupar o conteúdo da lista com o NavigationButton, como mostrado abaixo:
... var body : some View { NavigationView { List(tutors) { tutor in NavigationButton(destination: Text(tutor.name)) { Image(tutor.imageName) VStack(alignment: .leading) { Text(tutor.name) Text(tutor.headline) .font(.subheadline) .color(.gray) } } } .navigationBarTitle(Text("Tutors")) } } ...
O nome do membro da equipe agora é exibido em uma exibição detalhada. Agora é a hora de conferir.
No modo de visualização atual, você não pode interagir com a exibição. Normalmente, quando você clica em uma visualização, ocorre uma seleção simples de código. Para executar o teste e verificar a interação com a interface do usuário, você deve clicar no botão play no canto inferior direito.
A vista ficará escura e você poderá ter que esperar alguns segundos até que todo o simulador seja carregado antes que seja possível realmente interagir com as vistas.
Quando o download estiver concluído, você poderá clicar na célula e ela será exibida em uma nova exibição na pilha, na qual o nome da célula selecionada será exibido.
Antes de prosseguir com a implementação de uma exibição detalhada, deixe-me mostrar uma técnica complicada que ajudará a tornar seu código mais legível. ⌘ + Clique no NavigationButton e selecione "Extrair subview".
Boom! Você pode ver que todo o código no NavigationButton foi criado em uma estrutura completamente nova, o que o torna muito legível. Renomeie ExtractedView para TutorCell.
Agora você pode obter o erro no TutorCell. Isso ocorre porque não temos o parâmetro tutor para passar para essa estrutura. Corrigir o erro é muito simples. Adicione uma nova constante à estrutura TutorCell da seguinte maneira:
struct TutorCell: View { let tutor: Tutor var body: some View { ... } }
E, no ContentView, adicione o parâmetro ausente, alterando a linha para:
... List(tutors) { tutor in TutorCell(tutor: tutor) }.navigationBarTitle(Text("Tutors")) ...
Isso é tudo! Há uma lista e células, todas elas bem pensadas e organizadas na ordem necessária! Em seguida, criaremos uma visão detalhada que mostrará todas as informações sobre o professor.
Criando uma visualização para exibir informações detalhadas.
Vamos criar um novo arquivo, indo em Arquivo> Novo> Arquivo. No iOS, selecione SwiftUI View e nomeie esse arquivo como
TutorDetail .
Na visualização, a vista principal principal já foi criada. Vamos trabalhar com ele. Primeiro, clique no botão + e coloque a imagem sobre a exibição de texto já incorporada. Defina o nome da imagem como "Simon Ng". Uma foto de Simon deve aparecer. Agora mude o código como mostrado abaixo:
struct TutorDetail: View { var body: some View {
Em geral, esse código é claro o suficiente, mas se você precisar de esclarecimentos, não se preocupe. Aqui está o que acontece:
- Primeiro, empacotamos todas as nossas visualizações em uma pilha vertical. Isso é fundamental para o layout do design que adotaremos.
- Depois, pegamos a imagem de Simon e a animamos. Primeiro, defina os clipes de imagem em forma de círculo. Em vez de definir o cornerRadius, é muito mais eficaz porque o círculo pode ser adaptado a diferentes tamanhos de imagem. Adicionamos uma sobreposição de círculo com uma moldura branca que fornece uma bela moldura laranja. Por fim, adicionaremos uma leve sombra para fornecer alguma profundidade de imagem.
- Nossa última linha de código define a fonte do nome do professor para a fonte do título.
Você também precisa adicionar mais duas visualizações de texto: título e biografia. Arraste a exibição de dois textos abaixo da exibição de texto com o nome do professor e edite-os:
struct TutorDetail: View { var body: some View { VStack { Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) Text("Simon Ng") .font(.title) Text("Founder of AppCoda") Text("Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") } } }
A boa notícia é que temos uma exibição de texto. A má notícia é que eles parecem ruins e não mostram a diferença entre o título e a descrição detalhada. Além disso, a exibição de texto da biografia não exibe todo o texto. Vamos consertar.
Atualize o código da seguinte maneira:
struct TutorDetail: View { var body: some View { VStack { Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) Text("Simon Ng") .font(.title)
- Primeiro, instalamos o "Founder of AppCoda" com a fonte do subtítulo.
- Da mesma forma, definimos a representação de texto da biografia usando a fonte do título. Também alinharemos o texto com a linha .multilineTextAlignment (.center)
Vamos corrigir o seguinte erro. Precisamos exibir o texto inteiro da representação textual da biografia. Isso pode ser feito facilmente adicionando uma nova linha de código:
... Text("Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") .font(.headline) .multilineTextAlignment(.center) .lineLimit(50) ...
Tudo parece bom. Há uma última alteração de design que quero fazer. O título e as representações textuais da biografia estão muito próximos um do outro. Eu gostaria de ter algum espaço entre essas duas visões. Além disso, gostaria de adicionar um pouco de recuo a toda a torção para que não toquem nas bordas do dispositivo. Certifique-se de alterar o código da seguinte maneira:
struct TutorDetail: View { var body: some View { VStack { Image("Simon Ng") .clipShape(Circle()) .overlay( Circle().stroke(Color.orange, lineWidth: 4) ) .shadow(radius: 10) Text("Simon Ng") .font(.title) Text("Founder of AppCoda") .font(.subheadline)
Aqui fazemos algumas alterações:
- Adicionar um separador é tão fácil quanto chamar Divider ()
- Para adicionar preenchimento à pilha vertical inteira, você deve chamar .padding () no final da declaração do VStack.
Isso é tudo! Parabéns! A tela de visualização detalhada está pronta. Resta apenas conectar nossa lista de professores e sua descrição detalhada. É bem simples.
Transferência de dados
Para transferir dados, você precisa declarar alguns parâmetros na estrutura
TutorDetail . Antes de declarar uma variável do corpo, adicione as seguintes variáveis:
var name: String var headline: String var bio: String var body: some View { ... }
Esses são os parâmetros que passaremos do ContentView. Faça as seguintes alterações:
... var body: some View { VStack {
- Substitua o nome do professor da imagem pelo nome da variável
- Substitua o texto do título pela variável do título
- Por fim, substitua o longo parágrafo do texto pela variável bio
- Também foi adicionada uma linha de código que define o título da barra de navegação com o nome do professor.
Por último, mas não menos importante, precisamos adicionar os parâmetros ausentes à estrutura TutorDetail_Previews.
#if DEBUG struct TutorDetail_Previews : PreviewProvider { static var previews: some View { TutorDetail(name: "Simon Ng", headline: "Founder of AppCoda", bio: "Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS 12 Programming with Swift and Intermediate iOS 12 Programming with Swift. iOS Developer and Blogger.") } } #endif
No código acima, adicionamos os parâmetros ausentes e preenchemos as informações com as que tínhamos antes.
Você pode estar se perguntando o que aconteceu com as instruções
#if DEBUG / # endif . Isso significa que qualquer código incluído nesses comandos será executado apenas quando visualizado para fins de depuração. Na sua última aplicação, isso não acontecerá.
Nada deve mudar, pois a informação também é inalterada.
E assim, o último passo é associar essa visualização à lista. Alterne para o arquivo ContentView.swift. Tudo que você precisa fazer é alterar uma linha de código na estrutura do TutorCell. Altere o código NavigationButton para abaixo:
... var body: some View { return NavigationButton(destination: TutorDetail(name: tutor.name, headline: tutor.headline, bio: tutor.bio)) { ... } } ...
Em vez de exibir a vista com o nome do professor, você precisa alterar o destino para TutorDetail ao preencher os dados relevantes. Este código deve ficar assim:
Clique no botão play e interaja com a visualização. Se tudo funcionar bem, o aplicativo também funcionará bem.
Basta selecionar uma das entradas de membro:
E os detalhes do participante serão exibidos na tela detalhada.
Conclusão
Este artigo apresenta os conceitos básicos do SwiftUI. Agora será conveniente criar aplicativos simples, como um agendador de tarefas, etc. Sugiro dar uma olhada em alguns dos recursos abaixo, como a documentação da Apple e as sessões da WWDC 2019 sobre essa estrutura.
Documentação SwiftUITutoriais SwiftUIApresentando o SwiftUI: Criando seu primeiro aplicativoSwiftUI EssentialsEssa estrutura é o futuro da Apple, então é ótimo se você começar com ela. Lembre-se de que, se você não tiver certeza do código, tente trabalhar com visualizações automáticas e veja se é possível fazer alterações diretamente na interface do usuário para ver como o código é gerado. Se você tiver alguma dúvida, não hesite em perguntar nos comentários abaixo.
Para referência, você pode baixar o projeto concluído
aqui .