Crea una app de SwiftUI con el nuevo diseño

Hola. Soy Franck, ingeniero del equipo de SwiftUI. En este video aprenderás cómo crear una gran app con el nuevo diseño. iOS 26 y macOS Tahoe tienen grandes actualizaciones en la apariencia de las apps y las experiencias del sistema. Lo principal es un nuevo material adaptable para controles y elementos de navegación que llamamos Liquid Glass. Se inspira en las propiedades ópticas del vidrio y la fluidez del líquido para crear un material ligero y dinámico que eleva el contenido de varios componentes. Mientras te desplazas por el contenido, el vidrio se adapta automáticamente al contenido que está debajo, cambiando de claro a oscuro. Con una apariencia renovada en todas las plataformas, los controles cobran vida durante la interacción. Los conmutadores, selectores y controles deslizantes se vuelven vidrio líquido, creando una experiencia encantadora. Estas actualizaciones se aplican en todas las plataformas donde está la app. Ve “Conoce Liquid Glass” para conocer a fondo el diseño de este nuevo material. Consulta “Conoce el nuevo sistema de diseño” para ver las mejores prácticas con el nuevo diseño. Para ganar claridad y centrarse en lo importante, puede ser necesario reinventarse y mirar todo el panorama. Hoy voy a aplicar esto a la app Landmarks, un proyecto de muestra en los sitios web de Apple Developer. Mostraré el nuevo sistema de diseño en las plataformas de Apple y mejoraré la app Landmarks adoptando las nuevas API. Cuando creas tu app con SDK de Xcode 26, notarás cambios en toda la interfaz. Comenzaré con componentes estructurales, como TabView y NavigationSplitView. Luego, abordaré la apariencia y el comportamiento de las barras. Mostraré actualizaciones de la búsqueda que mejoran la consistencia y el uso. Te mostraré cómo los controles cobran vida con Liquid Glass. Terminaré describiendo cómo puedes usar el vidrio en tus propios elementos personalizados.

Hay mejoras que obtendrás automáticamente y nuevas API para personalizar aún más la experiencia. La estructura de la app se refiere a la familia de API que definen cómo se navega por la app.

Esto incluye vistas y modificadores como NavigationSplitView, TabView y hojas. Cada uno de estos aspectos se perfeccionó para el nuevo diseño. NavigationSplitView permite navegar a través de una jerarquía definida de categorías raíz.

Ahora tienen una barra lateral de Liquid Glass que flota sobre el contenido. Este banner principal en Landmarks lo demuestra, con las flores rosadas reflejándose en la barra lateral. Pero el equipo de Landmarks no tomó imágenes espectaculares solo para que estén recortadas, sin importar qué tan hermosa sea la barra lateral. Con el modificador backgroundExtensionEffect, las vistas pueden extenderse fuera del área segura sin recortar el contenido.

Si oculto la barra lateral un momento, verás lo que sucede detrás de ella. La imagen fuera del área segura se refleja y se difumina, extendiendo el arte y dejando visible todo su contenido. El nuevo diseño hace brillar a los inspectores con más Liquid Glass. Del otro lado de la barra lateral de Landmarks, el inspector aloja contenido con capas más sutiles. Esto asocia al inspector con su selección relacionada.

Las TabViews proporcionan una navegación consistente de nivel superior. Brindan un panorama de las posibilidades y se optimizan para cambiar de una sección a otra, manteniendo el contexto en cada una.

Ahora la barra de pestañas del iPhone flota sobre el contenido y se puede configurar para minimizarla al desplazarse. Esto permite que el contenido de la app siga siendo el protagonista.

Para adoptar esto, usa el modificador tabBarMinimizeBehavior. Por ejemplo, esta app de TV usa onScrollDown.

De este modo, la barra de pestañas se vuelve a expandir al desplazarse en la otra dirección.

Supongamos que la app tiene otros controles que quieres a mano, como esta vista de reproducción en Música.

Coloca una vista encima de la barra con el modificador tabViewBottomAccessory. Esto aprovecha el espacio que brinda el comportamiento de colapso de la barra.

En la vista de accesorios, lee tabViewBottomAccessoryPlacement del entorno. Ajusta el contenido del accesorio cuando se colapse en la barra de pestañas.

Ya mostré lo genial que es NavigationSplitView en Landmarks con su nuevo diseño, y cómo puedes adaptar apps basadas en TabView. A continuación presentaré las hojas. Al crear una colección de puntos de referencia, se presenta una hoja de opciones. En iOS 26, las hojas de altura parcial se insertan de manera predeterminada con un fondo de Liquid Glass.

En alturas menores, los bordes inferiores se retraen y encajan en los bordes curvos de la pantalla.

Al pasar a la altura completa, el fondo cambia, se vuelve opaco y se ancla al borde de la pantalla. Si personalizaste un fondo con presentationBackground, elimina el modificador para que destaque el nuevo material.

Las hojas pueden aparecer a partir de los botones que las presentan. Para que la presentación aparezca desde la vista de origen, convierte el elemento de la presentación en el origen para la transición. Y marca el contenido de la hoja como destino de la transición.

Otras presentaciones, como menús, alertas y mensajes emergentes, fluyen desde los controles de Liquid Glass, enfocando el contenido en lugar de la acción.

En el nuevo diseño, los cuadros de diálogo también aparecen desde los botones.

Ahora que tenemos una estructura sólida, pasemos a las barras de herramientas. En el nuevo diseño, los elementos están en una superficie de Liquid Glass sobre el contenido y se adaptan a lo que está debajo. Los elementos de la barra se agrupan automáticamente. Cuando uso Xcode 26, los elementos personalizados se agrupan por separado del botón Atrás del sistema.

Los botones Favorito y Agregar a colección son acciones relacionadas. Así que usé la nueva API ToolbarSpacer con espacios fijos para dividirlos en su propio grupo.

Esto aclara que las acciones agrupadas están relacionadas, mientras que las separadas tienen otro comportamiento. ToolbarSpacer se puede usar para crear un espacio flexible que se expanda entre los elementos.

La app Mail usa esta técnica para crear un filtro alineado al principio y un grupo alineado al final con los elementos de búsqueda y redacción.

Algunos elementos pueden prescindir de esta agrupación, como este elemento de Books que muestra mi avatar. Aplica el modificador sharedBackgroundVisibility para separar un elemento en su propio grupo sin fondo.

En la app Landmarks, agregué una funcionalidad que permite a los amigos reaccionar a mi colección. Me gustaría agregar un indicador en el elemento de notificación cuando haya una nueva reacción. No quiero perderme esa dulce validación externa.

Con el modificador de insignias, esa dulce validación está a una línea de código de distancia.

Apliqué el modificador badge al contenido de la barra de herramientas para mostrar este indicador. Además de agrupar estos elementos y colocar insignias, el nuevo diseño presenta otros cambios. Los íconos usan renderización monocromática en más lugares, como las barras de herramientas.

Así se reduce el ruido visual, se enfatiza el contenido de la app y se mantiene la legibilidad.

Aún puedes teñir íconos con .tint(), pero úsalo para transmitir significado, como un llamado a la acción, no solo para generar un efecto visual.

Ahora se mantienen legibles los controles con un efecto de borde de desplazamiento automático.

Es un difuminado y una atenuación sutiles que se aplican debajo de las barras de herramientas. Si la app tiene otros fondos o efectos detrás de los elementos, elimínalos, ya que interferirán con este efecto.

Para interfaces más densas, como la de Calendario, ajusta la nitidez del efecto con el modificador scrollEdgeEffectStyle.

A continuación, mostraré cómo crear experiencias de búsqueda ingeniosas. Hay grandes actualizaciones en dos patrones de búsqueda clave. “Buscar en la barra de herramientas” coloca el campo en la parte inferior de la pantalla. En el iPad y la Mac, aparece en la posición superior final de la barra de herramientas. El segundo patrón es tratarla como una página aparte en una app de varias pestañas. Para la app Landmarks, coloqué la búsqueda al final de la esquina superior. Con esta ubicación, la mayoría del contenido debe estar disponible mediante la búsqueda.

El campo de búsqueda aparece en su propia superficie de Liquid Glass.

Un toque lo activa y muestra el teclado. Para obtener esta variante en Landmarks, apliqué searchable en NavigationSplitView. Al declarar el modificador aquí, la búsqueda aplica a todo NavigationSplitView, no solo a una columna.

En el iPhone, esta variante se adapta para colocar el campo en la parte inferior de la pantalla.

Según el tamaño del dispositivo, la cantidad de botones, etc., el sistema puede minimizar la búsqueda en un botón, como este en Mail.

Cuando toco el botón, aparece sobre el teclado un campo de búsqueda completo.

Si la búsqueda no es primordial en la app y la prefieres minimizada, usa el modificador searchToolbarBehavior.

La búsqueda en apps con varias pestañas se realiza en una página aparte. Las apps de nuestras plataformas usan este patrón, como la app Salud para ver mis tendencias de fitness.

Para hacer esto, configura una función de búsqueda en una pestaña y coloca el modificador searchable en TabView.

Cuando se selecciona esta pestaña, un campo de búsqueda reemplaza la barra de pestañas y se muestra el contenido de la pestaña.

Se puede interactuar con las sugerencias o tocar el campo de búsqueda para ver el teclado y hacer una búsqueda específica.

En el iPad y la Mac, al seleccionar la pestaña de búsqueda, el campo aparece centrado sobre las sugerencias de navegación. Estos patrones brindan flexibilidad y control sobre la experiencia de búsqueda en tu app. A continuación hablaré sobre las actualizaciones de los controles estándar. El nuevo diseño crea un parecido familiar en todas las plataformas los botones, controles deslizantes, menús y más.

Voy a comenzar con los botones, uno de los controles más comunes. Acorde con las esquinas curvas del nuevo diseño, los botones con borde ahora tienen forma de cápsula. Los controles mini, pequeños y medianos en macOS siguen siendo rectángulos redondeados, preservando la densidad horizontal.

El modificador de bordes existente permite especificar la forma para cualquier tamaño.

Las alturas de los controles se actualizan para el nuevo diseño.

Los controles en macOS suelen ser un poco altos, lo que ofrece más espacio para la etiqueta del control y mejora el tamaño de los objetivos de clic.

Para lograr compatibilidad con diseños de alta densidad actuales, como inspectores complejos y popovers, controlSize se puede aplicar a un solo control o a un conjunto de controles. Para las acciones más importantes, ahora se admiten botones de tamaño extragrande. Los nuevos estilos de botón de vidrio y vidrio prominente llevan Liquid Glass a cualquier botón de la app. Pasemos a los controles deslizantes, que también se mejoraron.

Ahora admiten marcas de verificación. Aparecen automáticamente al inicializar un control deslizante con un parámetro step.

Incluso puedes colocar marcas individuales de forma manual.

Usa el cierre ticks para especificar su ubicación, como hago aquí para las marcas del 60 y el 90%.

Los controles deslizantes también permiten rellenar el recorrido desde un lugar particular. Esto es útil para valores que no están al principio del rango, como valores de reproducción más rápidos o lentos.

Especifica el punto de inicio con el parámetro neutralValue. Los menús en todas las plataformas tienen una disposición más uniforme. Los íconos están siempre a la vanguardia y ahora también se usan en macOS. La misma API que usa etiquetas o inicializadores de control estándar ahora crea el mismo resultado en ambas plataformas.

Además de las actualizaciones para SwiftUI, hay nuevas API para actualizar los controles para el nuevo diseño.

Muchos controles tienen sus esquinas alineadas dentro de sus contenedores, incluso si el contenedor es tu iPhone. Esto se denomina “concentricidad de esquinas”. Un botón en la parte inferior de una hoja debe tener el mismo centro de esquina que las esquinas de la hoja.

Usa la forma de rectángulo concéntrico para crear vistas que mantengan automáticamente la concentricidad. Pasa la configuración containerConcentric al parámetro corner de un rectángulo. La forma coincidirá automáticamente con su contenedor, en diferentes pantallas y formas de ventanas. La mejor forma de adoptar el nuevo diseño es usar estructuras, barras, ubicaciones y controles estándar. Pero a veces, es posible que la app deba personalizarse. Ahora, mostraré cómo crear elementos de Liquid Glass personalizados para tu app. Mapas es un gran ejemplo con sus controles personalizados que flotan sobre el contenido del mapa.

También agregaré insignias a la app Landmarks para cada punto de referencia que la gente visite. Comencemos creando una insignia personalizada con el efecto de Liquid Glass.

Usa el modificador glassEffect para agregar vidrio a las vistas personalizadas.

Se aplica un efecto de vidrio predeterminado dentro de una forma de cápsula detrás del contenido. SwiftUI usa un color de texto adaptable para mantener la legibilidad sobre fondos coloridos.

Personaliza la forma del efecto de vidrio proporcionando una forma al modificador.

Para vistas importantes, usa el modificador tint.

Úsalo solo para transmitir significado y no solo para lograr un efecto visual.

Al igual que el texto de un efecto de vidrio, el tinte se adapta a lo que se está detrás de él. En iOS, agrega el modificador interactive al efecto de vidrio para controles personalizados o contenedores interactivos. Este efecto reacciona cambiando de tamaño, rebotando y brillando, igual al efecto de los botones y los controles deslizantes. Ahora que tenemos la insignia personalizada, juntemos varias para que interactúen y se combinen entre sí. Usa GlassEffectContainer para combinar varios elementos de vidrio. Esta agrupación es esencial para la exactitud visual. El material de vidrio refleja y refracta las luces, eligiendo colores del contenido cercano. Este efecto se consigue tomando muestras de contenido de un área más grande a su alrededor.

Pero el vidrio no puede tomar muestras de otro vidrio, por lo que tener varios efectos de vidrio cercanos crea inconsistencia.

Un contenedor de vidrio permite que estos elementos compartan la región de muestreo y se genere un resultado visual consistente.

En la app Landmarks, uso GlassEffectContainer para agrupar mis insignias. Al expandirlas, obtengo esta maravillosa transformación fluida.

Agrega estas transiciones a tu contenedor usando el modificador glassEffectID.

Para configurarlo, primero declaro un espacio de nombres local. Luego, lo asocio con cada efecto de vidrio en mi pila expandida de insignias y con mi conmutador.

Cuando vuelvo a tocar el botón, las insignias de premios se reabsorben elegantemente.

Liquid Glass ofrece una excelente manera de resaltar la funcionalidad que vuelve única a la app. Espero que hayas disfrutado de este recorrido sobre el nuevo diseño y el uso de Liquid Glass. Ahora es tu turno. Usa el nuevo diseño en tu app creándola con Xcode 26. Creo que apreciarás todo lo que te ofrecen los controles estándar.

Evalúa el flujo de la app e identifica si se necesitan cambios. Presta atención a los colores de fondo y las barras que puedes eliminar. Crea componentes expresivos con Liquid Glass que hagan que tu app se destaque. Espero que lo pases genial jugando con el nuevo diseño. ¡Sigue brillando!