Size classes en iPhone Duo: cerrado, medio abierto y abierto

Si solo tienes tiempo para un cambio antes de que tu app llegue a iPhone Duo, que sean las size classes. El dispositivo tiene dos pantallas y varias posturas, y cada postura le da a tu app una cantidad de espacio distinta. Acertar con las size classes de iPhone Duo es lo que permite que un mismo diseño funcione en todas ellas, sin una sola comprobación del modelo del dispositivo.

La versión corta viene del desarrollador iOS @sarunw: plegado, iPhone Duo es un iPhone; desplegado, es un iPad. Este artículo explica qué significa eso en cada postura, por qué la orientación es la señal equivocada y cómo leer las size classes en SwiftUI y UIKit. Todo se basa en los Tech Talks de Apple, los foros para desarrolladores de Apple e informes de desarrolladores citados. Las API llegan con iOS 27.1 y Xcode 27.1, y los detalles pueden cambiar entre versiones.

¿Qué size classes informa iPhone Duo en cada postura?

Una size class es una descripción aproximada del espacio que tiene tu app: compact o regular, en horizontal y en vertical. En iPhone Duo, la combinación depende de qué pantalla está activa, lo que a su vez depende de cuánto está abierto el dispositivo.

En el Tech Talk de Apple Prepare your app for iPhone Duo, la pantalla exterior «se comporta como otros modelos de iPhone», y la pantalla interior informa regular en ambas direcciones, lo que deja espacio para contenido como barras laterales. El desglose de @sarunw añade la postura medio abierta y ambas orientaciones:

Una nota sobre terminología: @sarunw usa «plegado» para referirse a cerrado. Los Tech Talks de Apple usan «parcialmente plegado, como un libro» para la postura medio abierta. En este artículo, «cerrado» significa que se usa la pantalla exterior y «medio abierto» significa que la pantalla interior está doblada por la bisagra.

Para hacerte una idea de la escala, Pasquale Pillitteri indica que la pantalla exterior mide 466 × 678 puntos y la interior 626 × 890 puntos en vertical. No deberías programar en función de esos números, pero explican por qué la pantalla interior recibe ancho regular: es más ancha que cualquier iPhone en vertical.

¿Por qué usar size classes en lugar de la orientación en iPhone Duo?

La orientación solía ser un atajo razonable para saber si había espacio para una segunda columna. En iPhone Duo no lo es. La recomendación de Apple es directa: evita comprobar la orientación para el diseño y usa size classes. Dos hechos hacen que la orientación no sea fiable aquí.

• La pantalla interior ignora tus orientaciones compatibles. Apple dice que la pantalla interior no respeta las orientaciones de interfaz compatibles de tu app. Si bloqueaste la app en vertical y ramificas según la orientación, obtendrás diseños que nunca planeaste.
• Ambas orientaciones son regular en la pantalla interior. En la pantalla interior, vertical y horizontal informan las mismas size classes, así que una comprobación de orientación no te dice nada sobre cuánto ancho tienes.

Las respuestas de Apple en los foros dicen lo mismo sobre las comprobaciones del dispositivo. En un hilo, un ingeniero de DTS aconsejó no pensar en términos de la pantalla concreta, sino solo del espacio disponible para el diseño. En otro, un evangelista de Apple recomendó evitar la lógica específica del dispositivo, adoptar las size classes y admitir todas las orientaciones. Eso también cubre las apps de iPhone que iOS 27 ahora puede redimensionar en iPad y en iPhone Mirroring en Mac.

Tampoco hay un trait especial para la postura. Ante la pregunta de si UITraitCollection expone el pliegue, un ingeniero de Apple respondió en el hilo 848007 que no existen traits de UITraitCollection de ese tipo. Las size classes dirigen el diseño. Las regiones reservadas y las API de la bisagra se encargan del propio pliegue.

¿Cómo leo las size classes en SwiftUI?

SwiftUI pone ambas size classes en el entorno. Léelas en la vista que toma la decisión de diseño, y SwiftUI vuelve a renderizar esa vista cuando el dispositivo se abre, se cierra o gira. Las claves de entorno son las que Apple muestra en el Tech Talk.

struct LibraryView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @Environment(\.verticalSizeClass) private var verticalSizeClass

    var body: some View {
        if horizontalSizeClass == .regular {
            // Pantalla interior: espacio para una lista y un detalle lado a lado.
            HStack(spacing: 0) {
                AlbumList()
                AlbumDetail()
            }
        } else {
            // Pantalla exterior: una columna, como cualquier iPhone.
            AlbumList()
        }
    }
}

Este ejemplo cambia un diseño de una columna por uno de dos basándose solo en el ancho. Usa la size class vertical para decisiones sobre la altura, por ejemplo ocultar una cabecera grande cuando la pantalla exterior está en horizontal y ambos valores son compact.

Antes de escribir esto a mano, comprueba si un contenedor del sistema ya lo hace. Apple señala que NavigationSplitView se contrae a una sola pila cuando el dispositivo está cerrado y coloca sus columnas en mosaico o superpuestas cuando está abierto, y que TabView se adapta a todas las posturas. Si tu app usa esos contenedores, buena parte del trabajo con size classes ya está hecho.

¿Cómo leo las size classes en UIKit con traitCollection?

En UIKit, las size classes están en la trait collection de cada vista y cada view controller: traitCollection.horizontalSizeClass y traitCollection.verticalSizeClass. Desde iOS 17 puedes registrarte para recibir cambios de traits en lugar de sobrescribir el obsoleto traitCollectionDidChange(_:).

final class LibraryViewController: UIViewController {
    private let detailContainer = UIView()
    private var listWidthConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        registerForTraitChanges(
            [UITraitHorizontalSizeClass.self, UITraitVerticalSizeClass.self]
        ) { (self: Self, _: UITraitCollection) in
            self.updateLayout()
        }
        updateLayout()
    }

    private func updateLayout() {
        let isWide = traitCollection.horizontalSizeClass == .regular
        detailContainer.isHidden = !isWide
        listWidthConstraint.isActive = isWide
    }
}

Aquí el controlador muestra su contenedor de detalle solo cuando el ancho es regular, y se actualiza cada vez que cambia cualquiera de las dos size classes, por ejemplo al abrir el dispositivo. Igual que en SwiftUI, es preferible usar UISplitViewController y UITabBarController cuando encajen, ya que Apple dice que se adaptan al pliegue automáticamente.

Dos hábitos relacionados del mismo Tech Talk ayudan a que los diseños basados en size classes se comporten bien. Sustituye UIScreen.main.scale por traitCollection.displayScale, porque la «pantalla principal» es ambigua en un dispositivo con dos pantallas. Y trata los márgenes del área segura de cada lado de forma independiente, porque en iPhone Duo suelen ser desiguales.

¿Cómo funcionan las size classes dentro de los paneles de ArrangementView?

ArrangementView, nuevo en iOS 27.1, coloca una vista principal y una secundaria lado a lado, apiladas o superpuestas, según el espacio y la postura. La charla de Apple Strike a pose with adaptive layouts on iPhone Duo describe los factores que sopesa para un diseño: las size classes horizontal y vertical de la vista, la relación de aspecto de la vista y si hay alguna región de división activa, como el pliegue.

La conclusión práctica es leer las size classes dentro de cada panel en lugar de suponer que un panel hereda los valores de la ventana. Un panel que recibe la mitad de la pantalla interior tiene mucho menos ancho que la pantalla completa. @sarunw publicó un gráfico de las size classes que recibe cada vista en iPhone Duo; es una imagen, así que consulta la publicación original para ver los valores de cada panel en lugar de fiarte de un resumen aquí.

El colapso también importa. Un ingeniero de DTS de Apple explicó en el hilo 847800 que ArrangementView pasa a mostrar una sola vista cuando su división no se puede satisfacer con la relación de aspecto, la postura o la size class compact actuales. Conserva la vista con mayor .layoutPriority, o la vista principal por defecto. Si tu panel secundario contiene controles esenciales, ofrece a los usuarios otra forma de llegar a ellos cuando el ancho sea compact.

struct EditorView: View {
    var body: some View {
        ArrangementView {
            VideoPreview()
        } secondary: {
            EditingControls()
        }
        .arrangementViewStyle(.split)
    }
}

struct VideoPreview: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass

    var body: some View {
        PreviewCanvas()
            .toolbar {
                if horizontalSizeClass == .compact {
                    // El panel de controles puede estar oculto; ofrécelos desde la barra de herramientas.
                    ToolbarItem { EditingControlsButton() }
                }
            }
    }
}

Las llamadas a ArrangementView y .arrangementViewStyle(.split) se muestran tal como Apple las presenta en el Tech Talk. La alternativa para ancho compact sigue el enfoque sugerido en el mismo hilo del foro.

¿Cómo pruebo las posturas de iPhone Duo en Device Hub de Xcode?

No necesitas el hardware para comprobar las size classes. El Tech Talk de Apple enumera los pasos: elige el simulador de iPhone Duo en Xcode 27.1, ejecuta tu app en Device Hub y usa los botones de control de la parte inferior para abrir, cerrar, girar o plegar el dispositivo. Tanto Device Hub como la experiencia a pantalla completa requieren Xcode 27.1.

Recorre cada fila de la tabla anterior. En cada postura, confirma que:

1. El diseño responde a las size classes, no a la orientación.
2. El texto y los controles se mantienen dentro del área segura en todos los lados, no solo arriba y abajo.
3. Nada importante queda sobre el pliegue cuando el dispositivo está medio abierto.
4. El estado sobrevive a la transición: posición de desplazamiento, texto introducido y selección actual.

Después prueba anchos más estrechos en la pantalla interior. Apple sugiere arrastrar la app por el indicador de inicio hacia un lado de la pantalla para entrar en la multitarea Split View, y luego hacia el otro lado. El ingeniero de DTS del foro destacó en concreto dos apps abiertas en la pantalla interior como una configuración que conviene revisar, ya que tu app recibe entonces menos que el ancho regular completo. @sarunw también señala que Device Hub de Xcode 27.2 puede simular presión de memoria, animaciones a cámara lenta, una sacudida y una caída, lo que ayuda cuando persigues errores que aparecen a mitad de una transición.

La postura medio abierta merece especial atención en los juegos. Una postura que informa ancho regular puede estar dividida físicamente en dos, y eso es lo que aprovechan juegos como Greens Mini Golf, con el green en la mitad inferior y una cámara de caddie en la mitad levantada. Las size classes no te dicen dónde está el pliegue; eso es tarea de las regiones reservadas y de las API de la bisagra.

Puntos clave

• Cerrado, iPhone Duo informa size classes de iPhone: ancho compact con alto regular en vertical, compact en ambas direcciones en horizontal.
• Medio abierta o abierta, la pantalla interior informa ancho regular y alto regular en ambas orientaciones, como un iPad.
• No ramifiques según la orientación ni el modelo del dispositivo. La pantalla interior ignora las orientaciones compatibles, y Apple recomienda adaptarse al espacio disponible.
• Lee horizontalSizeClass y verticalSizeClass del entorno de SwiftUI o de traitCollection en UIKit, y prefiere los contenedores del sistema que ya se adaptan.
• Dentro de ArrangementView, lee las size classes de cada panel y prevé que la división se contraiga a una sola vista.
• Prueba cada postura y Split View en Device Hub con Xcode 27.1.

Las size classes son el primer paso. A continuación, descubre cómo las barras se mueven al lateral de la pantalla en nuestra guía sobre la barra de herramientas vertical de iPhone Duo, recorre la checklist completa para preparar tu app para iPhone Duo o explora juegos que ya sacan partido de la bisagra en Built for the fold.