Área segura y márgenes de contenido en iPhone Duo: guía para desarrolladores

Durante años, el área segura del iPhone fue sobre todo un problema de arriba y abajo: el notch o la Dynamic Island arriba, el indicador de inicio abajo. El área segura de iPhone Duo es diferente. La navegación, los elementos de la barra de herramientas, la información de estado y las Live Activities pueden compartir una barra vertical en el lateral de la pantalla, así que los insets izquierdo y derecho a menudo no son iguales. Esta guía explica qué ha cambiado, qué API usar en SwiftUI y UIKit, y cómo revisar tu diseño antes de publicar.

Todo lo que aparece aquí procede de los Tech Talks de Apple sobre iPhone Duo, de la documentación de Apple y de respuestas en los foros de desarrolladores, además de publicaciones del desarrollador de iOS @sarunw. No hemos probado estas API en hardware. La mayoría llegaron con iOS 27.1 y Xcode 27.1, así que los detalles aún pueden cambiar entre versiones.

¿Por qué el área segura de iPhone Duo es desigual?

En iPhone Duo, muchos controles pasan de la parte superior e inferior de la pantalla al lateral. El Tech Talk "Design for iPhone Duo" de Apple lo dice claramente: los controles "se sitúan a lo largo del lateral del dispositivo" y "la mayor parte del contenido necesita un desplazamiento para no quedar oculto tras los controles". La barra vertical se trata en detalle en nuestra guía sobre la barra de herramientas vertical de iPhone Duo.

Ese desplazamiento es el inset horizontal del área segura. En Prepare your app for iPhone Duo, Apple dice que las áreas seguras son "a menudo asimétricas", sobre todo en iPhone Duo, donde pueden aparecer botones verticales en el lado izquierdo en horizontal y en la multitarea Split View. En Split View, el borde opuesto también puede llevar los controles de otra app, así que importan ambos lados.

La barra vertical sigue al hardware, no a la dirección de lectura. En los idiomas de derecha a izquierda, se queda en el mismo lado del dispositivo, así que no asocies "el lado de la barra" con leading o trailing. Lee el inset real de cada borde.

¿Cómo gestiono los insets horizontales del área segura?

La regla de Apple es breve: "Evita suponer que los insets de lados opuestos son iguales." Coloca el contenido principal dentro del área segura, deja que los fondos se extiendan por debajo y calcula los tamaños a partir del rectángulo con insets, no a partir de un solo lado.

SwiftUI ya coloca el contenido dentro del área segura por defecto. En UIKit, el Tech Talk de Apple muestra el error habitual y la solución:

// Evita: supone que los insets izquierdo y derecho son iguales
let width = view.bounds.width - view.safeAreaInsets.left * 2

// Gestiona cada lado por separado
let width = view.bounds.inset(by: view.safeAreaInsets).width

La primera línea duplica el inset izquierdo, lo cual es incorrecto siempre que la barra esté solo en un lado. La segunda línea resta cada borde por separado, así que funciona en cualquier dispositivo y en cualquier postura.

Para los fondos, Apple recomienda .ignoresSafeArea() en SwiftUI y dimensionar la vista de fondo a view.bounds en UIKit. La charla "Design for iPhone Duo" también sugiere una combinación: "una imagen de fondo o una cabecera a todo lo ancho con contenido principal desplazable con insets", siempre que todos los elementos interactivos queden dentro de la zona con insets.

¿Tengo que recortar el contenido desplazable bajo la barra vertical?

No. En los foros de desarrolladores, un ingeniero de Apple explicó que el lado con la barra tiene un inset del área segura que "se convertirá automáticamente en un content inset del scroll view", así que todo el contenido sigue siendo accesible. No lo recortes manualmente.

¿Qué son los márgenes desiguales en iPhone Duo?

Las áreas seguras te dicen dónde está la interfaz del sistema. Los márgenes te dicen a qué distancia del borde de su contenedor debe estar tu contenido. En iPhone Duo, ambos pueden variar según el lado.

Según @sarunw, iPhone Duo tiene "20 puntos en un lado y 0 junto a la barra". Eso coincide con la documentación de Apple para la nueva guía de márgenes del contenedor, que dice que los márgenes de diseño del sistema "van de 16 a 20 puntos en iPhone" y que en iPhone Duo "el margen también puede ser asimétrico, aplicando valores distintos en cada lado del dispositivo junto a una barra vertical". El Tech Talk de Apple explica el porqué: los márgenes asimétricos permiten que el contenido principal "se acerque más a los botones verticales y a la barra de estado, conservando el margen en el lado opuesto".

Los valores exactos en puntos proceden de la observación de un desarrollador, no de una especificación de Apple. La pauta de Apple es leer o aplicar la guía "en lugar de escribir estos valores en tu diseño".

¿Cómo uso .contentMargins(for: .container) en SwiftUI?

iOS 27.1 añade contentMargins(for:edges:alignment:), un modificador que aplica a una vista los márgenes de una ContentMarginGuide. SwiftUI ofrece una guía, container, descrita como "los márgenes del contenedor en el que está la vista". El parámetro edges abarca por defecto todos los bordes, y alignment es opcional.

Este es el ejemplo de la documentación de Apple. Alinea una cuadrícula con los márgenes horizontales del sistema:

NavigationStack {
    AlbumGrid()
        .contentMargins(for: .container, edges: .horizontal)
}

Los bordes que excluyas no cambian, aunque la guía tenga un valor para ellos. Eso hace que .horizontal encaje bien en iPhone Duo, donde los márgenes horizontales son los que varían.

Cuando una vista no ocupa el tamaño propuesto, alignment la coloca dentro de los márgenes. La documentación de Apple usa un botón de redactar situado en la esquina inferior final de los márgenes de su contenedor:

ZStack {
    MessageList()
    ComposeButton()
        .contentMargins(
            for: .container, alignment: .bottomTrailing)
}

Es un modificador distinto de los anteriores contentMargins(_:for:) y contentMargins(_:_:for:), que fijan una longitud para una ubicación como el contenido desplazable. El nuevo recibe una guía en lugar de un número, así que el valor puede cambiar según el dispositivo, el contenedor y la postura.

Leer los márgenes desde GeometryProxy

Si distribuyes las vistas manualmente, GeometryProxy incorpora contentMargins(for:edges:), que devuelve EdgeInsets. Está junto al ya existente safeAreaInsets:

GeometryReader { proxy in
    let margins = proxy.contentMargins(for: .container, edges: .horizontal)
    let safeArea = proxy.safeAreaInsets
    // margins.leading y margins.trailing pueden diferir en iPhone Duo.
    CustomCanvas(leading: margins.leading, trailing: margins.trailing)
}

CustomCanvas representa tu propia vista. La idea es leer ambos bordes por separado en lugar de suponer un único valor.

¿Cómo funcionan los márgenes de diseño en UIKit en iPhone Duo?

UIKit ya tiene márgenes de diseño: layoutMargins, directionalLayoutMargins y layoutMarginsGuide. El Tech Talk de Apple dice que son asimétricos en iPhone Duo, igual que las áreas seguras. Anclar el contenido a la guía de márgenes de la vista raíz de un view controller recoge esos valores sin esfuerzo.

Hay un cambio que conviene conocer. En un hilo de los foros sobre márgenes que parecían rotos, un ingeniero de Apple explicó que "en iOS 27.1, los márgenes de diseño por defecto de una UIView pasan a ser cero en iPhone Duo", y que el cambio llega a otros dispositivos en iOS 27.2. Un view controller sigue dando a su vista raíz systemMinimumLayoutMargins. Para heredarlos en una subvista, establece preservesSuperviewLayoutMargins en true.

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

// Una subvista personalizada que debe heredar los márgenes del view controller
cardView.preservesSuperviewLayoutMargins = true

Para el contenido de celdas personalizadas, el mismo ingeniero sugirió leer los directionalLayoutMargins preferidos de UIListContentConfiguration.cell() en lugar de depender del valor por defecto de UIView. Si tus celdas pierden de repente su relleno en iPhone Duo, revisa esto primero.

¿Cómo afecta la barra vertical a las apps compiladas con SDK antiguos?

Cuánta pantalla usa tu app depende del SDK con el que la compiles. Apple describe tres etapas:

Las apps antiguas siguen funcionando, pero no obtienen la experiencia completa. Compilar con el SDK de iOS 27.1 es cuando los insets y márgenes desiguales empiezan a importar, porque tu contenido llega ahora al borde junto a la barra. Apple también señala que iPhone Duo respeta UIRequiresFullScreen, pero tu app sigue redimensionándose cuando alguien abre o cierra el dispositivo.

La cámara es un caso aparte. En los foros de desarrolladores, Apple sugiere consultar las regiones de oclusión en lugar de ignorar toda el área segura cuando quieres contenido a todo lo ancho. Nuestra guía sobre regiones reservadas y el pliegue cubre esas API.

¿Qué debo revisar antes de publicar?

La pauta de diseño de Apple es "construir tus diseños con márgenes de diseño e insets horizontales del área segura" y evitar "anchos fijos, puntos de corte o cualquier métrica ligada a una pantalla concreta". Eso te da una lista de comprobación breve:

1. Compila con Xcode 27.1 y el SDK de iOS 27.1, y ejecuta tu app en el simulador de iPhone Duo en todas las posturas: cerrado, abierto, vertical y horizontal.
2. Busca en tu código safeAreaInsets.left * 2 y cálculos similares. Sustitúyelos por bounds.inset(by:) o valores por borde.
3. No fijes 16 ni 20 puntos en el código. Aplica .contentMargins(for: .container, edges: .horizontal) en SwiftUI o ancla a layoutMarginsGuide en UIKit.
4. Busca vistas y celdas de UIKit que hayan perdido su relleno porque los márgenes por defecto de UIView ahora son cero en iPhone Duo.
5. Mantén todos los botones y campos de texto dentro del área segura. Deja que solo los fondos y las imágenes decorativas lleguen de borde a borde.
6. Prueba la multitarea Split View, donde los controles de otra app pueden quedar en el borde opuesto.
7. Prueba un idioma de derecha a izquierda. La barra se queda en el mismo lado del dispositivo.

Si estás adaptando una app entera, nuestra lista de comprobación para preparar tu app para iPhone Duo sitúa esto junto a las clases de tamaño, las hojas y la bisagra.

Conclusiones clave

• En iPhone Duo, los controles pueden estar en el lateral, así que los insets horizontales del área segura importan tanto como los de arriba y abajo.
• Nunca supongas que los insets izquierdo y derecho coinciden. Usa bounds.inset(by: safeAreaInsets) o lee cada borde.
• iOS 27.1 añade .contentMargins(for: .container, edges: .horizontal) y GeometryProxy.contentMargins(for:edges:) para márgenes del sistema que pueden ser desiguales junto a una barra vertical.
• En UIKit, ancla a layoutMarginsGuide y ten en cuenta que los márgenes por defecto de UIView son cero en iPhone Duo en iOS 27.1.
• Compila con el SDK de iOS 27.1 para llegar al borde de la pantalla y luego prueba todas las posturas, Split View y los diseños de derecha a izquierda.

A continuación, descubre cómo el sistema mueve las barras al lateral en nuestra guía de la barra de herramientas vertical, o mira apps que ya sacan el máximo partido a la pantalla en Built for the Fold.