Instagram Clone App usando SwiftUI y GraphQL – HomeView

Hoy en la parte 4 de nuestra App clon de Instagram con GraphQL vamos a seguir aprendiendo algo de SwiftUI, construyendo nuestra vista Home.

En nuestros artículos anteriores, aprendimos cómo dar de alta a un usuario y cómo loguear a un usuario y creamos la vista Perfil con las respectivas UIs en nuestra App clon de Instagram. Hoy reutilizaremos parte de ese código y crearemos algo similar a un UIScrollView con mucho contenido.

Abróchate los cinturones y ¡manos a la obra!

Para aprender mejor, descarga el proyecto iOS Instagram Clone con el código fuente.

¿Quieres un comienzo rápido?

¡Clona esta App desde nuestro Hub y empieza a usarla sin complicaciones!

Qué vamos a construir exactamente

Vamos a construir la siguiente vista:

Como hemos visto antes, SwiftUI hace que sea muy fácil construir interfaces complejas, ya que puedes reutilizar un montón de componentes muy fácilmente. La palabra aquí es “reutilizar”.

¿Recuerdas que ya codificamos la barra inferior? La reutilizaremos para esto. Todo lo demás es nuevo.

No volveré sobre VStacks y HStacks de nuevo, así que si te perdiste esa parte, revísala aquí.

Nuestros componentes UI

Esta pantalla estará compuesta básicamente por cuatro componentes:

• La barra superior (con la cámara, la cadena Back4Gram, el icono de la casa, y el icono del avión de papel)
• La barra del historial (con los iconos de los historiales)
• Vista detallada de la línea de tiempo (con los mensajes actuales)
• Barra inferior (que reutilizaremos)

¡Empecemos a construirlas!

Barra superior

La barra superior está formada por cinco componentes:

• Botón de cámara
• Cadena Back4Gram
• Espaciador
• Botón Casa
• Botón Avión de papel

Añade los iconos para los botones como ya has aprendido, y empecemos a codificar.

Crea tu archivo HomeView.swift y añadamos un GeometryReader para que podamos redimensionar todo bien:

Y al igual que en el tutorial anterior, vamos a añadir un VStack porque todo se mostrará en un eje vertical:

Nuestra barra superior será una conjunción de componentes alineados horizontalmente, así que añadamos el HStack para crearla:

Y por último añadimos los controles que vamos a utilizar:

¿Qué te parece?

¡Vamos por buen camino!

Ahora hablemos un poco de la

Barra de Historia

La barra de historia es en sí misma un componente complejo. Es como un UIScrollView del viejo UIKit, pero dentro de él, tenemos un control compuesto por una imagen y un texto debajo de ella (también conocido como VStack). Vamos a crear esa estructura:

Poner eso en nuestro VStack principal es tan fácil como añadir el ScrollView. Y para hacerlo más bonito, hagamos que sólo se desplace horizontalmente y ocultemos los indicadores de desplazamiento:

y finalmente añadámoslo a nuestro VStack principal:

Comprobando el aspecto:

Ahora, avancemos y agreguemos primero nuestra…

Barra inferior

Ahora disfrutemos de toda esa reusabilidad. Simplemente añadámosla desde nuestro archivo BottomBar.swift a nuestro código:

Y nuestro código completo

¿No ha sido fácil? ¿Cómo se ve?

¡Genial!

Añadiendo algo de complejidad

Nuestra parte más compleja de esta Vista será la Vista Detallada de la Línea de Tiempo.

Para mantener la coherencia con lo que hicimos en nuestra TimelineView, vamos a crear un nuevo archivo llamado TimlineDetailView.swift y allí crear una nueva estructura que contendrá los datos al igual que en nuestra TimelineView.

Recuerda que ya tenemos nuestra estructura Preview declarada en nuestra TimelineView, así que vamos a reutilizarla también.

La Struct recibirá una Preview para que podamos recuperar la imageUrl más tarde:

Y con eso hecho, vamos a añadir la vista en sí:

El contenido principal también estará en un VStack:

Y ese VStack tendrá cuatro componentes:

• Un HStack con el logo, los textos y el botón de los tres puntos
• La imagen del post
• Un Hstack con el botón del corazón, el botón de comentarios, el botón del avión de papel y el botón de la bandera
• Una VStack con los textos “Me gusta por..” y “Ver todos los comentarios””

Empecemos por añadir la primera HStack:

Y añadiendo los controles dentro de ella:

Luego la Imagen:

Nuestro segundo HStack con todos los botones:

Y sus controles:

Y por último nuestros textos VStack:

Ahora, dentro de nuestro TimelineDetailView, vamos a hardcode algunos Previews:

Y finalmente añadimos nuestras PreviewDetailViews a una ScrollView:

Por último, vamos a añadir que a nuestra HomeView:

Finalmente, veamos los resultados:

¡Qué guay!

Conclusión

La reutilización es clave en SwiftUI.

Hoy has aprendido a reutilizar el BottomView y el Preview struct de nuestros artículos anteriores.

Es hora de algo de funcionalidad y apenas puedo esperar para ello.

¡Permanece atento!

Referencia

• Parte 1 de esta serie es Instagram Clone App.
• Parte 2 es Swift Instagram Clone.
• Parte 3 es Instagram Perfil.
• Parte 4 es Instagram Homeview.
• Descarga un proyecto iOS Instagram Clone con el código fuente y empieza a usar Back4App.

Regístrate ahora a Back4App y empezar a construir su Instagram Clone App.