Cómo utilizar Inspector en SwiftUI para mejorar tus vistas
Libranner Santos
07 agosto, 20234min de lectura
Con iOS 17, Apple ha introducido .inspector(isPresented:content:)
, un modificador que nos permite agregar vistas para mostrar fácilmente detalles adicionales del contenido de nuestra app. Este se comporta como el modificador sheet
, si solo trabajamos con iOS, pero provee mayor adaptabilidad para más plataformas como iPad o Mac, veremos esto con un ejemplo en breve.
Los inspectores no son un concepto nuevo en el ecosistema de Apple. Por ejemplo, en Xcode tenemos una serie de inspectores disponibles para acceder rápidamente a información, como el Inspector de Archivos:
Ejemplo de cómo crear un Inpector
Imaginemos una app en la que los usuarios pueden seleccionar un cliente para obtener más información sobre él. Hay varias formas de lograr esto, veamos cómo podemos conseguirlo usando el nuevo modificador inspector(isPresented:content:)
.
Caso de uso
Nuestro caso de uso consiste en mostrar detalles de un cliente cuando hacemos tap sobre la casilla que contiene sus datos en una lista. Comenzaremos con el siguiente código, donde ya tenemos un listado de clientes:
struct InspectorExample: View {var body: some View {VStack {List(Self.customers, id: \.id) { customer inmakeCustomerItem(customer)}}}}
Primero, agregamos las variables que necesitaremos y, como estas provocarán cambios en la interfaz de usuario, usamos @State
:
struct InspectorExample: View {@State private var showInspector = false@State private var selectedCustomer = Self.customers[0]var body: some View {VStack {List(Self.customers, id: \.id) { customer inmakeCustomerItem(customer)}}}}
showInspector
es un booleano que indicará cuándo se debe mostrar el inspector y selectedCustomer
guardará los datos del cliente seleccionado.
¡Ahora viene la parte más interesante! Agreguemos el inspector. Donde termina el VStack
, agregamos el modificador:
// 1.inspector(isPresented: $showInspector) {// 2CustomerDetailView(customer: selectedCustomer)// 3.inspectorColumnWidth(min: 300, ideal: 300, max: 400)// 4.toolbar {Spacer()Button {showInspector.toggle()} label: {Label("Close", systemImage: "xmark.circle")}}}
Veamos qué está pasando en este código:
- Usamos
.inspector(isPresented:content:)
con un binding a la variableshowInspector
. - Pasamos el cliente seleccionado a la vista
CustomerDetailView
. - Configuramos el ancho del inspector. Esto es especialmente útil porque podemos usar este mismo código para iPad y Mac, donde en lugar de usar un sheet se muestra en el lateral.
- Agregamos un
.toolbar(content:)
con un botón para poder cerrar el inspector.
Así es como se ve el resultado en iOS:
Como indicamos el ancho deseado utilizando .inspectorColumnWidth(min: 300, ideal: 300, max: 400)
, veamos cómo se ve en iPad el mismo código sin hacer ningún cambio:
Personalizando el comportamiento del Inspector
Contamos con muchas opciones para personalizar el comportamiento y la apariencia de un Inspector:
.presentationBackground(_:)
permite asignar un background para el sheet..presentationBackgroundInteraction(_:)
elimina la vista oscura que cubre el contenido, permitiendo interactuar con él.
Opciones solo disponibles cuando el Inspector es un sheet
.presentationDetents(_:)
establece los diferentes tamaños que puede tener el sheet..presentationCornerRadius(_:)
para modificar el radio de las esquinas..presentationContentInteraction(_:)
para controlar cómo responde a gestos..presentationCompactAdaptation(_:)
para especificar cómo adaptarse a tamaños compactos.
Modifiquemos un poco nuestro inspector para usar algunos de estos modificadores:
.inspector(isPresented: $showInspector) {CustomerDetailView(customer: selectedCustomer).presentationDetents([.height(250), .medium, .large]).presentationBackgroundInteraction(.disabled).inspectorColumnWidth(min: 300, ideal: 300, max: 400).toolbar {Spacer()Button {showInspector.toggle()} label: {Label("Toggle Inspector", systemImage: "xmark.circle")}}}
Al código que vimos anteriormente le agregamos estas dos líneas:
.presentationDetents([.height(250), .medium, .large]).presentationBackgroundInteraction(.disabled)
La primera indica los diferentes tamaños que puede tener el sheet. La segunda indica que mientras el sheet esté presente, no se podrá interactuar con la pantalla principal. Así queda el app:
Cómo posicionar un Inspector
Dependiendo de dónde coloquemos el modificador .inspector(isPresented:content:)
y para qué dispositivo estemos creando la app, el toolbar se mostrará de manera diferente. En el siguiente diagrama se muestran las diferentes configuraciones:
Conclusión
Los inspectores son vistas que muestran más detalles del contenido seleccionado. Se pueden ocultar/mostrar y cambiar su ancho programáticamente. Además, se pueden personalizar con diferentes modificadores, como presentationBackgroundInteraction(_:)
y presentationContentInteraction(_:)
.
Al utilizar .inspector(isPresented:content:)
, puedes mejorar la experiencia del usuario de tus vistas y proporcionar más contexto e información a tus usuarios.