Conoce el diseño espacial de SwiftUI

Te damos la a “Conoce el diseño espacial de SwiftUI”. Soy Trevor, ingeniero del equipo de SwiftUI. En esta sesión, exploraremos técnicas para crear experiencias espaciales increíbles con SwiftUI.

Estuve poniendo en práctica las nuevas capacidades de diseño espacial de SwiftUI, ampliando una app llamada BOT-anist.

La app te permite personalizar divertidos robots a partir de varios bloques, colores y materiales. Luego, podrás usar tus nuevos bots para cuidar tu propio jardín virtual. Me encanta crear estos pequeños robots y estuve trabajando en nuevas vistas para catalogar mis creaciones.

Ahora, no solo puedes personalizar robots, sino que también puedes guardarlos y coleccionarlos.

Te mostraré algunas nuevas escenas 3D para ver los robots. Creé todas estas experiencias con SwiftUI.

Si alguna vez creaste experiencias 3D en visionOS, seguro ya usaste RealityKit.

RealityKit es una gran estructura para crear apps 3D, en especial las que tienen comportamientos complejos, como simulaciones físicas.

Si vienes de un entorno de SwiftUI, podrás incorporar la sintaxis declarativa que ya conoces. Seguro no necesitarás toda la potencia de RealityKit en toda tu app. Ahora, en visionOS 26, puedes usar las herramientas e ideas de diseño 2D de SwiftUI para crear apps 3D.

El diseño de SwiftUI ofrece compatibilidad integrada para animaciones, ajustes de tamaño y administración de estados, por lo que, si elimino un bot del carrusel, SwiftUI puede animar las posiciones y los tamaños de los demás para tener más o menos espacio.

Al cambiar el tamaño del volumen, el carrusel y los robots se redimensionan de forma automática. Veamos las nuevas herramientas que usé para crear estos arreglos.

Estas extensiones 3D del sistema de diseño de SwiftUI se basan en conceptos de diseño 2D existentes.

Si no trabajaste con diseños de SwiftUI, consulta “Building custom views with SwiftUI” y “Compose custom layouts with SwiftUI” antes de avanzar. Aquí, veremos lo básico sobre vistas 3D de SwiftUI en visionOS, cómo personalizar diseños existentes con alineaciones de profundidad, rotation3DLayout, un nuevo modificador para rotar vistas en el sistema de diseño y SpatialContainer y spatialOverlay para alinear vistas en un espacio 3D.

Hablemos de las vistas y el sistema de diseño.

Para cada vista de tu app, SwiftUI calcula el ancho, la altura y la posición X e Y.

Algunas vistas, como las imágenes no ajustables, tienen un marco fijo del mismo tamaño del componente.

Algunas vistas, como esta Color, tienen marcos flexibles y ocupan todo el espacio que les brinda el contenedor.

Los diseños integran a sus subelementos en un marco final. El marco de esta VStack, que está en amarillo, está determinado por el espacio que hay para él y los subelementos que contiene. Aquí, la altura es la suma de las dos vistas de imagen del interior. visionOS se comporta igual, pero allí las vistas son 3D. El sistema de diseño tiene los mismos comportamientos, solo que aplicados a tres dimensiones, no a dos.

Para cada una de las vistas, además del ancho y la altura, SwiftUI también calcula la profundidad y la posición Z. Suelo usar el modificador border para visualizar marcos 2D en iOS.

Aquí creé mi propio modificador debugBorder3D para visualizar marcos 3D en visionOS. Te mostraré cómo creé este modificador al final del video, con algunas API que veremos mientras tanto.

debugBorder3D muestra que Model3D se comporta como una imagen, pero en tres dimensiones, y ocupa un ancho, una altura y una profundidad fijos. Todas las vistas son 3D, pero algunas tienen profundidad cero.

Muchas de las vistas con las que creas experiencias planas, como Image, Color y Text, tienen profundidad cero, es decir, se comportan igual que en iOS.

Algunas vistas tienen profundidad flexible, como Color, que ocupa todo el ancho y la altura disponibles que tenga por defecto. En visionOS, ciertas vistas, como RealityView, ocupan toda la profundidad disponible que tengan por defecto.

GeometryReader3D tiene el mismo comportamiento, así como Model3D, con el modificador resizable aplicado, que hizo que nuestro robot se estire para ajustarlo al ancho de la ventana. Pero luce un poco estirado en esta relación de aspecto. Quiero que recupere sus proporciones originales y que también se ajuste al espacio disponible.

Puedo usar el nuevo modificador, scaledToFit3D, además de resizable(), para que mi robot mantenga la relación de aspecto y ajuste su tamaño para adaptarse al ancho, la altura y la profundidad disponibles.

Pero ¿de dónde proviene esta profundidad disponible? Como el ancho y la altura, el contenido de Windows recibe una propuesta de profundidad raíz. El ancho y la altura pueden ajustarse pero esta propuesta es fija para Windows. Fuera de esta profundidad, el sistema puede recortar el contenido.

Un volumen propone un ancho, altura y profundidad a su contenido, pero en un volumen, la profundidad también es ajustable. Consulta “Designing for visionOS” en las Human Interface Guidelines para obtener más detalles de cuándo usar un volumen o una ventana.

Algunas vistas alteran estas propuestas de profundidad en vistas contenidas. Al igual que una VStack compone la altura de sus subvistas, ZStack compone las profundidades. La profundidad de esta ZStack es la necesaria para colocar ambos robots uno delante del otro.

Mientras que VStack puede proponer distintas alturas a sus subvistas según factores como el espacio disponible, la cantidad y el tipo de subelementos, ZStack puede proponer distintas profundidades a sus subelementos en función de los mismos factores. Aquí, RealityView lleva al robot hacia adelante en la ZStack, llenando toda la profundidad disponible en la escena.

Los tipos de Layout y Stack existentes son 3D en visionOS y usarán comportamientos predeterminados adecuados para la profundidad. Aquí, HStack recibirá una propuesta de profundidad de su contenedor y establecerá su propia profundidad para ajustarse a los modelos que contiene.

La HStack también alinea las espaldas de estos robots por defecto.

A este concepto lo llamamos alineación de profundidad. Es una nueva herramienta que deja personalizar los tipos de Layout SwiftUI existentes para que se adapten a las vistas 3D y la profundidad. Si trabajaste con alineaciones verticales u horizontales, estas te serán familiares. Quiero crear una nueva ventana volumétrica para mostrar mis robots favoritos con su nombre y descripción. Actualicemos el código del Model3D del robot para que sea más reusable.

Empiezo con un Model3D que se puede ajustar.

Lo refactorizo para usar el nuevo tipo Model3DAsset, que me permite precargar el modelo de mi robot. Todo esto lo incluyo en una nueva ResizableRobotView, que puedo usar en toda la app. También elimino el debugBorder3D por ahora.

Ahora crearé un RobotProfile con una VStack que contiene una ResizableRobotView y una RobotNameCard con algunos detalles sobre el bot.

Pero hay un problema.

Cuesta leer la tarjeta porque está en la parte posterior de la VStack y se pierde un poco detrás del modelo del robot.

En HStack puedes alinear el contenido en el borde central,

superior, o inferior, y aquí puedes definir cómo alinear vistas en el eje de profundidad en visionOS.

Por defecto, los tipos de Stack y Layout usan una alineación posterior. Ahora, en visionOS 26, puedes personalizar DepthAlignments en cualquier Layout.

Actualizaré el RobotProfile para usar VStackLayout.

Así puedo aplicar el modificador depthAlignment. Solicito la alineación .front.

También puedes usar las guías .center o .back.

Creo que la posición frontal es la mejor para que la tarjeta sea legible.

Nunca olvidaré a Zapper Ironheart y su amplio conocimiento de datos oscuros.

Las alineaciones frontal, posterior y central son una gran opción si deseas usar una de esas tres configuraciones estándar. Pero ¿y si necesitas algo más complejo que esos comportamientos?

Creé un volumen para mostrar mis tres robots favoritos con tres de estas vistas de perfil en una HStack. Greg-gear Mendel es mi robot favorito y quiero que destaque un poco más que los otros en esta vista.

Estaba pensando en una especie de podio de profundidad en el que cuanto más me guste un robot, más cerca estará de mí. Entonces el Robot 1 estará más cerca, luego el 2 y luego el 3.

Desde arriba, quiero que se vea como que la parte posterior del primer robot está alineada en profundidad con el centro del segundo robot y el frente del tercero. Necesitaré una alineación de profundidad personalizada para hacerlo.

Definiré una estructura que se ajuste al protocolo DepthAlignmentID.

Implemento el único requisito, el valor predeterminado de la alineación.

Uso la guía de alineación frontal como predeterminada para DepthPodiumAlignment.

Luego defino una constante estática en la alineación de profundidad que usa este nuevo tipo DepthAlignmentID.

Ahora puedo usar esta guía de depthPodium como alineación de profundidad en la HStack que contiene cada robot.

El frente de todos los robots quedará alineado y le dará el valor predeterminado especificado para esta guía.

Ahora personalizaré la guía de profundidad depthPodium del Robot 2 para alinear su centro con esta guía.

Modificaré el Robot 1 y alinearé su parte posterior con la guía depthPodium.

El Robot 3 seguirá usando la guía frontal como predeterminada para la alineación.

Así se ve en el simulador.

Con los bots en distintas profundidades, nadie dudará que Greg-gear Mendel es mi preferido.

Las alineaciones de profundidad son ideales para modificar la posición de profundidad en diseños existentes. Pero ¿qué sucede si quieres crear algo con aún más profundidad? El diseño de rotación es una gran herramienta para usos 3D más avanzados. Quizá ya conozcas el modificador rotation3DEffect, que aplica un efecto visual a una vista para que rote sobre un eje determinado. Es ideal para rotaciones básicas. Pero si colocamos nuestro modelo en una HStack con una tarjeta descriptiva al lado y rotamos el cohete 90° sobre el eje Z, choca con la tarjeta y empieza a salirse del volumen.

Si aplicamos esquemas de depuración antes y después del efecto de rotación, es un poco más fácil entender qué está pasando. El esquema rojo continuo rota debido al efecto, pero el azul discontinuo muestra dónde está la geometría del cohete según el sistema de diseño. La HStack se dimensiona y coloca su contenido con relación al marco azul. Pero no se alinean. Esto se debe a que los efectos visuales no afectan el diseño. Es decir, la HStack no reconoce la geometría rotada del cohete cuando se usa rotation3DEffect.

Esto aplica a todos los efectos visuales, incluidos scaleEffect

y offset. En todos estos casos, el sistema no ajustará el tamaño ni la ubicación de las vistas debido a estos modificadores. Esto es genial cuando quieres animar una vista sin afectar los marcos de otras que la rodean.

Pero ¿qué pasa si lo haces? ¿Cómo podemos arreglar este cohete rotado?

Buenas noticias. En visionOS 26, presentamos un nuevo modificador rotation3DLayout, que modifica el marco de una vista rotada en el sistema de diseño. Cuando lo aplico a mi modelo de cohete, la HStack puede ajustar su tamaño y ubicación para dar al cohete y a la tarjeta suficiente espacio.

rotation3DLayout admite rotaciones en cualquier ángulo y eje, por lo que puedo rotar mi cohete a 45° para que parezca como si estuviera despegando hacia el espacio.

Aplico un esquema de depuración antes y después de rotation3DLayout. Esto muestra el marco rotado del cohete en rojo. El esquema azul muestra el marco de la vista modificada en el sistema de diseño. Observa que el cuadro delimitador azul se alinea con el eje del contenedor y se ajusta al marco rotado rojo.

Ahora veamos cómo podemos usar rotation3DLayout para crear el carrusel de robots que te mostré al inicio del video.

Empezaré tomando prestado el RadialLayout de “Compose custom layouts with SwiftUI”.

Este tipo de Layout personalizado coloca las vistas en un círculo con la circunferencia definida por el ancho y la altura disponibles.

MyRadialLayout se creó en un principio para colocar vistas 2D en iOS, pero funciona muy bien en visionOS.

Incluso si queremos colocar modelos 3D de robots y no imágenes 2D de mascotas, podemos colocar los modelos 3D en este diseño personalizado con ForEach.

Se ve bien, pero sigue siendo una experiencia vertical. Quiero que mis robots tenga una orientación horizontal en el volumen.

Aplicaré un rotation3DLayout al diseño radial rotando la vista 90° sobre el eje X. Lo que antes era la altura del carrusel ahora definirá la profundidad de la vista rotada en el sistema de diseño. Mi carrusel está bien orientado ahora, pero mis robots están acostados, durmiendo en el trabajo.

Para pararlos, podemos rotar cada robot en sentido contrario en el ForEach con otro rotation3DEffect de -90° sobre el eje X. Estos robots somnolientos ahora están en posición de atención. Solo queda una cosa por arreglar. El carrusel está alineado al centro dentro de la altura del volumen. Me gustaría que quede al ras de la placa base del volumen.

Esto es más fácil de notar si aplicamos un debugBorder3D a todo el carrusel.

Puedo usar la misma estrategia que usaría para un diseño 2D. Quiero llevar el carrusel hacia abajo en una VStack con un Spacer encima. Mis robots ahora se ven geniales en la parte inferior del volumen. Hablemos las herramientas de diseño 3D SpatialContainer y spatialOverlay. Hay algo más que me gustaría agregar al carrusel de robots. Con un toque, el robot se debería seleccionar y mostrar un menú de controles y un anillo en la parte inferior para indicar que está seleccionado. El anillo también está representado como un Model3D. Quiero que el anillo ocupe el mismo espacio 3D que el robot. No que se apilen sobre un eje. Necesito una herramienta que ubique a los modelos en el mismo espacio 3D.

La nueva API SpatialContainer permite colocar varias vistas en el mismo espacio 3D como una serie de muñecas rusas.

Puedes aplicar una alineación tridimensional a todas las vistas. Aquí alineamos a todos los subelementos según su guía de alineación bottomFront.

Y aquí, según su guía topTrailingBack.

spatialOverlay es una herramienta similar que permite superponer una vista en el mismo espacio 3D que otra.

Al igual que SpatialContainer, admite alineaciones 3D.

Solo tengo dos vistas para alinear, el robot y el anillo de selección. En realidad, solo me importa la geometría del robot. Quiero ajustar el tamaño del anillo para que se adapte al del robot. Usaré una spatialOverlay para implementar las imágenes del robot seleccionado.

Agregaré un modificador spatialOverlay al modelo de robot. Si figura seleccionado, coloca la vista del anillo ajustable como su contenido. Usaré la alineación .bottom para alinear la parte inferior del anillo con la parte inferior del robot.

Creo que el carrusel de robots se ve genial. Y es fácil hacer cosas aún mejores con todas las API componibles de SwiftUI.

Repasemos todo lo que aprendimos al implementar debugBorder3D.

Aquí está el modificador que mostré antes aplicado a un Model3D.

Defino un método debugBorder3D} como una extensión de View. Aplico una spatialOverlay al contenido modificado para representar el borde en el mismo espacio 3D} que la vista a la que se aplica.

Coloco una ZStack dentro que contiene un borde 2D, un espaciador y otro borde 2D.

Luego, aplico un rotation3DLayout a toda la ZStack para colocar bordes en las caras derecha e izquierda de la vista.

Por último, coloco esta ZStack interna dentro de otra ZStack con bordes 2D para las caras frontal y posterior. Con esto tenemos bordes en todos los lados.

Me encanta poder combinar estos modificadores 2D de SwiftUI con nuevas API 3D para crear algo totalmente nuevo.

Hay análogos 3D para muchas de las herramientas de diseño y modificadores que quizás ya usaste en contextos 2D. Consulta la documentación para conocer más sobre estas API.

SwiftUI es una gran herramienta para crear apps 3D, pero en muchos casos conviene usar RealityKit, a menudo combinando ambas en la misma app.

Ahora que tu contenido de SwiftUI es 3D, deberá interactuar con el código de RealityKit. Mis amigos Maks y Amanda crearon unas incorporaciones sorprendentes para BOT-anist con ambas estructuras. Consulta “Better Together: SwiftUI and RealityKit” para más información. No puedo esperar a ver cómo luce tu app en 3D.