Gestos en SwiftUI: tap, drag y long press

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:51

Gestos en SwiftUI: tap, drag y long press

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 15 de 23

Clase 15 / 23

Recursos

Aprender a manejar gestos en SwiftUI te permite transformar una pantalla estática en una experiencia interactiva. Los gestos son la forma en que SwiftUI interpreta las interacciones físicas del usuario, como un toque, doble toque o arrastrar el dedo, y se aplican mediante modifiers sobre cualquier vista.

¿Cómo detectar un toque con onTapGesture?

El gesto más básico es onTapGesture, que ejecuta un bloque de código cuando el usuario toca una vista. Para probarlo, puedes crear una figura simple como un Circle y combinarlo con una variable de estado de tipo Color que inicie en negro y se aplique mediante foregroundStyle.

Dentro del bloque de onTapGesture cambias el valor de esa variable a rojo, y al presionar el círculo en pantalla, el color se actualiza al instante. Aquí entra en juego el concepto de state: SwiftUI redibuja la vista automáticamente cuando una variable marcada con @State cambia.

¿Cómo hago que un tap solo funcione con doble toque? Pasa el parámetro count: 2 dentro de onTapGesture. Así el bloque de código solo se ejecuta cuando el usuario toca dos veces seguidas.

¿Qué pasa si quiero detectar una pulsación larga?

Para las pulsaciones sostenidas existe onLongPressGesture. Funciona igual que el tap: recibe un bloque de código que se dispara cuando SwiftUI detecta que el usuario mantiene presionada la vista. En la práctica de la clase, ese gesto cambia el color del círculo a azul.

Lo interesante es que puedes ajustar cuánto tiempo debe durar la presión usando el atributo minimumDuration. Si le asignas un valor de tres segundos, el usuario tendrá que mantener el dedo presionado ese lapso exacto antes de que se ejecute la acción.

¿Cómo mover una vista con DragGesture en SwiftUI?

El gesto de arrastre es un poco más elaborado porque combina detección de movimiento con cambios de posición en pantalla. Se aplica con el modifier gesture, al que le pasas un DragGesture() seguido de su método onChanged, que entrega un value con la información del arrastre en tiempo real.

Para que el círculo realmente se mueva, necesitas tres piezas trabajando juntas:

Una variable de estado offset de tipo CGSize, inicializada en cero, que representa un punto en pantalla.
Dentro de onChanged, asignas el valor de la traslación del gesto a esa variable de estado.
Aplicas el modifier offset al círculo, pasándole el CGSize que acabas de actualizar.

Con esa conexión, cada vez que arrastras el dedo, el value del DragGesture actualiza el offset, SwiftUI redibuja la vista y el círculo sigue tu movimiento de forma fluida.

¿Qué es CGSize y por qué lo uso aquí? CGSize es una estructura que representa un ancho y un alto, y en este caso se usa para describir el desplazamiento del círculo respecto a su posición original.

¿Por qué los gestos requieren paréntesis y no llaves?

Un detalle técnico fácil de pasar por alto: cuando agregas un DragGesture dentro del modifier gesture, debes abrir paréntesis, no llaves. Las llaves son para closures como el onChanged, que sí recibe un bloque con value in. Confundir esa sintaxis es uno de los errores más comunes al empezar.

¿Qué gestos vale la pena dominar primero?

Si estás empezando con SwiftUI, estos son los tres gestos base que cubren la mayoría de interacciones:

onTapGesture para toques simples o múltiples con el parámetro count.
onLongPressGesture con minimumDuration para acciones que requieren intención.
DragGesture combinado con @State y offset para mover elementos en pantalla.

Dominar estos tres te da una base sólida para luego explorar gestos más complejos como magnification, rotation o combinaciones simultáneas. La clave está en entender que cada gesto es un modifier que reacciona a un evento y modifica el estado de tu vista.

¿Qué interacción vas a construir primero en tu app? Cuéntame en los comentarios cómo piensas usar estos gestos para mejorar la experiencia de tus usuarios.

Resumen

¿Cómo detectar un toque con onTapGesture?

¿Cómo hago que un tap solo funcione con doble toque? Pasa el parámetro count: 2 dentro de onTapGesture. Así el bloque de código solo se ejecuta cuando el usuario toca dos veces seguidas.

¿Qué pasa si quiero detectar una pulsación larga?

¿Cómo mover una vista con DragGesture en SwiftUI?

Para que el círculo realmente se mueva, necesitas tres piezas trabajando juntas:

Una variable de estado offset de tipo CGSize, inicializada en cero, que representa un punto en pantalla.
Dentro de onChanged, asignas el valor de la traslación del gesto a esa variable de estado.
Aplicas el modifier offset al círculo, pasándole el CGSize que acabas de actualizar.

Con esa conexión, cada vez que arrastras el dedo, el value del DragGesture actualiza el offset, SwiftUI redibuja la vista y el círculo sigue tu movimiento de forma fluida.

¿Qué es CGSize y por qué lo uso aquí? CGSize es una estructura que representa un ancho y un alto, y en este caso se usa para describir el desplazamiento del círculo respecto a su posición original.

¿Por qué los gestos requieren paréntesis y no llaves?

¿Qué gestos vale la pena dominar primero?

Si estás empezando con SwiftUI, estos son los tres gestos base que cubren la mayoría de interacciones:

onTapGesture para toques simples o múltiples con el parámetro count.
onLongPressGesture con minimumDuration para acciones que requieren intención.
DragGesture combinado con @State y offset para mover elementos en pantalla.

¿Qué interacción vas a construir primero en tu app? Cuéntame en los comentarios cómo piensas usar estos gestos para mejorar la experiencia de tus usuarios.

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Gestos en SwiftUI: tap, drag y long press

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos