Instagram es una de las aplicaciones más populares en el mundo, con una interfaz de usuario que es tanto simple como efectiva. Reproducir esta interfaz en SwiftUI no solo nos permitirá aprender a manejar componentes como vistas de navegación y listas horizontales, sino también a estructurar nuestra app con una barra de pestañas. Este proyecto no te llevará más de 10 minutos replicar y te proporcionará ideas sobre cómo y dónde implementar estos componentes en tus propios desarrollos.
Configurando nuestra estructura básica en SwiftUI
Lo primero que necesitamos es una vista principal (InstagramHomeView) que contendrá todos los componentes de nuestra interfaz.
import SwiftUI
struct InstagramHomeView: View {
var body: some View {
NavigationView {
VStack(spacing: 0) {
// Aquí añadiremos nuestros componentes en los próximos pasos.
}
.navigationBarHidden(true)
}
}
}
Usamos un NavigationView para manejar la navegación dentro de la app y un VStack que nos permite apilar vistas de manera vertical.
Creando el Header
El siguiente paso es crear el encabezado de nuestra aplicación, donde colocaremos el título “Instagram” a la izquierda y los íconos de corazón y mensaje a la derecha.
struct HeaderView: View {
var body: some View {
HStack {
Text("Instagram")
.font(.largeTitle)
.fontWeight(.bold)
.padding(.leading)
Spacer()
HStack(spacing: 20) {
Image(systemName: "heart")
Image(systemName: "paperplane")
}
.padding(.trailing)
}
.padding(.vertical, 10)
}
}
HStack organiza los elementos de manera horizontal y el Spacer entre el título y los íconos asegura que el título quede a la izquierda y los íconos a la derecha.
Ahora, agreguemos esta vista a nuestra estructura principal:
struct InstagramHomeView: View {
var body: some View {
NavigationView {
VStack(spacing: 0) {
HeaderView() // Nuestro Header previamente creado
}
.navigationBarHidden(true)
}
}
}
Vista Previa:
Sección de Historias
El siguiente componente a crear es la sección de historias, que se desplaza horizontalmente y muestra una serie de imágenes circulares representando las historias de los usuarios.
struct StoriesView: View {
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
ForEach(0..<10) { _ in
VStack {
Circle()
.frame(width: 70, height: 70)
.overlay(
Circle().stroke(Color.red, lineWidth: 2)
)
Text("username")
.font(.caption)
}
}
}
.padding(.horizontal)
}
}
}
Usamos un ScrollView horizontal para que las historias se puedan desplazar lateralmente y los círculos con bordes resaltados simulan las imágenes de perfil con historias activas.
Agreguemos esta sección debajo del encabezado en nuestra vista principal:
struct InstagramHomeView: View {
var body: some View {
NavigationView {
VStack(spacing: 0) {
HeaderView()
StoriesView()
.padding(.vertical, 8) // Nuestra sección de historias previamente creada
}
.navigationBarHidden(true)
}
}
}
Vista Previa:
Feed de Publicaciones
Ahora que tenemos las historias, es momento de agregar el feed de publicaciones. Cada publicación tiene una estructura similar: una imagen de perfil, un nombre de usuario, la imagen de la publicación y los íconos de interacción.
struct InstagramPostView: View {
var body: some View {
VStack(alignment: .leading) {
HStack {
Image(systemName: "person.crop.circle")
.resizable()
.frame(width: 40, height: 40)
Text("username")
.font(.headline)
Spacer()
Image(systemName: "ellipsis")
}
.padding(.horizontal)
Image("postImage")
.resizable()
.aspectRatio(contentMode: .fit)
HStack {
Image(systemName: "heart")
Image(systemName: "bubble.right")
Image(systemName: "paperplane")
Spacer()
Image(systemName: "bookmark")
}
.padding(.horizontal)
.padding(.vertical, 8)
Text("Liked by user1, user2 and others")
.font(.subheadline)
.padding(.horizontal)
Text("username A simple caption for this post...")
.font(.subheadline)
.padding(.horizontal)
}
}
}
Utilizamos VStack y HStack para organizar los elementos vertical y horizontalmente dentro de cada publicación.
Las imágenes y textos se alinean cuidadosamente para simular el aspecto de una publicación de Instagram.
Finalmente, añadamos el feed de publicaciones en nuestra vista principal:
struct InstagramHomeView: View {
var body: some View {
NavigationView {
VStack(spacing: 0) {
HeaderView()
StoriesView()
.padding(.vertical, 8)
ScrollView {
ForEach(0..<10) { _ in
InstagramPostView()
.padding(.bottom, 16)
}
}
}
.navigationBarHidden(true)
}
}
}
El ScrollView se agregó en esta sección para permitir que el contenido de la pantalla, en este caso el feed de publicaciones, sea desplazable verticalmente. Dado que las aplicaciones como Instagram tienen un flujo constante de contenido que el usuario puede explorar, el ScrollView es esencial para manejar listas largas de publicaciones.
Vista Previa:
Barra de Pestañas
Para finalizar la interfaz, agregaremos una barra de pestañas en la parte inferior. Esta barra permitirá la navegación entre diferentes secciones de la aplicación.
struct TabBarView: View {
var body: some View {
HStack {
Spacer()
Image(systemName: "house.fill")
Spacer()
Image(systemName: "magnifyingglass")
Spacer()
Image(systemName: "plus.app.fill")
Spacer()
Image(systemName: "heart")
Spacer()
Image(systemName: "person.crop.circle")
Spacer()
}
.padding()
.background(Color.white.shadow(radius: 2))
}
}
El HStack con Spacer distribuye uniformemente los íconos a lo largo de la barra de pestañas y la sombra agrega un toque de profundidad a la barra, haciendo que se vea más realista.
Finalmente, agreguemos la barra de pestañas a nuestra vista principal
struct InstagramHomeView: View {
var body: some View {
NavigationView {
VStack(spacing: 0) {
HeaderView()
StoriesView()
.padding(.vertical, 8)
ScrollView {
ForEach(0..<10) { _ in
InstagramPostView()
.padding(.bottom, 16)
}
}
TabBarView()
}
.navigationBarHidden(true)
}
}
}
Vista Previa:
A través de este ejercicio, hemos visto cómo replicar una interfaz moderna como la de Instagram, desglosando cada componente y construyéndolo paso a paso. Realizar este tipo de proyectos no solo te permite comprender mejor el flujo de trabajo en SwiftUI, sino que también te ayuda a interiorizar conceptos clave de desarrollo de interfaces de manera práctica y efectiva.
