Descubre los nuevos Ornaments Views para VisionOS

Ornament View es una nueva vista que podemos utilizar en VisionOS para mostrar elementos de control o información relacionados con una ventana. Estas vistas pueden aparecer en cualquier borde de la ventana.

Vistas como las TabView y ToolBar utilizan Ornaments para representar su interfaz de usuario en VisionOS. También podemos crear nuestro Ornament personalizado utilizando el modificador ornament(visibility:attachmentAnchor:contentAlignment:ornament:). Veamos cada uno de los parámetros que acepta el modificador:

  • visibility: Define si el ornament estará visible en nuestra ventana o no. Tiene tres valores: .automatic (su valor por defecto), donde el sistema decidirá si estará visible o no, .visible y .hidden.

  • attachmentAnchor: Indica dónde se posicionará nuestro ornament en nuestra ventana.

  • contentAlignment: Define la alineación que tendrá el contenido de nuestra vista, siendo por defecto .center.

  • ornament: Define el contenido de nuestro ornament.

Ahora veamos cómo usar el modificador:

import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("AsyncLearn")
}
.padding()
// 1
.ornament(attachmentAnchor: .scene(.trailing)) {
// 2
VStack {
Button(action: {
// Action
}, label: {
Image(systemName: "pencil")
})
Button(action: {
// Action
}, label: {
Image(systemName: "trash.fill")
})
}
.padding()
// 3
.glassBackgroundEffect()
}
}
}
  1. Primero implementamos el modificador del ornament, indicando la posición como .scene(.trailing).
  2. Creamos nuestra vista, en este caso dos botones dentro de un VStack.
  3. Le agregamos el modificador .glassBackgroundEffect() para que tenga un fondo con el estilo de VisionOS.
Ejemplo de un Ornament en VisionOS

Como mencionamos al principio del artículo, las vistas TabView y ToolBar también usan Ornaments. Veamos cómo se ven:

TabView usando Ornaments en VisionOS

import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
Text("Folder")
.tabItem {
Label("Folder", systemImage: "folder")
}
Text("Calendar")
.tabItem {
Label("Calendar", systemImage: "calendar")
}
}
.padding()
}
}
Ejemplo de un TabView usando Ornament en VisionOS

ToolBar usando Ornaments en VisionOS

import SwiftUI
struct ContentView: View {
var body: some View {
Text("AsyncLearn")
.toolbar {
ToolbarItem(placement: .bottomOrnament) {
Button(action: {
// Action
}, label: {
Image(systemName: "pencil")
})
}
ToolbarItem(placement: .bottomOrnament) {
Button(action: {
// Action
}, label: {
Image(systemName: "trash.fill")
})
}
}
}
}
Ejemplo de un ToolBar usando Ornament en VisionOS

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn