Barra de herramientas vertical en iPhone Duo: cómo se mueven las barras al borde

Vuelve a compilar tu app con el SDK de iOS 27.1, ejecútala en iPhone Duo y verás que la barra de navegación y la barra de herramientas ya no están arriba y abajo. Ahora se sitúan en una columna a lo largo de un lado de la pantalla. Esta barra de herramientas vertical de iPhone Duo, que Apple llama barra vertical, es el mayor cambio visual que reciben la mayoría de las apps en el nuevo dispositivo, y casi todo ocurre automáticamente.

Automático no significa gratis. Una barra vertical es estrecha, tiene un ancho fijo y comparte su borde con la interfaz del sistema. Esta guía explica cuándo pasan las barras a vertical, cómo preparar tus elementos, cómo controlar el desbordamiento y el orden, y cuándo desactivarla. Se basa en el Tech Talk de Apple Raise the bar with iPhone Duo, la documentación de Apple y publicaciones del desarrollador iOS @sarunw. Estas API son nuevas en iOS 27.0 y 27.1, y los detalles pueden cambiar entre versiones.

¿Qué es la barra vertical de iPhone Duo?

La barra vertical es una única franja a lo largo de un borde lateral que reúne todo lo que antes se repartía entre la parte superior y la inferior de la pantalla. Como explica @sarunw, junta las Live Activities, la información de estado y los elementos de navegación y de la barra de herramientas, que comparten todo el espacio a lo largo de un mismo borde.

Apple la describe como los controles de la barra de navegación, de la barra de herramientas y de la barra de pestañas compartiendo una región que se gira 90 grados hasta formar una pila vertical. La barra de estado cambia de eje para acompañarla, y las notas de Blake Crosley sobre la charla de diseño de Apple describen cómo la Dynamic Island se expande en vertical cuando llegan Live Activities. La documentación de Apple dice que, cuando la barra aparece o desaparece, el contenido se recoloca y se añade o se elimina un margen del área segura inicial o final para la barra. Por eso los márgenes horizontales del área segura y los márgenes de contenido son tan importantes en este dispositivo.

La activas compilando con el SDK más reciente. La charla de Apple Prepare your app for iPhone Duo indica que, con el SDK de iOS 27.1, los botones estándar de navegación y de la barra de herramientas se disponen en vertical bajo la barra de estado.

¿Cuándo pasa a vertical la barra de herramientas en iPhone Duo?

Que veas o no una barra vertical depende de la pantalla, la orientación y dónde está tu contenedor.

La regla detrás de las filas de la vista dividida es sencilla: una barra solo pasa a vertical cuando su contenedor está junto al borde de la pantalla. Como señala @sarunw, la columna de detalle de la vista dividida recibe una y las demás columnas siguen siendo horizontales. El Tech Talk de Apple añade que las sheets colocadas con preferredPlacement reciben una barra vertical en el lado derecho, pero no en el izquierdo. La pantalla interior informa las mismas size classes en vertical y en horizontal, así que la barra es una de las pocas cosas que cambian al girarla. Nuestra guía sobre las size classes de iPhone Duo cubre el resto.

¿Qué contenedores cuentan? En SwiftUI, Apple combina el modificador toolbar con NavigationStack o NavigationSplitView. En UIKit, es preferible usar UINavigationController y UITabBarController, que gestionan sus propias barras.

NavigationStack {
    ContentView()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button("Share", systemImage: "square.and.arrow.up") { share() }
            }
        }
}

Nada en este ejemplo es específico de iPhone Duo. Compilado con el SDK de iOS 27.1, el elemento de la barra inferior pasa a la barra vertical donde el contexto lo permite.

¿Por qué la barra vertical favorece los símbolos frente a los títulos?

Una barra horizontal tiene una altura fija y puede crecer a lo ancho tanto como necesiten sus etiquetas. Una barra vertical invierte eso: Apple describe un ancho fijo y una altura flexible para los elementos. Un título largo no tiene adónde ir, así que la barra favorece los elementos que solo muestran un símbolo.

No eliges una representación distinta para cada diseño. Das a cada elemento un icono y un título, y el sistema decide. Según el Tech Talk de Apple, los elementos con icono pasan a vertical y los elementos solo de texto se quedan en horizontal, mientras que los menús de desbordamiento muestran tanto el título como el icono. Por eso funciona el atajo de @sarunw: si das a los elementos de la barra de herramientas icono y título, probablemente ya estés listo para iPhone Duo. Proporciona siempre el título, incluso en un elemento que solo muestra un símbolo, porque el sistema lo usa en los menús de desbordamiento y en las formas expandidas.

Las vistas personalizadas requieren más cuidado. @sarunw señala que un panel personalizado que muestra un icono y un título funciona en horizontal, pero en una barra vertical hay que ocultar los títulos o el panel queda aplastado en el ancho fijo. El valor de entorno toolbarVerticalEdge de Apple indica a una vista personalizada cuándo está en ese contexto:

struct FilterPanel: View {
    @Environment(\.toolbarVerticalEdge) private var toolbarVerticalEdge

    var body: some View {
        if toolbarVerticalEdge == nil {
            Label("Filters", systemImage: "line.3.horizontal.decrease")
        } else {
            Image(systemName: "line.3.horizontal.decrease")
                .accessibilityLabel("Filters")
        }
    }
}

El valor es un HorizontalEdge? y es nuevo en iOS 27.1. Apple lo documenta como el borde preferido del sistema para la barra vertical, independientemente de si hay una barra vertical visible en ese momento, y nil donde nunca se usa una barra vertical. En UIKit, lee traitCollection.verticalBarEdge, que devuelve un valor no especificado en esos contextos.

Algunos elementos nunca deberían pasar a vertical. Un botón de carrito que muestra un precio transmite información en su texto. El Tech Talk de Apple muestra un modificador axisBehavior para estos casos, con .horizontalOnly y .verticalPreferred como los valores que aparecen en pantalla.

¿Cómo controlo el desbordamiento con visibilityPriority?

La barra vertical se queda sin espacio antes que una horizontal, sobre todo en la pantalla exterior en horizontal o cuando el teclado o Picture in Picture compiten por el espacio. Cuando eso ocurre, los elementos pasan a un menú de desbordamiento. Por defecto, según Apple, los elementos se desbordan de abajo arriba.

Para mantener visible un elemento importante, sube su prioridad con .visibilityPriority, que Apple documenta para iOS 27.0. Los elementos de menor prioridad pasan antes al desbordamiento.

.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button("Archive", systemImage: "archivebox") { archive() }
    }
    ToolbarItem(placement: .bottomBar) {
        Button("Compose", systemImage: "square.and.pencil") { compose() }
    }
    .visibilityPriority(.high)
}

En este ejemplo, Archive pasa al desbordamiento antes que Compose. UIKit usa la misma idea con item.visibilityPriority = .high, según el Tech Talk. Apple sugiere definir primero las prioridades de los grupos y después las de los elementos que contienen. También sugiere que las acciones frecuentes, como Compose, y los elementos con insignia o de estado sean los que permanezcan visibles más tiempo.

Si tienes tu propio menú «más», intégralo en el del sistema. Apple muestra ToolbarOverflowMenu en SwiftUI y navigationItem.additionalOverflowItems en UIKit, y pide reservar el símbolo de puntos suspensivos para el desbordamiento. Cuando una barra de pestañas y una barra de herramientas compiten, toolbarVerticalCompressionBehavior(_:) en SwiftUI y verticalBarCompressionBehavior en UIKit deciden cuál se comprime primero. Por defecto, lo hace la barra de herramientas.

¿Cómo fijo Done y ordeno elementos con topBarPinnedTrailing?

El orden importa en una barra vertical porque la parte superior es el lugar más fácil de encontrar. La recomendación de Apple es reservar la parte superior para la navegación principal, como Atrás o Cerrar, seguida de acciones destacadas como Done. Los controladores de navegación añaden Atrás automáticamente. Para un botón Cerrar personalizado en SwiftUI, Apple usa ToolbarItem(placement: .cancellationAction).

Para la acción destacada, usa .topBarPinnedTrailing. Apple lo documenta como disponible desde iOS 27.0, y @sarunw señala que mantiene el elemento cerca de la parte superior de la barra vertical.

.toolbar {
    ToolbarItem(placement: .cancellationAction) {
        Button("Cancel", systemImage: "xmark") { dismiss() }
    }
    ToolbarItem(placement: .topBarPinnedTrailing) {
        Button("Done", systemImage: "checkmark") { save() }
    }
}

Los elementos fijados se resisten a moverse: la documentación de Apple dice que solo pasan al menú de desbordamiento cuando la búsqueda está activa y no hay espacio suficiente. El equivalente en UIKit del Tech Talk es navigationItem.pinnedTrailingGroup, asignado a un UIBarButtonItemGroup.

¿Cómo desactivo la barra vertical en iPhone Duo?

No todas las apps necesitan una barra vertical. El ejemplo de Apple es Calculadora, un diseño de una sola página con el peso en la parte inferior, donde el espacio horizontal es valioso. Su documentación también menciona un reproductor de vídeo a pantalla completa con controles en la barra de herramientas. Para esos casos, toolbarVerticalBehavior(_:) de SwiftUI, nuevo en iOS 27.1, vuelve a las barras horizontales estándar arriba y abajo.

NavigationStack {
    CalculatorView()
        .toolbarVerticalBehavior(.disabled)
}

final class CalculatorViewController: UIViewController {
    override var preferredVerticalBarBehavior: UIVerticalBarBehavior {
        .disabled
    }
}

El primer ejemplo es SwiftUI y el segundo UIKit. Ambos proceden del Tech Talk y de la documentación de Apple, y ambos usan automático por defecto. En SwiftUI, el comportamiento lo resuelve el contenedor: un NavigationStack usa su vista superior, un TabView la pestaña seleccionada y un NavigationSplitView la columna más al final.

Apple pide que lo trates como una decisión estable. No lo alternes a medida que los usuarios navegan ni cuando cambia el estado de una sola vista. Si solo quieres ocultar las barras en una pantalla, usa toolbarVisibility(_:for:). Y ten en cuenta que un desarrollador informó en los foros de Apple de que un elemento aparecía brevemente en la barra vertical durante el cierre de una presentación a pantalla completa a pesar de .disabled, así que prueba las transiciones.

¿Por qué las barras personalizadas y los diseños RTL no mueven la barra?

Dos comportamientos sorprenden a los desarrolladores. Primero, las barras personalizadas se quedan donde están. @sarunw señala que, si creas tu propia UIToolbar, UINavigationBar o UITabBar, iPhone Duo no moverá esos elementos: el sistema solo mueve las barras que gestiona él. El Tech Talk de Apple dice lo mismo y recomienda contenedores gestionados por el sistema. Si mantienes una barra personalizada, colócala tú usando verticalBarEdge o toolbarVerticalEdge junto con los márgenes del área segura.

Segundo, los idiomas de derecha a izquierda no invierten la barra. La barra vertical sigue al hardware, no a la dirección de lectura, y se queda en el mismo lado del dispositivo en RTL; tu contenido se adapta a su alrededor. No reflejes la interfaz personalizada basándote solo en la dirección de diseño. Lee el borde que informa el sistema.

Algunos detalles menores de la charla de Apple: las barras verticales no tienen efecto de borde de desplazamiento por defecto, reciben un fondo cuando Reducir transparencia está activado y los espaciadores flexibles se reducen a cero en el eje vertical. No añadas espaciado extra para ninguna de las dos orientaciones.

Puntos clave

• Vuelve a compilar con el SDK de iOS 27.1 y las barras del sistema pasarán a vertical en la pantalla exterior y en la pantalla interior en horizontal. La pantalla interior en vertical sigue siendo horizontal.
• Solo pasan a vertical las barras junto al borde de la pantalla: la columna de detalle de la vista dividida recibe una, las demás columnas no.
• Da a cada elemento un icono y un título, ya que el ancho fijo de la barra favorece los símbolos.
• Usa .visibilityPriority(.high) para las acciones que deben sobrevivir al desbordamiento y .topBarPinnedTrailing para Done.
• Desactívala con .toolbarVerticalBehavior(.disabled) o preferredVerticalBarBehavior solo en diseños como una calculadora o un reproductor de vídeo.
• Las instancias personalizadas de UIToolbar y UINavigationBar no se mueven, y la barra ignora RTL; lee toolbarVerticalEdge o verticalBarEdge en su lugar.

Cuando tus barras estén en orden, alinea el contenido con el nuevo borde siguiendo nuestra guía sobre áreas seguras y márgenes de contenido en iPhone Duo y después recorre la checklist completa para preparar tu app para iPhone Duo. Para ver apps que ya sacan el máximo partido al dispositivo, visita Built for the fold.