Cómo crear un carrusel en SwiftUI con efectos de desplazamiento

Vamos a construir un carrusel en SwiftUI, una forma elegante y fluida de mostrar contenido deslizable en la pantalla. Utilizaremos ScrollView y LazyHStack para lograr un desplazamiento eficiente, junto con un efecto de escala que hará que cada elemento cobre vida.

Implementarlo es más fácil de lo que parece. En este post, te guiaré paso a paso para que puedas crearlo desde cero. ¡Empecemos!

¿Qué vamos a construir?

En este tutorial, crearemos un carrusel en SwiftUI que funciona en iOS 17+. Usaremos ScrollView y LazyHStack para mostrar una serie de elementos desplazables de manera fluida.

Además, añadiremos un efecto de escala interactivo para que los elementos se reduzcan ligeramente cuando no están centrados, dándole un aspecto más dinámico y atractivo.

El resultado será un carrusel moderno, fácil de personalizar y con una experiencia visual mejorada. ¡Vamos a codificarlo!

El resultado debe verse como este

Explicando el código

Ahora que sabemos qué vamos a construir, veamos cómo funciona el código.

1. Variables de estado

@State private var horizontalPadding: CGFloat = 20
@State private var frameWidth: CGFloat = 248

• horizontalPadding: Define el espacio lateral para centrar el carrusel.
• frameWidth: Establece el ancho de cada elemento del carrusel.

2. Estructura principal

VStack {
    ScrollView(.horizontal) {

• Usamos VStack para organizar el contenido verticalmente.
• Dentro, ScrollView(.horizontal) nos permite desplazarnos horizontalmente.

3. Creación del carrusel

LazyHStack(spacing: 0) {
    ForEach(0..<10, id: \.self) { _ in

• LazyHStack(spacing: 0): Muestra los elementos en fila sin dejar espacio entre ellos.
• ForEach(0..<10, id: \.self): Genera 10 elementos de forma dinámica. Puede agregarse tantos como uno quiera.

Cada elemento del carrusel es una imagen con diseño simple:

Image(systemName: "globe")
    .frame(width: frameWidth, height: 480)
    .foregroundStyle(.gray)
    .font(.system(size: 80))
    .background(.gray.opacity(0.2))
    .clipShape(RoundedRectangle(cornerRadius: 16))

• Para este ejemplo usamos el sistema de iconos (systemName: "globe").
• Le damos un tamaño de 248x480 píxeles.
• Usa un fondo gris con esquinas redondeadas.

4. Efecto de transición

.scrollTransition(.interactive, axis: .horizontal) { effect, phase in
    effect.scaleEffect(phase.isIdentity ? 1.0 : 0.85)
}

Aquí es donde añadimos el efecto dinámico:

• Si el elemento está centrado (phase.isIdentity), se mantiene en su tamaño normal (scaleEffect(1.0)).
• Si no está centrado, se reduce al 85% de su tamaño (scaleEffect(0.85)).

5. Ajustes de alineación

.scrollTargetBehavior(.viewAligned)

• Hace que los elementos se alineen automáticamente al centro después de desplazarse.

.padding(.horizontal, self.horizontalPadding)

• Agrega espacio lateral para centrar el carrusel.

6. Ajuste dinámico del padding

.onAppear {
    self.horizontalPadding = (.screenWidth - frameWidth) / 2
}

• Cuando la vista aparece, calcula el horizontalPadding para centrar el primer elemento.
• .screenWidth representa el ancho de la pantalla (debes definirlo en una extensión).

Conclusión

Hemos creado un carrusel fluido, dinámico y visualmente atractivo con SwiftUI. Gracias a ScrollView, LazyHStack y scrollTransition, logramos una experiencia envolvente que simplemente se siente increíble.

Pero esto es solo el comienzo. Con este mismo enfoque, podemos llevar la experiencia aún más lejos: agregar imágenes personalizadas, transiciones suaves o incluso integrarlo con datos en tiempo real. Las posibilidades son ilimitadas.

Si quieres explorar un ejemplo un poco más elaborado, te invito a revisar este código en GitHub Gist.

SwiftUI nos da el poder de crear experiencias sorprendentes. Y esto es solo el principio.

Gracias por llegar hasta aquí. Ahora es tu turno. ¿Qué vas a construir? 🚀