Estado de la bisagra de iPhone Duo: onHingeChange y UIHingeInteraction

iPhone Duo es el primer iPhone con bisagra, e iOS 27.1 permite que tu app la lea. Puedes saber si el dispositivo está cerrado, parcialmente abierto o totalmente abierto, y seguir el ángulo exacto de la bisagra mientras alguien lo pliega. Esta guía cubre las API de estado de la bisagra de iPhone Duo en SwiftUI y UIKit, cuándo usarlas y cuándo no, con juegos que ya convierten el pliegue en un control.

Los detalles proceden de la documentación de Apple, de los Tech Talks de Apple sobre iPhone Duo y respuestas en los foros, y de una publicación del desarrollador de iOS @sarunw. No hemos probado estas API en hardware. Llegaron con iOS 27.1 y Xcode 27.1, así que los nombres y el comportamiento aún pueden cambiar en versiones posteriores.

¿Qué estados de la bisagra informa iPhone Duo?

Como resume @sarunw, "hay 3 estados de la bisagra: closed, partiallyOpen y fullyOpen". El Tech Talk de Apple Leverage multiple displays and scenes on iPhone Duo describe el mismo "estado de la bisagra de alto nivel" y añade que la API también ofrece "actualizaciones continuas del ángulo de la bisagra".

La documentación de Apple dice que el estado lo "determina el sistema en función del ángulo actual y la orientación del dispositivo". Dicho de otro modo, obtienes un estado sencillo para tomar decisiones y un ángulo preciso para todo lo que deba moverse con suavidad.

El tipo del ángulo depende del framework. En SwiftUI, DeviceHinge.angle es un Angle. En UIKit, UIHinge.angle es un CGFloat en radianes.

¿Cómo uso .onHingeChange en SwiftUI?

La API de SwiftUI es onHingeChange(isEnabled:_:), disponible en iOS 27.1. Su acción recibe dos valores DeviceHingeContext, el anterior y el nuevo. Cada contexto tiene un hinge opcional de tipo DeviceHinge, que expone angle y status.

Este ejemplo de la documentación de Apple guarda la bisagra en el estado y muestra una alternativa cuando no hay bisagra disponible:

@State private var hinge: DeviceHinge? = nil

var body: some View {
    VStack {
        if let hinge {
            AngleDisplayView(angle: hinge.angle)
            StatusDisplayView(status: hinge.status)
        } else {
            ContentUnavailableView(
                "Hinge Unavailable",
                systemImage: "rectangle.split.2x1")
        }
    }
    .onHingeChange { _, newContext in
        hinge = newContext.hinge
    }
}

Un hinge nil significa que el dispositivo no tiene bisagra, así que gestiona siempre ese caso. El parámetro isEnabled vale true por defecto.

Usar los valores anterior y nuevo

Como el closure recibe ambos contextos, puedes detectar una transición, como el momento en que el dispositivo se cierra. Este es un esbozo propio basado solo en los tipos documentados:

.onHingeChange { oldContext, newContext in
    let wasClosed = oldContext.hinge?.status == .closed
    let isClosed = newContext.hinge?.status == .closed
    if !wasClosed && isClosed {
        game.closeLid()
    }
}

game.closeLid() representa tu propio código. Comparar los valores anterior y nuevo evita ejecutar la misma acción dos veces cuando solo cambia el ángulo.

¿Cómo observo la bisagra en UIKit con UIHingeInteraction?

En UIKit, añade una UIHingeInteraction a una vista. Su handler se ejecuta "cuando cambia el estado de la bisagra o cuando la interacción se mueve entre jerarquías". Cuando la vista sale de una jerarquía que ofrece actualizaciones de la bisagra, el hinge de la actualización es nil. El ejemplo de Apple:

override func viewDidLoad() {
    super.viewDidLoad()

    let interaction = UIHingeInteraction { [weak self] _, update in
        guard let self else { return }
        // Un `hinge` nil indica que la interacción ha salido de una
        // jerarquía que ofrece actualizaciones de la bisagra.
        guard let hinge = update.hinge else {
            handleHingeUnavailable()
            return
        }

        updateAngleDisplay(with: hinge.angle)
        updateStatusDisplay(with: hinge.status)
    }

    view.addInteraction(interaction)
}

La interacción también tiene una propiedad isEnabled. No busques información de la bisagra en la trait collection. En los foros de desarrolladores, un ingeniero de Apple confirmó que no hay traits de UITraitCollection para la postura de la bisagra.

¿Debe el estado de la bisagra controlar mi diseño?

No. Esta es la regla más importante. El Tech Talk de Apple dice: "Los datos de la bisagra se observan en vivo y son ideales para impulsar interacciones o efectos. Para el diseño, usa las API de disposición y de regiones."

En los foros, un Technology Evangelist de Apple enumeró cuatro enfoques, del más sencillo al más personalizado:

1. Usa un contenedor del sistema como NavigationSplitView o UISplitViewController.
2. Si no basta, prueba ArrangementView o UIArrangementViewController.
3. Solo si ninguno funciona, coloca las vistas con las API de regiones reservadas.
4. No uses onHingeChange ni la API de interacción con la bisagra para decisiones de diseño.

Para el diseño, la pauta de Apple en los foros es evitar la lógica específica del dispositivo y apoyarse en las clases de tamaño, que cambian cuando el dispositivo se abre o se cierra. Nuestras guías sobre clases de tamaño en iPhone Duo, ArrangementView y regiones reservadas y el pliegue cubren esas herramientas. La región de división del pliegue solo está activa cuando el dispositivo está plegado, así que las regiones reservadas ya te dicen dónde está el pliegue.

Los eventos de la bisagra son para lo que debe reaccionar al movimiento: un efecto de zoom en un fondo de pantalla, una portada que se abre con el pliegue o una mecánica de juego. El Tech Talk de Apple construye una app de guitarra en la que una bisagra parcialmente plegada funciona como una palanca de trémolo:

.onHingeChange { _, context in
    if let hinge = context.hinge, hinge.status == .partiallyOpen {
        pitchBend = calculatePitchBend(angle: hinge.angle)
    }
    else {
        pitchBend = 0
    }
}

La inflexión solo se aplica en el estado .partiallyOpen y se reinicia en los demás. Apple no muestra el cuerpo de calculatePitchBend, así que la correspondencia entre ángulo y efecto queda en tus manos.

¿Cómo diseño para el modo mesa?

Cuando iPhone Duo descansa sobre una mesa "como un portátil con la pantalla interior mirando hacia ti", la mitad inferior es una base estable y la superior es fácil de mirar. El Tech Talk "Design for iPhone Duo" de Apple sugiere que "el contenido multimedia puede ir arriba, mientras que los controles táctiles viven en una base estable abajo".

Hay una pega. Apple añade que un diseño especial para esta postura debe mantener "los mismos controles y la misma jerarquía general que las demás posturas", porque "no quieres vincular una funcionalidad a una postura concreta". Para las apps, eso significa que el modo mesa puede reorganizar el contenido, pero cada función debe seguir funcionando con el dispositivo plano o cerrado.

Los juegos tienen más libertad, porque la postura puede ser la parte divertida. Aun así, ayuda ofrecer una alternativa. Marbles Unhinged, por ejemplo, dice en el App Store que también se juega en cualquier iPhone o iPad con una bisagra en pantalla.

¿Qué juegos convierten la bisagra en un control?

Varios juegos para iPhone Duo ya usan el pliegue como entrada. Las descripciones siguientes proceden de la ficha de cada juego en el App Store y de la cobertura de prensa. No sabemos qué API ha usado internamente cada desarrollador.

Encajan bien con las API. La tapa de Toastie es un cambio de estado a .closed. La rampa de Marbles Unhinged es un ángulo continuo. Greens y Battlefleet Duo son diseños de modo mesa, en los que la mitad superior muestra una vista y la inferior recibe los toques. Duometry necesita el ángulo en bruto.

Puedes explorar más juegos que usan el pliegue en Built for the Fold.

Conclusiones clave

• iPhone Duo informa de tres estados de la bisagra, closed, partiallyOpen y fullyOpen, además de un ángulo continuo. UIKit tiene también unknown.
• Usa .onHingeChange en SwiftUI o UIHingeInteraction en UIKit. Ambos son nuevos en iOS 27.1 y ambos devuelven un hinge nil cuando no hay ninguna disponible.
• El closure de SwiftUI recibe los contextos anterior y nuevo, así que puedes reaccionar a transiciones en lugar de a cada actualización del ángulo.
• Basa el diseño en clases de tamaño, contenedores del sistema, ArrangementView y regiones reservadas. Usa los datos de la bisagra para efectos, interacciones y mecánicas de juego.
• Los diseños de modo mesa deben poner el contenido multimedia arriba y los controles en la base, sin ocultar funciones en otras posturas.

A continuación, aprende a mantener los controles fuera del pliegue en nuestra guía de regiones reservadas, o juega a los juegos de arriba desde Built for the Fold.