Más Allá de la Pantalla: Vibración Háptica en Swift y SwiftUI

Hoy en SwiftBeta vamos a aprender a crear vibraciones programáticamente dentro de nuestra app. Pero ¿por qué? ¿qué tienen de interesante? nos permiten transmitir más allá de lo visual o auditivo a los usuarios que usen nuestra aplicación, nos permiten mejorar la experiencia de los usuarios, dándoles feedback cuando algo importante ocurre dentro de tu aplicación, por ejemplo una vibración cuando añaden un producto al carrito de compra, o cuando dan al Button de comprar, o a un like de un producto, etc hay diferentes casos de uso que pueden encajar dentro de tu app.

En Swift podemos crear estas vibraciones e integrarla para que al pulsar un Button, nuestro dispositivo vibre. El video de hoy va a ser muy sencillo, pero vamos a aprender a crear este tipo de vibraciones para hacer de nuestra app algo único. Vamos a ver 2 tipos diferentes:

• UINotificationFeedbackGenerator, aquí veremos que tenemos 3 estados posibles success, warning y error.
• UIImpactFeedbackGenerator, este tipo de feedback tiene un contexto diferente, está más relacionado a impactos físicos que pueden ocurrir dentro de tu app, o un juego. Hay también varios estados posibles: heavy, light, medium, etc

Antes de continuar, si quieres apoyar el contenido que subo cada semana, suscríbete. De esta manera seguiré publicando contenido completamente grautito en Youtube.

Creamos el proyecto en Xcode

Lo primero de todo, vamos a crear el proyecto en Xcode. En mi caso voy a usar la beta de Xcode 15, creamos el proyecto y nos aseguramos que en Interface esté seleccionado SwiftUI.

Una vez creado el proyecto lo siguiente que vamos hacer es crear un ViewModel, dentro de este nuevo fichero vamos a crear toda la lógica (en realidad vas a ver que solo crearemos 2 métodos, uno para UINotificationFeedbackGenerator y UIImpactFeedbackGenerator). Así que pulsamos COMMAND+N, le damos el nombre de ViewModel.

Para poder usar estas clases, primero debemos importar el framework que tiene su implementación. Este framework se llama UIKit.

import UIKit

ViewModel con patrón singleton en Swift

Ahora creamos el ViewModel, vamos a crear el patrón singleton. De esta manera durante todo el ciclo de ejecución de nuestra aplicación, solo crearemos una instancia de ViewModel.

import Foundation
import UIKit

class ViewModel {
    let shared: ViewModel = ViewModel()
    
    private init() { }
}

UINotificationFeedbackGenerator

lo siguiente que vamos hacer, es crear un método llamado vibrate que va a crear una instancia de UINotificationFeedbackGenerator

class ViewModel {
    static let shared: ViewModel = ViewModel()
    
    private init() { }
    
    func vibrate(type: UINotificationFeedbackGenerator.FeedbackType) {
        let feedbackGenerator = UINotificationFeedbackGenerator()
        feedbackGenerator.notificationOccurred(type)
    }
}

Al crear la instancia de feedbackGenerator, para lanzar la vibración, debemos usar el método notificationOcurred con un tipo que le pasaremos desde la vista.

En este paso, puedes investigar y clickar COMMAND+CLICK en la class UINotificationFeedbackGenerator para aprender un poco más de este tipo.

Una vez hemos implementado el método vibrate, volvemos a la vista y creamos un Button que se encargará de llamar al método vibrate.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("UINotificationFeedbackGenerator")
                .bold()
            HStack {
                Button("Vibrate\n Success") {
                    ViewModel.shared.vibrate(type: .success)
                }
                .buttonStyle(.bordered)
                .tint(.green)
            }
        }
        .padding()
    }
}

En este caso, antes de probar nuestro código en un device real, vamos a crear 2 Buttons más, uno para el warning y el otro para el error:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("UINotificationFeedbackGenerator")
                .bold()
            HStack {
                Button("Vibrate\n Success") {
                    ViewModel.shared.vibrate(type: .success)
                }
                .buttonStyle(.bordered)
                .tint(.green)
                Button("Vibrate\n Warning") {
                    ViewModel.shared.vibrate(type: .warning)
                }
                .buttonStyle(.bordered)
                .tint(.yellow)
                Button("Vibrate\n Error") {
                    ViewModel.shared.vibrate(type: .error)
                }
                .buttonStyle(.bordered)
                .tint(.red)
            }
        }
        .padding()
    }
}

Y ahora vamos a compilar para probar nuestro código en un device real. En mi caso estoy usando Xcode 15 beta, y mi el sistema operativo de mi iPhone es iOS 17, la beta también. Pero podéis probar con Xcode 14 y iOS 16 o incluso versiones inferiores.

Al compilar vemos que si pulsamos en los diferentes Buttons, la sensación háptica es diferente. Acabamos de aprender a hacer vibrar nuestra app cuando el user interactua con algún elemento de nuestra UI, en este caso un Button.

Ahora vamos a probar el UIImpactFeedbackGenerator

UIImpactFeedbackGenerator

Vas a ver que vamos a seguir los mismos pasos para crear este feedback generator. Volvemos a nuestro ViewModel y creamos un nuevo método, lo vamos a llamar impact.

func impact(style: UIImpactFeedbackGenerator.FeedbackStyle) {
    let feedbackGenerator = UIImpactFeedbackGenerator(style: style)
    feedbackGenerator.impactOccurred()
}

Ahora volvemos a ContentView y vamos a crear otra sección para lanzar esta vibración causada por el UIImpactFeedbackGenerator, voy a poner el modo rápido:

.padding(.bottom, 32)
Text("UIImpactFeedbackGenerator")
    .bold()
HStack {
    Button("Light") {
        ViewModel.shared.impact(style: .light)
    }
    .buttonStyle(.bordered)
    .tint(.green)
    Button("Medium") {
        ViewModel.shared.impact(style: .medium)
    }
    .buttonStyle(.bordered)
    .tint(.yellow)
    Button("Heavy") {
        ViewModel.shared.impact(style: .heavy)
    }
    .buttonStyle(.bordered)
    .tint(.red)
}

Si ahora volvemos a compilar nuestra aplicación, podemos comprobar que al pulsar en uno de los nuevos Buttons, también tenemos una vibración, pero esta vez diferente.

Conclusión

Hoy hemos aprendido a cómo crear vibraciones hápticas dentro de nuestra aplicación. Literalmente con Swift podemos crear una vibración con tan solo 2 líneas de código. Hemos aprendido que hay varias maneras, una de ellas es usar el UINotificationFeedbackGenerator, y otra es usando el UIImpactFeedbackGenerator.