Aplicativo clone do Instagram usando SwiftUI e GraphQL – HomeView

Hoje, na parte 4 do nosso aplicativo clone do Instagram com GraphQL, continuaremos aprendendo um pouco de SwiftUI, criando nossa visualização Home.

Em nossos artigos anteriores, aprendemos como registrar um usuário e como fazer login em um usuário e criamos a visualização Profile com as respectivas UIs em nosso aplicativo clone do Instagram. Hoje, reutilizaremos parte desse código e criaremos algo semelhante a um UIScrollView com muito conteúdo.

Apertem os cintos de segurança e vamos lá!

Para um melhor aprendizado, faça o download do projeto iOS Instagram Clone com o código-fonte.

Deseja um início rápido?

Clone esse aplicativo em nosso Hub e comece a usá-lo sem problemas!

O que exatamente estaremos criando

Criaremos a seguinte visualização:

Como vimos anteriormente, o SwiftUI facilita muito a criação de interfaces complexas, pois você pode reutilizar muitos componentes com muita facilidade. A palavra aqui é “reutilizar”.

Lembra que já codificamos a barra inferior? Nós a reutilizaremos para isso. Todo o resto é novo.

Não falarei novamente sobre VStacks e HStacks, portanto, se você perdeu essa parte, leia-a aqui.

Nossos componentes de interface do usuário

Essa tela será composta basicamente de quatro componentes:

• A barra superior (com a câmera, a cadeia de caracteres do Back4Gram, o ícone da casa e o ícone do avião de papel)
• Barra de histórico (com os ícones dos históricos)
• Exibição detalhada da linha do tempo (com as postagens reais)
• Barra inferior (que será reutilizada)

Vamos começar a criá-las!

Barra superior

A barra superior é composta de cinco componentes:

• Botão da câmera
• Cadeia de caracteres Back4Gram
• Espaçador
• Botão House
• Botão do avião de papel

Adicione os ícones para os botões, como você já aprendeu, e vamos começar a programar.

Crie seu arquivo HomeView.swift e adicione um GeometryReader para que possamos redimensionar tudo de forma adequada:

E, assim como no tutorial anterior, vamos adicionar um VStack porque tudo será mostrado em um eixo vertical:

Nossa barra superior será um conjunto de componentes alinhados horizontalmente, portanto, vamos adicionar o HStack para criá-la:

E, por fim, adicione os controles que usaremos:

Qual é a aparência?

Estamos indo longe!

Agora vamos falar um pouco sobre a

Barra de histórico

A barra de histórico é, por si só, um componente complexo. Ela é como um UIScrollView do antigo UIKit, mas, dentro dela, temos um controle composto por uma imagem e um texto abaixo dela (também conhecido como VStack). Vamos criar essa estrutura:

Colocar isso em nosso VStack principal é tão fácil quanto adicionar o ScrollView. E para torná-lo mais agradável, vamos fazer com que ele role apenas horizontalmente e ocultar os indicadores de rolagem:

e, finalmente, adicioná-lo ao nosso VStack principal:

Verificando a aparência:

Agora, vamos nos adiantar e adicionar primeiro nossa…

Barra inferior

Agora vamos aproveitar toda essa reutilização. Basta adicioná-la do nosso arquivo BottomBar.swift ao nosso código:

E nosso código completo:

Não foi fácil? Qual é a aparência?

Que fofo!

Adicionando alguma complexidade

Nossa parte mais complexa dessa visualização será a visualização detalhada da linha do tempo.

Para mantê-la consistente com o que fizemos em nosso TimelineView, vamos criar um novo arquivo chamado TimlineDetailView.swift e, nele, criar uma nova estrutura que manterá os dados como em nosso TimelineView.

Lembre-se de que já temos a estrutura Preview declarada no TimelineView, portanto, vamos reutilizá-la também.

O Struct receberá um Preview para que possamos recuperar o imageUrl posteriormente:

E com isso feito, vamos adicionar a visualização em si:

O conteúdo principal também estará em um VStack:

E essa VStack terá quatro componentes:

• Um HStack com o logotipo, os textos e o botão de três pontos
• A imagem da postagem
• Uma Hstack com o botão de coração, o botão de comentário, o botão de avião de papel e o botão de bandeira
• Uma VStack contendo os textos “Liked by…” e “See all comments”.

Então, vamos começar adicionando o primeiro HStack:

E adicionando os controles dentro dele:

Em seguida, a imagem:

Nosso segundo HStack com todos os botões:

E seus controles:

E, por último, mas não menos importante, nossos textos VStack:

Agora, dentro do nosso TimelineDetailView, vamos codificar alguns Previews:

E, finalmente, fazer um loop para adicionar nossos PreviewDetailViews a um ScrollView:

Por fim, vamos adicionar isso ao nosso HomeView:

Por fim, vamos ver os resultados:

Que legal!

Conclusão

A reutilização é fundamental na SwiftUI.

Hoje você aprendeu a reutilizar o BottomView e a estrutura Preview de nossos artigos anteriores.

Chegou a hora de usar algumas funcionalidades e mal posso esperar por elas.

Fique ligado!

Referência

• A parte 1 desta série é o aplicativo Instagram Clone.
• A parte 2 é Swift Instagram Clone.
• A parte 3 é o Perfil do Instagram.
• A parte 4 é o Instagram Homeview.
• Baixe um projeto iOS Instagram Clone com código-fonte e comece a usar o Back4App.

Inscreva-se agora no Back4App e comece a criar seu aplicativo clone do Instagram.