¿Cómo crear una app en SwiftUI para dibujar en las Vision PRO de Apple?

Hoy en SwiftBeta vamos a crear una app muy sencilla para poder dibujar rápidamente usando las Vision PRO. Vamos a ver varios puntos interesantes, cómo:

• SwiftUI y Xcode 15, aquí usaremos varias vistas que hemos visto en el canal como ColorPicker para poder seleccionar el color de la línea que queremos trazar, o un Slider para poder seleccionar el grosor de la línea. Vas a ver qué fácil es. También aprenderemos a usar sheet para navegar de una vista a otra. Lo bueno del video de hoy es que lo he simplificado al máximo y solo tocaremos una vista.
• Pero, ¿cómo se posible? He creado un repositorio con la lógica principal para poder dibujar líneas. No te preocupes que usaremos Swift Package Manager para instalar esta dependencia que puedes encontrar en mi repositorio de Github. Esto lo vimos también en el video donde aprendemos a crear nuestra primera app desde el iPad, que hacemos una app para poder dibujar (si tienes curiosidad te dejo el video por aquí arriba)

Va a ser un video muy completo, y muy sencillo. La idea es ver hasta donde podemos llegar al crear aplicaciones para las Vision PRO y como ejemplo, puede ser interesante crear una app de dibujo.

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 que vamos hacer es crear nuestro proyecto en Xcode 15. Aquí muy importante, seleccionamos Multiplatform, visionOS y en Application App.

Y le asignamos el nombre de SwiftBetaPaint. Más abajo escogemos como Initial Scene Window, y como Immersive Space None.

Una vez seleccionados estos valores, ya podemos crear el proyecto. En mi caso lo voy a crear en el escritorio.

Instalar dependencia con Swift Package Manager

Lo siguiente que vamos hacer es añadir una dependencia con Swift Package Manager, esta dependencia tiene la implementación de cómo poder dibujar dentro de una vista en SwiftUI, es por eso que para simplificar el video, toda la parte complicada te la estoy añadiendo en esta pequeña librería, y verás lo fácil que es.
Para añadir la dependencia nos vamos al proyecto SwiftBetaPaint, y allí escogemos la opción de Package Dependencies. Le damos al + y añadimos la siguiente dependencia https://github.com/SwiftBeta/HelpersPaintVisionOS

Esta dependencia la he creado especialmente para este video, y si quieres saber su contenido, tan solo debe checkear el repositorio o esperar a tenerla añadida al proyecto. Así puedes ver de un simple vistazo todo el código que contiene.

Una vez instalada, vemos que aparece una nueva sección, esto nos indica que se ha instalado correctamente. Lo siguiente que vamos hacer es movernos a ContentView.

Añadimos ContentView

Ahora, lo primero es importar la dependencia a nuestra vista

import HelpersPaintVisionOS

El siguiente paso que vamos hacer es crear la vista ornament. Esta es una nueva vista que podemos usar en las Vision PRO:

.ornament(attachmentAnchor: .scene(alignment: .bottom), contentAlignment: .center) {
    VStack {
        Text("¡Suscríbete a SwiftBeta en Youtube! 🚀")
    }
    .frame(width: 400, height: 60)
    .glassBackgroundEffect(in: .rect(cornerRadius: 10))
}

Como resultado podemos ver en el canvas la vista que aparece en la parte inferior de nuestra window "Suscríbete a SwiftBeta en Youtube! 🚀"

Lo siguiente que vamos hacer es borrar todo el NavigationSplitView, ya que lo vamos a sustituir por un NavigationStack

NavigationStack {
    
}

Y justo dentro del NavigationStack añadimos una de las vistas que vienen implementadas en la dependencia que has instalado con Swift Package Manager. La vista se llama SwiftBetaCanvas. Vamos a añadirla dentro de unVStack:

NavigationStack {
    VStack {
        SwiftBetaCanvas(canvasConfiguration: <#T##CanvasConfiguration#>)
    }
}

Al intentar usar la vista, vemos que tiene un parámetro de entrada del tipo CanvasConfiguration. Este tipo sirve para poder customizar el color de las líneas que dibujemos, el groso de las lineas, etc. Vamos a crear una propiedad @State y creamos una instancia de este tipo. Y literal, ya podremos dibujas en nuestra app. Vamos a crear esta propiedad:

@StateObject var canvasConfiguration = CanvasConfiguration()

Una vez hemos creado la propiedad, la podemos pasar como parámetro a la vista SwiftBetaCanvas.

Ahora, ya podemos ir al Canvas y empezar a dibujar. Pero, qué ocurre si quiero cambiar de color? o si quiero deshacer mi último paso? o si quiero cambiar el grosor de la línea? vamos a añadir estas pequeñas funcionalidades.

ColorPicker en SwiftUI

Lo primero que vamos hacer es poder cambiar de color. Para hacerlo vamos a añadir un ColorPicker en la parte inferior de nuestra vista.

HStack {
    ColorPicker("Selecciona un color",
                selection: $canvasConfiguration.currentLineColor)
}.frame(width: 240)

Muy sencillo, Color Picker espera un texto, para poder dar más contexto al User, en este caso indicamos que Seleccione un color, y también le pasamos un parámetro llamado currentLineColor que es una de las propiedades de canvasConfiguration.
Fíjate que al añadir el ColorPicker, aparece justo detrás de la vista ornament. Vamos a añadir un HStack con un poco de padding para solucionarlo:

HStack {
    HStack {
        ColorPicker("Selecciona un color",
                    selection: $canvasConfiguration.currentLineColor)
    }.frame(width: 240)
}
.padding(32)

Ya lo tenemos! si ahora seleccionamos un color, y dibujamos una nueva línea, vemos como aparece con el color que hemos seleccionado.

Borrar todo el Canvas

Lo siguiente que vamos hacer es crear otro Button para poder borrar todo el contenido de nuestro dibujo. De esta manera podemos empezar de 0 muy rápidamente.

HStack {
    Button(action: {
        canvasConfiguration.removeAll()
    }, label: {
        Image(systemName: "trash")
    })
    ...
}

Añadimos este Button antes de seleccionar el ColorPicker. Aquí lo que estamos haciendo es llamar a un método que se llama removeAll del canvasConfiguration. Este método lo único que hace es iterar sobre todas las líenas del canvas, de nuestro dibujo y eliminarlas.

Si lo probamos en el Canvas, podemos ver que al dibujar cualquier figura que requira de varios trazados, se eliminan por completo.

Muy bien, vamos a continuar, ahora imagina que no quieres borrar todo el Dibujo, sino que quieres deshacer solo el último cambio.

Deshacer último cambio

Para poder deshacer el último cambio que hemos hecho, vamos a crear otro Button. Lo vamos a añadir entre el Button de eliminar todo el dibujo y el ColorPicker:

Button(action: {
    if !canvasConfiguration.lines.isEmpty {
        canvasConfiguration.lines.removeLast()
    }
}, label: {
    Image(systemName: "arrow.counterclockwise")
})

Si probamos esta nueva funcionalidad en el Canvas, vemos que solo deshace el último cambio.

Slider en SwiftUI (Aumentamos grosor de las líneas)

Y para finalizar, vamos a navegar a una vista para poder cambiar el grosor de nuestras líneas. Para hacerlo, vamos a crear una nueva propiedad @State en ContentView, será un Booleano y nos servirá para lanzar la acción de mostrar una nueva vista. Esta nueva vista solo tendrá un Slider y un Text. Vamos a verlo paso a paso:

@State var showSlider: Bool = false

Al crear la propiedad, ahora vamos a usar el ViewModifier toolbar para añadir un Button que lance la acción de mostrar la nueva pantalla. Y lo añadimos justo en nuestro primer VStack

VStack {
    SwiftBetaCanvas(canvasConfiguration: canvasConfiguration)
}
.toolbar {
    Button("Slider") {
        showSlider.toggle()
    }
}

Una vez hecho este paso, ahora usamos el ViewModifier sheet para poder realizar la navegación y especificar la vista que queremos mostrar:

.sheet(isPresented: $showSlider, content: {
    VStack {
        Text("Selecciona el ancho de la línea")
        Slider(value: $canvasConfiguration.currentLineWidth,
               in: 0...50,
               step: 1)
        Text("Tamaño: \(Int(canvasConfiguration.currentLineWidth))")
            .font(.extraLargeTitle)
        Button("Dismiss") {
            showSlider.toggle()
        }
    }
    .padding(32)
    .frame(width: 500, height: 300)
})

Ahora desde el Canvas, cada vez que pulsemos al Button Slider, aparecerá una nueva pantalla donde podremos seleccionar el nuevo tamaño de las líneas de nuestro dibujo. Al seleccionar el nuevo tamaño, se ve reflejado en el Text. Si le damos al button de Dismiss, y volvemos a nuestro Dibujo, vemos como el tamaño de las líneas se ha incrementado.

Conclusión

Hoy en SwiftBeta hemos creado otro tutorial de cómo empezar a crear apps sencillas para las Vision PRO.

Y hasta aquí el video de hoy!