Crea una app de UIKit con el nuevo diseño

Hola, te damos la bienvenida a “Crea una app UIKit con el nuevo diseño”. Soy Sanaa, ingeniera del equipo de UIKit. Hoy te enseñaré a adoptar el nuevo diseño y a usar Liquid Glass en tus apps.

Con un nuevo diseño hermoso, iOS 26 actualiza el aspecto de los materiales y controles del sistema. Este diseño se centra en un nuevo material llamado Liquid Glass. Es translúcido, dinámico y vibrante. En el sistema, los componentes y materiales de UIKit se actualizaron con Liquid Glass.

Tus apps tendrán esta nueva apariencia en cuanto las recompiles con el nuevo SDK. Te recomiendo ver los videos “Conoce Liquid Glass” y “Diseña con el sistema de diseño Liquid Glass” para obtener conocer las prácticas recomendadas del nuevo sistema.

Comenzaré con cómo las vistas de pestañas y las divididas adoptan el nuevo sistema de diseño y flotan sobre el contenido.

Seguiré con lo nuevo en apariencia y comportamiento de las barras de navegación y de herramientas. Ahora son transparentes y con botones que simulan un vidrio líquido y dan más espacio al contenido.

Seguiré con las actualizaciones de las presentaciones, como una transición de zoom y un nuevo comportamiento para las alertas y las hojas de acción.

Describiré la nueva experiencia de búsqueda. Más opciones para la ubicación de la barra de búsqueda.

Revisaremos los controles, y finalizaré con la apariencia de Liquid Glass en la IU personalizada.

Comenzaré con las vistas de pestañas y las vistas divididas.

UITabBarController y UISplitViewController se actualizaron con la nueva apariencia de Liquid Glass.

Las barras de pestañas ofrecen una navegación persistente y superior en la app. Muestran una breve descripción de la app y ayudan a cambiar de sección rápido. Ahora, la barra de pestañas del iPhone flota y se puede minimizar al desplazarse para centrarse en el contenido.

Para permitir que se minimice, configura tabBarMinimizeBehavior en la dirección deseada. Aquí, la app de TV lo configura en .onScrollDown. Así, la barra de pestañas se reexpande cuando te desplazas en otra dirección.

Sobre la barra, puedes ver accesorios como el mini reproductor en la app Música. UITabBarController muestra accessoryView sobre la barra de pestañas, así coincide con su apariencia. Al minimizar la barra de pestañas, la vista de accesorios aparece abajo en línea con la barra de pestañas.

Para configurar los accesorios, crea un UITabAccessory con tu vista. Configura la propiedad bottomAccessory en UITabBarController.

Si el accesorio está en línea con la barra de pestañas, hay menos espacio para mostrarlo. Aquí, la app Música se adapta al espacio reducido y oculta algunos controles en el minirreproductor.

Para ajustar la vista de accesorios, observa los cambios en tabAccessoryEnvironment. Revisa si se ve la vista de accesorios en línea con la barra de pestañas, y actualiza la vista si es necesario.

También puedes usar updateProperties para actualizar tu vista de accesorios con el comportamiento de seguimiento de función automático.

Para más información sobre el seguimiento de función automático y el nuevo método updateProperties, consulta “Novedades en UIKit”.

En iPad, la barra de pestañas y la lateral también aparecen en Liquid Glass. Flotan sobre el contenido de la app cuando usas UITabBarController. Al adoptar UITab y UITabGroup, tendrás adaptabilidad automática en tu app. Así se podrá cambiar entre la barra de pestañas y la barra lateral en iPad. Para más información, consulta los videos “Mejora tu experiencia de pestañas y barra lateral en iPadOS” y “Tu app UIKit más flexible”.

Con este diseño, las barras laterales se ven mejor cuando debajo hay contenido similar a la vista de desplazamiento principal. La app de TV en iOS 26 es un buen ejemplo sobre esto. La imagen se extiende en toda la pantalla y debajo de la barra lateral. Permanece centrada y totalmente visible. Este efecto se usa en muchas apps en iOS 26. Tu app también se verá genial con el nuevo UIBackgroundExtensionView.

La vista de extensión debe cubrir el ancho, incluso el área segura inicial para la barra lateral. La entrada del efecto es una vista de contenido que tu configuras. Por ejemplo, una vista de imagen. Se coloca en la jerarquía de vistas y rellena sin problemas el espacio vacío.

Este efecto especial debe usarse con cierta finalidad. Secciones como la lista de episodios se desplazan con naturalidad debajo de la barra lateral y no necesitan extenderse.

Tampoco deben extenderse los elementos encima de la obra de arte, como el nombre del programa y la descripción. Asegúrate de agregarlos como vistas de extensión al mismo nivel, no como subvistas.

El controlador de vista de presentación ya tiene una vista de imagen para la ilustración. Para agregar el efecto, crea un backgroundExtensionView y asigna la vista de la imagen a su propiedad contentView. Agrega la vista de extensión a tu jerarquía. Por último, agrega la vista de detalles como vista de extensión al mismo nivel. Por defecto, la vista de contenido cubre el área segura de la vista de extensión. Los bordes con zona segura positiva insertada se extienden para llenar el espacio vacío. Estos son el borde superior para la barra de navegación y de estado, y el borde delantero para la barra lateral. La app de TV tiene poco contenido en la barra de navegación que pueda cubrir las ilustraciones. Entonces no necesita el efecto de extensión en la parte superior. Por otro lado, la vista de contenido se posiciona manualmente fuera del área segura en la parte superior.

Volveré al ejemplo de código para ajustar manualmente el diseño del efecto. Primero, configura automaticallyPlacesContentView como falso en la vista de extensión. Usa las restricciones de diseño automático para posicionar la vista de la imagen en la parte superior de la pantalla. Para ampliar la vista de la imagen debajo de la barra lateral, agrega una restricción para el leadingAnchor igual al safeAreaLayoutGuide de extensionView.

No olvides también agregar restricciones para los anclajes finales e inferiores.

Ahora repasemos cómo se ven y comportan las barras de navegación y de herramientas en el nuevo diseño. En iOS 26, las barras de navegación y de herramientas adoptan la nueva apariencia cristalina y flotan sobre el contenido. Cuando se especifican elementos barButton de las barras, el sistema los separa automáticamente en grupos visuales de elementos. Cada grupo comparte un fondo cristalino.

Por defecto, los elementos de los botones de la barra que usan imágenes comparten el fondo con otros botones de imagen. Los grupos de botones con múltiples elementos también comparten los fondos.

Los botones de texto, los botones Listo y Cerrar y los botones de estilo destacados tienen fondos de vidrio separados. Este ejemplo muestra estas reglas en acción, el botón Seleccionar al principio y el botón Listo al final no comparten el fondo cristalino con los cuatro botones de imagen en el medio. Para configurar la barra de navegación, asigna todos los BarButtonItems a los rightBarButtonItems del navigationItem. Se configura así el comportamiento por defecto del sistema que describí anteriormente. Para dividir los elementos en grupos separados, usa un elemento de espacio fijo. En este ejemplo, quiero separar el botón "Compartir", así que agrego un espacio fijo entre los botones de compartir e información.

Los botones de la barra usan labelColor por defecto para facilitar la lectura. Si necesitas un color para comunicar información sobre la acción, puedes especificarlo como tintColor.

Por ejemplo, voy a actualizar el botón de la bandera para usar systemOrange como tintColor.

Sólo tomará ese color el símbolo de la bandera.

Para agregar color al fondo del botón, configura el estilo en prominente.

Es posible que antes hayas usado espacios flexibles para distribuir de forma uniforme los elementos en la barra de herramientas. Con Liquid Glass, cada elemento flexibleSpace separa el fondo entre los elementos.

Para distribuir uniformemente los elementos y agruparlos en un solo fondo, usa espacios flexibles con el ajuste en falso de hidesSharedBackground.

En iOS 26, UINavigationItem ofrece más control sobre las áreas de título y títulos grandes en la barra de navegación. Esto agrega un nuevo subtítulo que se muestra debajo del título.

Usa cadenas atribuidas para realizar ajustes detallados tanto en el título como en el subtítulo.

Especifica vistas personalizadas para agregar elementos interactivos. Los títulos grandes se colocan arriba de la vista de contenido y se desplazan con el contenido debajo de la barra.

Para mantener visible el título grande, expende al máximo la vista de desplazamiento debajo de la barra de navegación.

En este ejemplo, Mail usa el campo de búsqueda en la barra de herramientas y muestra la cantidad de correos no leídos en la barra de navegación con la nueva API de subtítulos.

Al filtrar correos, se muestra el filtro actual en un botón debajo del título grande. El botón se configura como largeSubtitleView en navigationItem y aparece debajo del título grande en navigationBar. Como parte del nuevo sistema de diseño en iOS26, el fondo de la barra ahora es transparente por defecto. Elimina las personalizaciones de fondo de tu navegación y barras de herramientas. El uso de UIBarAppearance o backgroundColor interfiere con la apariencia cristalina.

Los botones de barra usan un fondo cristalino. Ordena el contenido de tu vista personalizada según los márgenes de diseño para un espaciado correcto. Todas las vistas de desplazamiento debajo las barras de herramientas o navegación aplican automáticamente un tratamiento visual. Esto garantiza la legibilidad del contenido superpuesto en las barras. Se llama efecto de borde. Este nuevo efecto de borde no es sólo para las barras del sistema. También puedes usarlo con contenedores personalizados de vistas que se superponen al borde de una vista de desplazamiento. Aquí se muestran dos botones superpuestos al borde inferior de la vista de desplazamiento. Para insertar un efecto de borde detrás de esta pila de botones, crea un scrollEdgeElementContainerInteraction, asigna contentScrollView y el borde. Luego agrégalo a buttonsContainerView. Para interfaces de usuario más densas con muchos elementos flotantes, opta por un estilo de borde marcado en cualquier borde de una vista de desplazamiento. Se muestra similar a los fondos de barra estándar en iOS 18. Puedes activarlo con la configuración del estilo del efecto de borde en .hard. iOS 18 introdujo una transición de zoom interactiva e interrumpible. iOS 26 aporta la misma fluidez a la transición de diapositivas de navegación estándar.

Aquí estoy en la app Notas. Puedo abrir una nota y la app sigue ahí durante la transición.

Puedo ir atrás rápido si seleccioné la nota equivocada, o desplazarme mientras la transición aún se está estableciendo. También puedo tocar rápido el botón Atrás varias veces para retroceder aún más rápido.

Esto es genial porque puedes interactuar con la app en todo momento. Aunque eso también significa que tu app debe estar lista para interactuar en todo momento. Para aprender a usar las transiciones interrumpibles, mira el video "Mejora tus animaciones y transiciones de UI". Ahora también puedo deslizarme hacia atrás en cualquier lugar del área de contenido, no solo en el borde inicial. El gesto de deslizar hacia atrás el contenido verifica automáticamente otras interacciones.

Por ejemplo, las acciones Deslizar evitan que el contenido se deslice hacia atrás. Sin embargo, las áreas no interactivas lo permitirían.

Para priorizar el deslizamiento hacia atrás del contenido, los gestos personalizados deben establecer requisitos de falla en interactiveContentPopGestureRecognizer.

El nuevo diseño actualiza también las presentaciones, incluso la nueva transición de zoom dinámica. Cuando una presentación, como un menú o un popover, surge a partir de un botón cristalino, el botón se superpone.

Esto mantiene la continuidad visual entre la fuente y la presentación a lo largo de la animación.

Se ajusta este comportamiento a los menús automáticamente. Los popovers también tienen esta animación cuando su fuente es un barButtonItem. Las hojas pueden adoptar este efecto si usas la Transición de Zoom actualizada. Configura la transición preferida en el viewController presentado en .zoom y ubica el barButtonItem de origen al final.

Las hojas de cálculo tienen un diseño actualizado en iOS 26. Adaptan su apariencia desde altos más pequeños a más grandes. Para aprovechar la nueva apariencia cristalina, elimina cualquier fondo personalizado.

Las ActionSheets en iPad están ancladas a sus vistas de origen. A partir de iOS 26, funcionan igual en iPhone, aparecen directamente sobre la vista original.

En alertController, asegúrate de configurar el elemento de origen o la vista de origen en popoverPresentationController, sin importar el dispositivo en el que se muestre. Al asignar la vista de origen, automáticamente las transiciones se aplican a las hojas de acción.

Las hojas de acción en línea no tienen el botón Cancelar porque la acción de cancelar está implícita al tocar en cualquier otro lugar. Si no especifica una fuente, la hoja de acción se centrará y tendrá un botón para cancelar. iOS 26 ofrece una nueva experiencia de búsqueda más integrada: te permite ubicar el campo de búsqueda donde mejor se adapte a las necesidades de tu app. En iPhone, la barra de búsqueda se mueve automáticamente a la barra de herramientas, así el campo de búsqueda es fácilmente accesible.

Si ya tienes una barra de herramientas, agrega un searchBarPlacementBarButtonItem junto con otros botones de la barra. Esto posicionará la búsqueda exactamente donde quieras.

Aparecerá como un campo expandido o un botón de la barra de herramientas, según el espacio disponible.

En iPad, para una búsqueda de acceso universal, sigue el patrón de la barra de herramientas de macOS. Coloca la búsqueda en el borde posterior de la barra de navegación. Esto es ideal para vistas divididas. Para habilitar este comportamiento, configura searchBarPlacementAllowsExternalIntegration en el elemento de navegación como verdadero.

Para tener la búsqueda disponible mientras cambia entre vistas, usa un UITabBarController. Ahora puedes incluir una pestaña distinta para Buscar en el lado posterior. Al tocarlo, el botón de búsqueda se expande y los demás botones se contraen.

Esta pestaña de búsqueda es excelente para colocar sugerencias de búsqueda. Por defecto, se puede seleccionar una de estas sugerencias o se puede tocar el campo de búsqueda para comenzar a buscar.

Para que el campo de búsqueda se active automáticamente al tocar la pestaña de búsqueda, configura automaticallyActivateSearch como verdadero en esa pestaña.

Para vistas de búsqueda dedicadas, considera incluir la búsqueda como una sección en la barra lateral o en la barra de pestañas. La barra de búsqueda se puede integrar en el borde posterior de la barra de navegación, apilar o colocar centrada en el ancho normal en iPad. Para centrar la barra de búsqueda, usa integratedCentered como ubicación preferida. Cuando la barra de pestañas está visible, la barra de búsqueda se ubica debajo. Ahora hablaré sobre el nuevo aspecto de los controles.

Se rediseñaron los controles en iOS con una nueva apariencia, pero siguen siendo familiares. Los tamaños se actualizan ligeramente para controles como UISwitch. Revisa si tus diseños están configurados para adaptarse a las actualizaciones de tamaño. Los pulgares de control, como los de Switch y SegmentedControl, tienen una nueva apariencia cristalina para las interacciones.

Además de los estilos de botones existentes, hay dos nuevas apariencias cristalinas disponibles con UIButtonConfiguration. Usa la configuración .glass() para una vista cristalina estándar. Y usa .prominentGlass() para configurar la transparencia con el color de tu app. Los controles deslizantes, además de la transparencia en el pulgar, ahora conservan impulso y se estiran cuando se mueven. En iOS 26, los controles deslizantes ahora admiten marcas de verificación con una TrackConfiguration. Esta configuración se utiliza para configurar la apariencia y el comportamiento del control deslizante. Por ejemplo, para limitar a solo cinco valores este control deslizante de velocidad, configura una pista con allowsTickValuesOnly y cinco marcas de verificación.

Los controles deslizantes se pueden configurar para utilizar un valor neutral, para anclar el relleno del control deslizante en cualquier ubicación a lo largo de la pista, en lugar de solo en el extremo mínimo. Esto permite que el control deslizante muestre la diferencia entre el valor seleccionado y el valor neutral. Aquí, el relleno del control deslizante muestra una velocidad seleccionada más alta que la predeterminada. Los controles deslizantes también pueden adoptar un estilo sin pulgar para verse como una barra de progreso cuando no son interactivos. Esto es genial para la reproducción de medios, para no distraerse con el pulgar grande mientras se reproduce el medio. En estos lugares, los controles del sistema adoptaron Liquid Glass. Para sus casos de uso especiales, UIKit también ofrece API para adoptar la nueva apariencia de Liquid Glass. Al usar Liquid Glass en tu interfaz de usuario, es fundamental la intención de diseño cristalino. Liquid Glass es diferente a otros efectos visuales, como UIBlurEffect. Tiene lugares específicos donde es apropiado usarlo. El vidrio líquido está diseñado para ser una capa interactiva. Flota sobre el contenido, debajo de sus dedos, y se ofrece para los controles principales que se usan. Por ello, te sugerimos que limites el uso de Liquid Glass a los elementos más importantes de tu app. Siempre que sea posible, usa las vistas y controles del sistema para obtener una mejor experiencia.

Maps utiliza Liquid Glass para botones personalizados que flotan sobre el mapa. Tienen la naturalidad de una capa de control distinta. Por eso, son un gran candidato para usar el efecto cristalino y así lograr una ilusión flotante. Y al expandir la hoja, Maps elimina los botones. Esto evita que los elementos cristalinos se superpongan a otros elementos cristalinos y mantiene intacta la ilusión de una única capa flotante.

Para usar la transparencia con vistas personalizadas, crea un UIVisualEffectView, y crea un nuevo UIGlassEffect. En un bloque de animación, configura el efecto.

La transparencia aparece al usar una animación de materialización especial.

Por defecto, el vidrio tiene forma de cápsula. Para personalizar la forma, usa la nueva API de configuración de esquinas.

La transparencia tiene un aspecto oscuro y otro claro. Se adapta al estilo de interfaz de usuario seleccionado. Al agregar transparencia a un cuadro cristalino existente, este adapta su apariencia automáticamente. Para que las esquinas se adapten automáticamente a su contenedor, usa la configuración de esquina .containerRelative. Al mover la vista más cerca de la esquina del contenedor, el cornerRadius se adapta automáticamente.

Al alejarse, el radio de la esquina disminuye para mantener la concentricidad automáticamente. La transparencia adapta su aspecto en función del tamaño.

Un tamaño grande es más opaco.

Un tamaño más pequeño es más claro y cambia automáticamente entre el modo claro y oscuro para aumentar el contraste.

Para agregar contenido, como etiquetas e imágenes, usa contentView de visualEffectView. La etiqueta se vuelve vibrante automáticamente, según el color del texto. Esto garantiza la legibilidad en una amplia variedad de fondos.

Según los colores de fondo, la transparencia y el contenido cambiarán de modo automáticamente, si usas colores dinámicos.

Para resaltar vistas destacadas, configura .tintColor en la transparencia y anímalo junto con sus otras propiedades. Anime los cambios en tu contenido, como el color del texto, aquí.

Para personalizar la transparencia con un color, crea un nuevo UIGlassEffect, asigna un tintColor y anima el efecto al nuevo UIGlassEffect. El color personalizado se adapta automáticamente a una versión vibrante. Para eliminar el contenido con transparencia, anime el alfa del contenido a cero.

Los elementos del sistema interactivo, como los botones, reaccionan a las interacciones del usuario. Al tocar el botón, este emerge y rebota. Para obtener esa interactividad en tus vistas personalizadas, configura isInteractive como verdadero en glassEffect.

Y finalmente, cuando ya no necesites la transparencia, configura el efecto en nulo.

Es preferible configurar la propiedad del efecto para garantizar que la transparencia se desmaterialice o se materialice con la animación adecuada. En estos ejemplos, solo había una vista con Liquid Glass. La transparencia tiene incorporado un comportamiento adicional cuando varios elementos interactúan. Liquid Glass puede combinarse perfectamente con diferentes formas.

Para fusionar dinámicamente las vistas usa un UIGlassContainerEffect, configura un UIVisualEffectView, crea las vistas y agrégalas al contentView de contenedores. Si hay espacio entre ellos, aparecen como dos vistas separadas.

Solo si se acercan, comienzan a fusionarse como pequeñas gotas de agua. Para controlar la distancia a la que comienzan a fusionarse, usa la propiedad de espaciado en UIGlassContainerEffect.

Al animar en un marco superpuesto, las vistas de transparencia se combinan en una sola. Para dividirla en varios elementos, primero agrégalas a la misma posición sin animación. Luego, configura la animación para que aparezcan separadas.

UIGlassContainerEffect no solo habilita animaciones. Impone una adaptación uniforme. La transparencia se adapta dinámicamente al fondo, y mantiene una apariencia consistente.

Repasamos los componentes y materiales de UIKit actualizados en Liquid Glass. UIKit te ofrece todas las herramientas que necesitas para actualizar tu app al nuevo diseño. A partir de aquí, comienza a crear tu app con Xcode 26. Gran parte del nuevo diseño funcionará en tu app de inmediato. Revisa tu app pantalla por pantalla e identifica qué vistas se destacan.

Si tienes controles personalizados, elige si los controles UIKit estándar con una buena opción. Y por último, decide cómo puedes hacer que tus casos de uso especiales se destaquen con Liquid Glass.

Ansío probar tu app luego de que adoptes el nuevo sistema de diseño. ¡Gracias por tu atención!