Crea una app de SwiftUI con el nuevo diseño

iOS 26 y macOS Tahoe presentan Liquid Glass, un nuevo diseño adaptable para controles y elementos de navegación inspirado en el vidrio y el líquido. Este diseño cambia de color a medida que el usuario se desplaza y permite que los controles, como los alternadores y los controles deslizantes, sean más interactivos y visualmente atractivos. Esta actualización se aplica a todas las plataformas de Apple e incluye cambios en componentes estructurales, como TabView y NavigationSplitView, las barras de herramientas, las experiencias de búsqueda y la introducción de nuevas API diseñadas para que los desarrolladores personalicen la IU de sus apps. La app Landmarks demuestra estas nuevas funcionalidades.

La estructura de la app se actualiza con API perfeccionadas, incluidas NavigationSplitView, TabView y Sheets, las cuales incorporan el nuevo diseño Liquid Glass. NavigationSplitView ahora tiene una barra lateral flotante de Liquid Glass con un modificador “backgroundExtensionEffect” que permite que las vistas se extiendan por fuera del área segura sin recortarse. TabViews en el iPhone tiene una barra de pestañas flotante que se puede minimizar durante el desplazamiento, lo que mejora la visibilidad del contenido, y puede incluir una vista adicional en la parte inferior con controles adicionales. Las hojas ahora tienen fondo de Liquid Glass con una transición orgánica a medida que sube por la pantalla. También pueden aparecer a partir de botones de presentación, lo que crea una experiencia de usuario más fluida. Otros elementos, como menús, alertas y ventanas emergentes, también fluyen orgánicamente desde los controles de Liquid Glass. Los diálogos ahora aparecen automáticamente desde sus botones de presentación.

El nuevo diseño de la app incluye barras de herramientas flotantes en superficies de Liquid Glass con elementos agrupados automáticamente. Puedes utilizar la API ToolbarSpacer para crear agrupaciones y espaciados personalizados y, así, mejorar la claridad visual. Agrega insignias con una sola línea de código para indicar la presencia de notificaciones. Los íconos monocromáticos reducen el ruido y el efecto de borde de desplazamiento automático difumina el contenido que se encuentra debajo de las barras de herramientas para facilitar la lectura. Puedes eliminar los fondos adicionales y realizar ajustes para IU más densas.

El nuevo diseño presenta dos patrones de búsqueda principales en las plataformas: búsqueda en la barra de herramientas. El campo de búsqueda se encuentra en la parte inferior de la pantalla en el iPhone, en la parte superior final en el iPad y la Mac o aparece minimizado en un botón que se expande al tocarlo. Página de búsqueda dedicada. Se accede a la búsqueda a través de una pestaña, de modo que la barra de pestañas se reemplaza con un campo de búsqueda y contenido de la app. El campo de búsqueda aparece centrado sobre las sugerencias en el iPad y la Mac.

El nuevo diseño tiene un parecido familiar coherente en todas las plataformas para distintos controles. Los botones ahora tienen forma de cápsula de manera predeterminada y son más altos en macOS para brindar una mejor legibilidad y objetivos de clic más grandes. El diseño también ofrece botones extragrandes y nuevos estilos de vidrio. Los controles deslizantes ahora admiten marcas de verificación, que se pueden colocar manualmente, y el relleno de la barra en valores específicos. Los menús tienen un diseño nuevo con una ubicación de íconos coherente en todas las plataformas. El nuevo diseño también incluye concentricidad de esquinas, que garantiza que los controles se alineen perfectamente con sus contenedores.

Para personalizar aún más una app, puedes crear elementos de Liquid Glass personalizados. Por ejemplo, la app Landmarks utiliza insignias con el efecto de Liquid Glass. Para lograr eso, aplica el modificador “glassEffect” a las vistas personalizadas, que puedes modelar y colorear para destacarlas. El modificador “interactive” ahora está disponible para los controles de iOS y permite aplicar efectos de cambio de tamaño, rebote y brillo en función de las interacciones del usuario. Agrupa varios elementos de vidrio en un “GlassEffectContainer” para garantizar resultados visuales coherentes, ya que el vidrio no puede tomar muestras de otro vidrio. Para las transiciones entre elementos de vidrio, utiliza el modificador “glassEffectID”, que permite crear efectos de transformación fluidos. Esta técnica mejora el atractivo visual y la singularidad de la app, y la ayuda a destacarse.

El nuevo diseño de Xcode 26 incluye controles estándares que ofrecen mejoras automáticas y Liquid Glass para crear componentes expresivos. Revisa los flujos de tus apps, elimina los colores de fondo innecesarios y aprovecha Liquid Glass para lograr que tus apps se destaquen.