Barra de pestañas en iPhone Duo: guía de TabView y NavigationSplitView

Ejecuta una app con un TabView o un UITabBarController en iPhone Duo y verás que la barra de pestañas de iPhone Duo ya no es una fila en la parte inferior de la pantalla. Pasa a un lateral, a la misma barra vertical que contiene tus elementos de navegación y de la barra de herramientas. Las vistas divididas también cambian: en un NavigationSplitView, solo una columna recibe esa barra vertical, y un inspector expandido no recibe ninguna.

Esta guía explica qué ocurre con las barras de pestañas, las columnas de la vista dividida y los inspectores, cómo decidir qué barra cede cuando falta espacio y cómo colocar el contenido junto a barras que ya no son simétricas. Para las reglas generales de la barra vertical, como los símbolos, el desbordamiento o cómo desactivarla, consulta nuestra guía de la barra de herramientas vertical en iPhone Duo. Todo lo que sigue procede del Tech Talk de Apple Raise the bar with iPhone Duo, de la documentación de Apple, de un resumen de DTS en los foros de Apple y de publicaciones de @sarunw. Las API son nuevas en iOS 27.0 y 27.1, y los detalles pueden cambiar entre versiones.

¿La barra de pestañas pasa a un lateral en iPhone Duo?

Sí. La charla de Apple Prepare your app for iPhone Duo dice que TabView y UITabBarController se adaptan a todas las posturas, y que las pestañas aparecen en las pantallas interior y exterior, «disponiéndose en vertical cuando corresponde». Eso significa los mismos contextos que las demás barras: la pantalla exterior y la pantalla interior en horizontal. En la pantalla interior en vertical, las barras siguen siendo horizontales.

Apple describe los controles de navegación, de la barra de herramientas y de la barra de pestañas compartiendo una sola región, y sugiere imaginar el diseño girado 90 grados en una pila vertical. Sus ejemplos muestran las tres combinaciones: Notas usa una barra de herramientas, Reloj una barra de pestañas y Fitness ambas. Como lo describe @sarunw, la fila horizontal de pestañas «se convierte en una pila vertical cerca de la parte inferior de la barra». Los elementos de la barra de herramientas ocupan la parte superior, donde las pautas de Apple sitúan Atrás, Cerrar y acciones destacadas como Done.

Lo obtienes al compilar con el SDK de iOS 27.1 y usar el contenedor del sistema. El resumen de un ingeniero de DTS de Apple sobre el laboratorio de grupo de iPhone Duo deja claro que la adaptación está ligada a los contenedores, TabView y UITabBarController, no a barras independientes. Una barra de pestañas personalizada, o una UITabBar que colocas tú, no se moverá. Si necesitas mantener una, colócala con el valor de entorno toolbarVerticalEdge o el trait verticalBarEdge, como explica la guía de la barra de herramientas vertical.

¿Qué elementos de la barra pasan a vertical y cuáles siguen en horizontal?

Las pestañas siguen las mismas reglas que el resto de elementos de la barra. El Tech Talk de Apple lo explica así: los elementos con icono, como los botones de atrás y compartir, cambian su eje a vertical, mientras que los elementos solo de texto, como el botón de editar, se quedan en el eje horizontal. El resumen de @sarunw es el mismo: los elementos con icono, como atrás y compartir, pasan a la barra vertical, y los elementos solo de texto, como Edit, siguen en horizontal.

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button("Share", systemImage: "square.and.arrow.up") { share() }
    }
    ToolbarItem(placement: .secondaryAction) {
        Button("Edit") { isEditing.toggle() }
    }
}

En este ejemplo, Share tiene un símbolo y puede pasar a vertical. Edit solo tiene un título, así que sigue en horizontal. Si quieres Edit en la barra vertical, dale también un símbolo; el resumen de DTS dice que el sistema no presentará en vertical un elemento que solo tenga título. Mantén el título en todos los elementos, porque el sistema lo muestra en los menús de desbordamiento.

Para las pestañas, el mismo consejo se aplica a cada Tab: dale un título y un systemImage, como en Tab("Recents", systemImage: "clock"). Las insignias son una buena forma de conservar información sin añadir texto. La charla de Apple convierte un elemento con texto y símbolo en un símbolo con .badge(7) en SwiftUI o item.badge = .count(7) en UIKit.

¿Cómo elijo si se comprime primero la barra de pestañas o la de herramientas?

Cuando una barra de pestañas y una barra de herramientas comparten la barra vertical, a una de ellas se le acaba antes el espacio, sobre todo en la pantalla exterior en horizontal. La charla de Apple describe dos comportamientos por defecto para dos tipos de apps. En una vista centrada en la navegación, como Podcasts, la barra de herramientas se comprime primero para que los destinos principales sigan accesibles. Ese es el comportamiento por defecto. En una vista orientada a tareas, como la app Juegos, la barra de pestañas se comprime primero para mantener visibles las acciones frecuentes. La barra que cede se contrae en un botón de desbordamiento.

toolbarVerticalCompressionBehavior(_:) de SwiftUI, nuevo en iOS 27.1, define la preferencia para cada vista. En UIKit, asigna verticalBarCompressionBehavior en el navigation item del view controller, también nuevo en iOS 27.1.

TabView {
    Tab("Recents", systemImage: "clock") {
        NavigationStack {
            RecentsView()
                .toolbar {
                    Button("Up", systemImage: "chevron.up") { moveUp() }
                    Button("Down", systemImage: "chevron.down") { moveDown() }
                }
                .toolbarVerticalCompressionBehavior(.prefersToolbarItems)
        }
    }
}

navigationItem.verticalBarCompressionBehavior = .prefersBarItems

El primer ejemplo sigue la documentación de Apple, que usa una app de productividad como Archivos como ejemplo para dar preferencia a los elementos de la barra de herramientas. El segundo es la forma en UIKit del Tech Talk. Los valores difieren ligeramente entre frameworks:

Dentro de la propia barra de herramientas, la prioridad sigue importando. Como señala @sarunw, aplica .visibilityPriority(.high) a los elementos importantes para que sigan visibles cuando hay poco espacio. La guía de la barra de herramientas vertical trata en detalle el orden y el desbordamiento.

¿Puedo mostrar una barra lateral en lugar de una barra de pestañas en la pantalla interior?

Sí. En iPhone, iOS muestra una barra de pestañas en lugar de adaptarse a una barra lateral como hace iPadOS. En la pantalla interior de iPhone Duo, Apple te permite optar por una barra lateral para una navegación más completa. En SwiftUI, usa defaultTabBarPlacement(_:) con el estilo sidebarAdaptable. En UIKit, asigna preferredPlacement en la barra lateral. Ambos están disponibles desde iOS 27.0.

TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab("Favorites", systemImage: "star") { FavoritesView() }
}
.tabViewStyle(.sidebarAdaptable)
.defaultTabBarPlacement(.sidebar)

tabBarController.sidebar.preferredPlacement = .sidebar

La documentación de Apple dice que defaultTabBarPlacement(_:) se aplica donde el estilo se resuelve en una barra lateral o una barra de pestañas, como en iPhone, y que no tiene efecto en iPadOS, donde la barra puede transformarse. En UIKit, la ubicación automática se resuelve en una barra de pestañas en iOS.

Un detalle más sobre TabView: si desactivas la barra vertical con toolbarVerticalBehavior(.disabled), la documentación de Apple dice que un TabView resuelve el comportamiento a partir de la pestaña seleccionada. Mantén la misma decisión en todas las pestañas para que el diseño no salte cuando la gente cambia de una a otra.

¿Qué columna de NavigationSplitView recibe una barra vertical en iPhone Duo?

Solo la columna de detalle. La regla de Apple es que los elementos de la barra de herramientas solo pueden pasar a vertical cuando su contenedor está junto al borde de la pantalla, así que en las vistas divididas solo participa la columna de detalle y los elementos de las demás columnas siguen en horizontal. @sarunw lo resume así: «Una barra solo pasa a vertical cuando su contenedor está junto al borde de la pantalla».

El resumen de DTS detalla la pantalla interior: el sistema presenta las barras en horizontal para la barra lateral o la columna de contenido, y en vertical en el borde final para la columna de detalle. Cuando iPhone Duo está cerrado, NavigationSplitView y UISplitViewController se contraen en una navegación de una sola pila, y cuando está abierto disponen sus columnas en mosaico o superpuestas.

La fila de la pantalla exterior refleja el comportamiento de contracción de Apple y la documentación del inspector; la pila sigue después las reglas de la barra vertical de la pantalla exterior. Como la columna situada más al final también decide toolbarVerticalBehavior en una vista dividida, aplica cualquier desactivación en la vista de la columna de detalle.

NavigationSplitView {
    SidebarList(selection: $selection)
} detail: {
    DetailView(item: selection)
        .toolbar {
            Button("Share", systemImage: "square.and.arrow.up") { share() }
        }
        .inspector(isPresented: $showsInspector) {
            InspectorView(item: selection)
        }
}

Aquí el botón Share está en la columna de detalle, así que es el elemento que puede pasar a vertical. Los elementos de la barra de herramientas que añades a la lista de la barra lateral siguen en horizontal.

¿Por qué un inspector expandido mantiene sus elementos en horizontal?

El Tech Talk de Apple dice que, como las columnas de detalle ya tienen una barra vertical, los inspectores no reciben la suya al expandirse, para evitar confusiones. La versión de @sarunw: la columna de detalle ya tiene una barra vertical, y «una segunda competiría con ella».

El resumen de DTS añade cómo encaja todo. En la pantalla interior, una barra lateral y un inspector pueden coexistir cuando construyes con NavigationSplitView y aplicas inspector(isPresented:content:) a la vista de detalle. El inspector se coordina con el diseño final de la columna de detalle en lugar de añadir una barra. La documentación del inspector de Apple también dice que se presenta como una columna final en una size class horizontal regular y se adapta a una hoja en una compacta, y las respuestas de DTS indican que en la pantalla exterior, o cuando la vista dividida está contraída, aparece como una hoja.

En la práctica, diseña los controles del inspector para una barra horizontal, con títulos donde ayuden. No dependas de la barra vertical para acciones que solo existen en el inspector.

¿Qué size class informa cada columna de NavigationSplitView?

Las size classes de la ventana en iPhone Duo están bien documentadas: ancho compacto en la pantalla exterior, ancho y alto regulares en la pantalla interior, sea cual sea la orientación. Nuestra guía de size classes en iPhone Duo tiene la tabla completa. Las columnas son otra cuestión. @sarunw publicó un gráfico de las size classes de cada columna de NavigationSplitView en iPhone Duo, y la conclusión es que una columna no tiene por qué informar los mismos valores que la ventana.

Así que lee las size classes dentro de la columna que hace el diseño, no a nivel de ventana o de raíz:

struct DetailView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    let item: Item?

    var body: some View {
        if horizontalSizeClass == .regular {
            WideDetailLayout(item: item)
        } else {
            CompactDetailLayout(item: item)
        }
    }
}

Como el valor de entorno se lee dentro de DetailView, refleja los traits propios de la columna. La charla Strike a pose de Apple añade un detalle relacionado para la pantalla interior: en una app con vista dividida como Recordatorios, el sistema mantiene visibles ambas columnas ajustando su ancho a un reparto equilibrado de 50/50. Si construyes paneles tú mismo en lugar de columnas, ArrangementView da a cada panel sus propias size classes de forma similar.

¿Cómo coloco el contenido junto a la barra vertical sin dar por hecho el relleno?

Cuando la columna de detalle tiene una barra vertical en un lado y la barra lateral en el otro, sus márgenes no son iguales en ambos bordes. El consejo de @sarunw es breve: no des por hecho el relleno, porque puede no ser simétrico entre dispositivos y orientaciones; usa layoutMarginsGuide. El Tech Talk de Apple dice que los márgenes de diseño en iPhone Duo son asimétricos, como las áreas seguras, así que el contenido en primer plano puede quedar más cerca de los botones verticales mientras se conserva el margen opuesto.

NSLayoutConstraint.activate([
    headerView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    headerView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    headerView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor)
])

Anclar a layoutMarginsGuide recoge el margen de cada borde por separado, así que no hace falta fijar 16 o 20 puntos en el código. Las barras también se disponen fuera del área segura, y Apple señala que las barras verticales aportan márgenes iniciales y finales en lugar de superiores e inferiores. Para el equivalente en SwiftUI y el conjunto completo de reglas de márgenes, consulta áreas seguras y márgenes de contenido en iPhone Duo.

Puntos clave

• Usa TabView o UITabBarController. Sus pestañas pasan a la barra vertical como una pila cerca de la parte inferior; las barras de pestañas personalizadas no se mueven.
• Da a cada pestaña y a cada elemento de la barra de herramientas un símbolo y un título. Los elementos con icono pasan a vertical; los elementos solo de texto siguen en horizontal.
• Elige qué barra se comprime primero con toolbarVerticalCompressionBehavior o verticalBarCompressionBehavior. Por defecto, lo hace la barra de herramientas.
• En NavigationSplitView, solo la columna de detalle recibe una barra vertical, y un inspector expandido mantiene sus elementos en horizontal.
• Lee las size classes dentro de cada columna y ancla el contenido a layoutMarginsGuide en lugar de dar por hecho un relleno igual.

A continuación, repasa el resto de reglas de la barra vertical en nuestra guía de la barra de herramientas vertical y después mira cómo usan el dispositivo otras apps y juegos en Built for the fold.