Toolbar de SwiftUI en iOS 26: grupos de Liquid Glass, espaciadores y títulos

Vuelve a compilar una app con el SDK de iOS 26 y la barra de herramientas cambia de aspecto antes de que toques una sola línea. Los botones flotan sobre Liquid Glass, los vecinos comparten una cápsula, el campo de búsqueda baja a la parte inferior de la pantalla y el título inline no siempre se queda centrado. Esta guía explica cómo decide la toolbar de SwiftUI en iOS 26 qué elementos van juntos y qué API te permiten tomar el control.

Se basa en las sesiones de Apple de la WWDC25 Build a SwiftUI app with the new design y What's new in SwiftUI, en la documentación de Apple y en publicaciones del desarrollador iOS @sarunw. Las API que se describen aquí son nuevas en iOS 26.0 salvo que se indique lo contrario, y parte del comportamiento ha cambiado entre versiones menores, así que compruébalo en las versiones que admites. La última sección explica qué les ocurre a estas barras de herramientas en iPhone Duo.

¿Cómo agrupa iOS 26 los elementos de la toolbar en Liquid Glass?

En iOS 26, los elementos de la barra de herramientas descansan sobre una superficie de Liquid Glass que flota sobre tu contenido y se adapta a lo que hay debajo. La sesión de Apple expone la regla clave sin rodeos: «Los elementos de la barra de herramientas se agrupan automáticamente». Los elementos contiguos con la misma ubicación comparten una cápsula, mientras que el botón Atrás del sistema conserva la suya.

La agrupación suele ser lo que quieres, porque mantiene la barra tranquila. El problema aparece cuando acciones sin relación acaban en la misma cápsula. Un desarrollador en los foros de Apple comprobó que dos elementos iniciales siempre se fusionaban, incluso con ubicaciones distintas, hasta que un espaciador los separó.

Apple también cambió el aspecto de lo que hay dentro del cristal. Los iconos de la barra de herramientas son monocromos en más sitios, lo que «reduce el ruido visual». Puedes seguir usando tintes, pero el consejo de Apple es «usarlos para transmitir significado, como una llamada a la acción o el siguiente paso, no solo como efecto visual». La sesión también pide que elimines los fondos personalizados u oscurecimientos detrás de los elementos de la barra, porque interfieren con el nuevo scroll edge effect. Ese efecto vuelve a cambiar en iOS 27, como explica nuestra guía sobre el scroll edge effect de SwiftUI.

¿Por qué un botón destacado recibe su propia cápsula?

Una acción principal como Done o Save debe destacar frente a los botones que la rodean. En iOS 26 lo consigues con los nuevos estilos de botón de cristal. La sesión de Apple los presenta como estilos que «llevan Liquid Glass a cualquier botón de tu app»: .glass para un botón estándar y .glassProminent para uno destacado.

En una barra de herramientas, un botón destacado también cambia cómo funciona la agrupación. Como dice @sarunw, «un botón destacado nunca comparte una cápsula de cristal en una toolbar de iOS 26». Añade .buttonStyle(.glassProminent) y el botón sale de su grupo para ocupar su propio círculo tintado.

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
        Button("Done", systemImage: "checkmark") { save() }
            .buttonStyle(.glassProminent)
    }
}

En este ejemplo, Share mantiene un fondo de cristal normal y Done queda aparte en su propia forma tintada. Añade .tint(_:) para elegir el color. La sesión What's new in SwiftUI de Apple muestra la misma idea con .buttonStyle(.borderedProminent) y .tint(.pink) en una acción principal.

Úsalo para una sola acción por barra. Si todo destaca, nada destaca. Ten en cuenta también un informe en los foros según el cual los botones .glassProminent de la barra de herramientas aparecían sin tinte durante aproximadamente un segundo tras navegar en la release candidate de iOS 26.1. Un ingeniero de Apple dijo que «parece un bug», así que comprueba las versiones que admites.

¿Cómo separo grupos de la toolbar con ToolbarSpacer?

Cuando la agrupación automática junta los elementos equivocados, usa ToolbarSpacer. Apple lo describe como un elemento que «crea separaciones visuales en la barra de herramientas entre elementos». Su inicializador es init(_ sizing: SpacerSizing = .flexible, placement: ToolbarItemPlacement = .automatic), y está disponible desde iOS 26.0.

El ejemplo Landmarks de Apple usa espaciadores fijos para dividir la barra de herramientas de su vista de detalle en tres secciones: compartir, después favorito y colecciones, y por último el botón del inspector.

.toolbar {
    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }
    ToolbarSpacer(.fixed)
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    ToolbarSpacer(.fixed)
    ToolbarItem {
        Button("Info", systemImage: "info") { showInspector() }
    }
}

Este ejemplo es una versión resumida del de Apple. Los dos botones relacionados comparten una cápsula, mientras que Share e Info tienen cada uno la suya. Da al espaciador la misma ubicación que los elementos que lo rodean, por ejemplo ToolbarSpacer(.fixed, placement: .topBarLeading). Sin ella, el espaciador usa la ubicación .automatic y puede no quedar entre los elementos que querías, que es justo lo que le pasó al desarrollador del foro.

Para un único elemento que no debería estar sobre cristal, como una foto de perfil, la sesión de Apple muestra .sharedBackgroundVisibility(.hidden) en el ToolbarItem. Eso separa el elemento en su propio grupo sin fondo.

¿Cómo doy su propia cápsula al campo de búsqueda de la barra inferior?

En iPhone, iOS 26 lleva la búsqueda a la parte inferior de la pantalla. La sesión de Apple dice que la búsqueda en la barra de herramientas «coloca el campo en la parte inferior de la pantalla, al alcance de la mano». Para decidir dónde va el campo entre tus propios elementos de la barra inferior, coloca un DefaultToolbarItem del tipo búsqueda.

El problema es que el campo de búsqueda también es un elemento de la barra de herramientas. Como señala @sarunw, en iOS 26 «se fusiona con los botones que tiene al lado». Su solución es poner un ToolbarSpacer fijo a cada lado para darle su propia cápsula:

NavigationStack {
    NoteList()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Filter", systemImage: "line.3.horizontal.decrease") { }
            }
            ToolbarSpacer(.fixed, placement: .bottomBar)
            DefaultToolbarItem(kind: .search, placement: .bottomBar)
            ToolbarSpacer(.fixed, placement: .bottomBar)
            ToolbarItem(placement: .bottomBar) {
                Button("New Note", systemImage: "square.and.pencil") { }
            }
        }
}
.searchable(text: $searchText)

Filter, la búsqueda y New Note quedan ahora en tres cápsulas separadas. El ejemplo al estilo de Mail de la misma sesión de Apple usa en cambio un espaciador flexible antes de la búsqueda, que empuja el filtro al borde inicial, y un espaciador fijo entre la búsqueda y el botón de redactar. Elige la versión que mejor refleje lo relacionados que están los elementos.

Según el tamaño del dispositivo y el número de botones, el sistema puede minimizar el campo hasta convertirlo en un botón. Si la búsqueda no es central en tu app, actívalo con .searchToolbarBehavior(.minimize). El artículo de Natalia Panferova sobre la búsqueda en iOS 26 envuelve estas llamadas en if #available(iOS 26.0, *) para que el mismo código compile para destinos anteriores.

¿Por qué mi título de navegación inline se ha movido al borde inicial?

Otra sorpresa de iOS 26 es el título inline. En iOS 18 se situaba en el centro de la barra de navegación. En iOS 26, como muestra @sarunw, «un título inline solo se mantiene centrado cuando cabe. Añade un elemento más a la toolbar y el título se desplaza al borde inicial».

Los desarrolladores se han topado con esto desde ambos lados. Un desarrollador de UIKit en los foros de Apple vio un control segmentado en la vista de título centrado cuando no había elementos en la barra, y alineado a la izquierda en cuanto apareció un solo elemento final. La respuesta de Apple solo pedía un informe de bug, así que no hay una declaración oficial sobre la regla exacta.

El consejo práctico es diseñar para ambas posiciones:

• Mantén los títulos cortos para que quepan en el centro más a menudo.
• No alinees contenido con un título centrado. Puede que no se quede ahí.
• Cuenta tus elementos. Mover una acción poco usada a un Menu libera espacio en la barra.

¿Qué cambió en los pickers segmentados y los sliders en iOS 26?

Las barras de herramientas no son los únicos controles que cambiaron. La sesión de Apple dice que «los toggles, los pickers segmentados y los sliders ahora se transforman en Liquid Glass durante la interacción». Hay dos detalles que conviene conocer porque llegan sin cambiar el código.

Pickers segmentados. @sarunw describe el picker segmentado de SwiftUI como más limpio en iOS 26, con un segmento seleccionado más redondeado, sin separadores y con el mismo código. Un picker estándar como el del ejemplo de Apple adopta el nuevo aspecto por sí solo:

Picker("View", selection: $selection) {
    Text("Map").tag(ViewMode.map)
    Text("List").tag(ViewMode.list)
}
.pickerStyle(.segmented)

Sliders con pasos. Los sliders ahora admiten marcas, y Apple dice que «aparecen automáticamente al inicializar un slider con un parámetro step». El ejemplo de @sarunw: step: 1 añade una marca por cada valor.

Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
}

Slider(value: $speed, in: 0.5...2, step: 0.25, neutralValue: 1) {
    Text("Playback speed")
}

El primer slider muestra cinco marcas. El segundo usa neutralValue, que Apple añade en iOS 26 para que el relleno de la pista empiece desde un valor intermedio, como la velocidad de reproducción normal. El mismo inicializador también acepta enabledBounds para limitar el rango seleccionable y un closure tick que devuelve un SliderTick para colocar tú las marcas. Si un slider tiene muchos pasos, puede que las marcas sean más de las que quieres, así que revísalo antes de publicar.

¿Cómo se comportan las barras de herramientas de iOS 26 en la barra vertical de iPhone Duo?

En iPhone Duo, las apps compiladas con el SDK de iOS 27.1 reciben una barra vertical en la pantalla exterior y en la pantalla interior en horizontal: los elementos de navegación y de la barra de herramientas pasan a una columna a lo largo de un lateral. Nuestra guía de la barra de herramientas vertical de iPhone Duo lo explica a fondo. Así se trasladan las API de la toolbar de iOS 26, según el Tech Talk de Apple Raise the bar with iPhone Duo.

• Espaciadores. «Por defecto, los espaciadores flexibles tienen tamaño cero en el eje vertical, pero los fijos siguen respetando su tamaño mínimo». Un espaciador flexible que separa grupos en horizontal no hace nada en vertical, mientras que uno fijo sigue separando grupos.
• Agrupación. Cuando las barras superior e inferior se convierten en una sola barra vertical, Apple dice que los elementos restantes «conservan su agrupación original», con un espaciador que separa lo que venía de arriba y de abajo.
• Sin relleno extra. El consejo de Apple es que tu app «no debería crear espaciado adicional, tanto si la barra es horizontal como vertical». No añadas relleno dentro de los elementos para simular un hueco; usa ToolbarSpacer.
• Iconos y títulos. Como señala @sarunw, los elementos con icono pasan a la barra vertical, mientras que los elementos solo de texto se quedan en horizontal. Da a tu botón destacado Done un systemImage además de un título.
• Dónde va Done. Apple pide que coloques las acciones destacadas como Done cerca de la parte superior con ToolbarItem(placement: .topBarPinnedTrailing), nuevo en iOS 27.0. La documentación de Apple dice que los elementos fijados solo pasan al menú de desbordamiento cuando la búsqueda está activa y no hay espacio suficiente.

El Tech Talk no explica cómo se ven .glassProminent ni el campo de búsqueda de la barra inferior en una barra vertical, así que compruébalos en el simulador de iPhone Duo. Las barras de pestañas también pasan al lateral, como explica nuestra guía sobre barras de pestañas y NavigationSplitView en iPhone Duo.

Puntos clave

• iOS 26 agrupa automáticamente los elementos vecinos de la barra de herramientas en cápsulas compartidas de Liquid Glass.
• .buttonStyle(.glassProminent) saca un botón de su grupo y le da su propia forma tintada. Úsalo para una sola acción principal.
• ToolbarSpacer(.fixed) separa grupos y ToolbarSpacer(.flexible) los aleja. Da a los espaciadores la misma ubicación que sus vecinos.
• Rodea DefaultToolbarItem(kind: .search, placement: .bottomBar) con espaciadores fijos para dar a la búsqueda su propia cápsula.
• Los títulos inline solo se quedan centrados cuando caben, así que diseña también para un título en el borde inicial.
• En la barra vertical de iPhone Duo, los espaciadores flexibles se reducen a cero, los fijos se mantienen y los grupos se conservan.

A continuación, descubre cómo pasan estas barras al lateral en el nuevo dispositivo con nuestra guía de la barra de herramientas vertical de iPhone Duo y después recorre la checklist para preparar tu app para iPhone Duo. Para ver apps que ya hacen algo real con la bisagra, visita Built for the fold.