Magnification Gesture en SwiftUI en Español

Aprende a usar los gestos en SwiftUI

Hoy en SwiftBeta vamos a aprender a cómo ampliar vistas en SwiftUI. Vamos a ver lo que vimos con el TapGesture o el DragGesture, pero en este caso usaremos MagnificationGesture (y en este caso se utilizan dos dedos para escalar la vista).

MagnificationGesture en código

Lo primero de todo que vamos hacer es crear un proyecto de cero. Y crearemos un VStack con un Text dentro y unos cuántos modificadores, la vista quedaría de la siguiente manera:

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                Text("¡Suscríbete a SwiftBeta!")
                    .bold()
                    .padding()
                    .foregroundColor(.white)
                    .frame(width: 360, height: 100)
                    .background(Color.red)
                    .cornerRadius(20)
            }
            .navigationTitle("Rotation Gesture")
        }
    }
}

Vista en SwiftUI

Hasta aquí nada nuevo, ahora lo que vamos hacer es añadir un modificador llamado scaleEffect y este modificador espera un parámetro. Vamos a crear una propiedad @State llamada scale de tipo CGFloat.
A continuación, usamos el modificador .gesture y dentro de él creamos una instancia de MagnificationGesture, el código quedaría de la siguiente manera:

import SwiftUI

struct ContentView: View {
    @State var scale: CGFloat = 1.0
    
    var body: some View {
        NavigationView {
            VStack {
                Text("¡Suscríbete a SwiftBeta!")
                    .bold()
                    .padding()
                    .foregroundColor(.white)
                    .frame(width: 360, height: 300)
                    .background(Color.blue)
                    .cornerRadius(20)
                    .scaleEffect(scale)
                    .gesture(
                        MagnificationGesture()
                            .onChanged({ value in
                                scale = value
                            })
                    )
            }
            .navigationTitle("Magnification Gesture")
        }
    }
}

Añadimos el modificador .gesture con una instancia de MagnificationGesture

Si ahora nos vamos al canvas y le damos al Live Preview, podemos ver que al pulsar la tecla option encima de nuestra vista aparecen dos circulos, representando la posición de los dedos en un device real. Ahora si movemos el ratón (manteniendo la tecla option) vemos como nuestra vista se hace más pequeña o más grande dependiendo de la dirección en la que nos movamos.

Un pequeño cambio que podríamos hacer, es que al soltar nuestro gesto, hubiera una pequeña animación, podríamos hacer lo siguiente:

import SwiftUI

struct ContentView: View {
    @State var scale: CGFloat = 1.0
    
    var body: some View {
        NavigationView {
            VStack {
                Text("¡Suscríbete a SwiftBeta!")
                    .bold()
                    .padding()
                    .foregroundColor(.white)
                    .frame(width: 360, height: 300)
                    .background(Color.blue)
                    .cornerRadius(20)
                    .scaleEffect(scale)
                    .gesture(
                        MagnificationGesture()
                            .onChanged({ value in
                                scale = value
                            })
                            .onEnded({ _ in
                                withAnimation {
                                    scale = 1.0
                                }
                            })
                    )
            }
            .navigationTitle("Magnification Gesture")
        }
    }
}

Añadimos modificadores a MagnificationGesture y una animación

¿Queda bien verdad? solo hemos tenido que añadir el modificador onEnded y dentro de él hemos asignado a la propiedad scale el valor inicial, que era 1.0. Al asignale ese valor, lo hemos hecho dentro de withAnimation que es el que hace toda la magia por nosotros.

Conclusión

Hemos visto lo simple que es escalar nuestras vistas en SWIFTUI, solo hemos usado el modificador scaleEffect y una instancia MagnificationGesture.