iPhone Duo Reserved Regions: UI von der Faltkante fernhalten

Wenn das iPhone Duo teilweise gefaltet ist, biegt sich die Mitte des inneren Displays. Text, der über den Knick läuft, ist schwer zu lesen, und eine Schaltfläche, die darin landet, ist schwer zu treffen. Auch die äußere und die innere Kamera beanspruchen Platz. Über die Reserved Regions des iPhone Duo teilt das System Ihrer App mit, wo diese Bereiche liegen, damit Sie Ihre eigene UI davon fernhalten können. Dieser Leitfaden behandelt die SwiftUI-API, wann die Faltkante als aktiv gilt, was eine Region enthält und was all das für Spiele bedeutet, die im Tabletop-Modus gespielt werden.

Reserved Regions sind neu in iOS 27.1 und in SwiftUI und UIKit verfügbar. Laut Apples Talk Prepare your app for iPhone Duo benötigen Sie Xcode 27.1 für das Vollbild-Erlebnis auf dem iPhone Duo. Die APIs sind neu, Details können sich also zwischen Releases ändern. Wir haben diesen Beitrag auf Basis von Apples Dokumentation, dem Tech Talk Strike a pose with adaptive layouts on iPhone Duo und Beiträgen des iOS-Entwicklers Sarun Wongpatcharapakorn (@sarunw) geschrieben. Wir haben diese Werte nicht selbst auf Hardware gemessen.

Was sind Reserved Regions auf dem iPhone Duo?

Eine Reserved Region ist ein Bereich Ihrer View, den etwas anderes beansprucht, meist die Hardware des Geräts. Sarun bringt es auf den Punkt: Reserved Regions sagen Ihnen, wo Sie Ihre UI nicht platzieren sollten.

Im Tech Talk nennt Apple drei auf dem iPhone Duo: die äußere Kamera, die innere Kamera, während sie aktiv ist, und die Faltkante. Es gibt sie in zwei Arten.

Die Faltkante ist eine Division, weil sie einen großen Bereich in zwei kleinere teilt. Ihr Inhalt wird dort nicht verdeckt, aber alles, was sie überquert, ist schwer zu benutzen.

Die meisten Apps müssen diese Regionen nicht auslesen. Laut Apples Dokumentation passen sich Framework-Views wie Split Views, Tab Bars, Alerts, Kontextmenüs und Sheets bereits an Faltkante und Kameras an. Sie brauchen diese API für eigene UI: ein schwebendes Steuerelement, ein eigenes Overlay, ein Spiel-HUD oder alles, was Sie mit expliziten Frames oder einem eigenen Layout platzieren. In den Entwicklerforen gab ein Apple-Ingenieur denselben Rat: eingebaute Container bevorzugen, ArrangementView für eigene Layouts mit zwei Views nutzen und Reserved Regions für manuell angeordnete Steuerelemente verwenden.

Wie lese ich Reserved Regions in SwiftUI aus?

Umschließen Sie Ihren Inhalt mit einem GeometryReader und rufen Sie reservedRegions(kind:) auf dem Proxy auf. Diesen Aufruf zeigt Sarun:

GeometryReader { proxy in
    let regions = proxy.reservedRegions(kind: .division)
}

Die vollständige Signatur auf Apples Dokumentationsseite lautet:

func reservedRegions(
    kind: ReservedRegion.Kind,
    options: ReservedRegion.QueryOptions = [],
    layoutDirectionBehavior: LayoutDirectionBehavior = .mirrors
) -> [ReservedRegion]

Sie gibt nur die Regionen zurück, die Ihre View überlappen, mit Frames im Koordinatenraum Ihrer View. Überlappt eine Region Ihre View nur teilweise, kann ihr Frame bei negativen Koordinaten beginnen oder über die Größe Ihrer View hinausreichen.

Der Tech Talk erwähnt außerdem onGeometryChange als weitere Möglichkeit, einen Geometry Proxy zu erhalten. Da ReservedRegion Equatable ist, können Sie die Regionen beobachten und im State speichern. Dies ist unsere Skizze dieses Musters, kein Beispielcode von Apple:

struct GameBoard: View {
    @State private var folds: [ReservedRegion] = []

    var body: some View {
        BoardView(folds: folds)
            .onGeometryChange(for: [ReservedRegion].self) { proxy in
                proxy.reservedRegions(kind: .division)
            } action: { newValue in
                folds = newValue
            }
    }
}

Rufen Sie in UIKit reservedRegions(kind:) auf einer UIView auf und lesen Sie den frame jeder Region:

let regions = view.reservedRegions(kind: .division)
let frames = regions.map(\.frame)

Wenn Sie auf den Scharnierwinkel selbst reagieren müssen statt auf den Platz, den das Scharnier einnimmt, lesen Sie Scharnierzustände des iPhone Duo und onHingeChange.

Wann ist die Division Region der Faltkante aktiv?

Die Faltkante ist nicht immer ein Problem. Wenn das iPhone Duo flach geöffnet ist, ist das Display durchgehend, und Inhalte dürfen die Mitte überqueren. Die Division Region schaltet sich also je nach Haltung ein und aus.

Sarun weist darauf hin, dass reservedRegions standardmäßig nur aktive Regionen zurückgibt und die Division der Faltkante nur aktiv ist, wenn das Gerät gefaltet ist. Apples Dokumentation zu ReservedRegion sagt dasselbe: Ist das iPhone Duo vollständig geöffnet, liefert die Methode keine Division Regions. Die innere Kamera funktioniert genauso, als Occlusion Region, die nur aktiv ist, während die Kamera verwendet wird. Die äußere Kamera ist immer aktiv.

Um auch inaktive Regionen zu erhalten, übergeben Sie .includeInactive:

GeometryReader { proxy in
    let regions = proxy.reservedRegions(
        kind: .division,
        options: .includeInactive)
    let foldIsActive = regions.contains { $0.isActive }
    Text(foldIsActive ? "Folded" : "Flat")
}

Wozu eine inaktive Region? Apple nennt zwei Gründe. Eine inaktive Region hat trotzdem einen Frame, Sie können also Platz dafür lassen und verhindern, dass Ihr Layout springt, wenn jemand das Gerät faltet. Und Sie können daraus grobe Entscheidungen ableiten, etwa eine gerade Anzahl von Grid-Spalten zu bevorzugen, sobald eine Division existiert. Der Tech Talk ergänzt, dass die Region der Faltkante bei flachem Gerät die Breite null hat. Verwenden Sie inaktive Regionen also für solche Entscheidungen, nicht für exakte Abstände.

Was steckt in einer ReservedRegion?

Jede Region ist ein kleiner Wert mit fünf Eigenschaften. Alle sind in Apples Dokumentation für iOS 27.1 aufgeführt.

Drei Details werden leicht übersehen. Erstens ist (0, 0) die obere führende Ecke der View, aus der Sie die Region auslesen, nicht des Bildschirms. Lesen Sie Regionen in derselben View aus, die Ihren Inhalt positioniert, damit die Koordinaten übereinstimmen. Rechnen Sie in einem eigenen Layout von null aus und addieren Sie bounds.origin erst, wenn Sie die einzelnen Subviews platzieren.

Zweitens enthält der Frame die Margins bereits, addieren Sie sie also nicht noch einmal. Drittens werden Frames für Rechts-nach-links-Sprachen standardmäßig gespiegelt. Wenn Ihr Inhalt nicht mit der Layoutrichtung umklappt, übergeben Sie layoutDirectionBehavior: .fixed, um ungespiegelte Frames zu erhalten.

Zur Größenordnung: Saruns Demo des äußeren Displays zeigt zwei aktive Occlusion Regions, eine mit 37 × 37 Punkten bei (399, 29) und eine mit 84 × 170 Punkten bei (382, 0). Sie decken die Kamera und den Statusbereich daneben in der oberen nachgestellten Ecke ab. Betrachten Sie sie als Beispiel aus iOS 27.x, nicht als Konstanten. Lesen Sie die Frames zur Laufzeit aus, denn sie sind relativ zu Ihrer View und können sich zwischen Releases ändern. Die Safe-Area-Seite desselben Problems behandelt Safe Areas und Content Margins auf dem iPhone Duo.

Wie halte ich Schaltflächen und Text aus dem Knick heraus?

Wenn eine Division aktiv ist, halten Sie jede View vollständig auf einer Seite davon. Vergleichen Sie Breite und Höhe des Frames, um zu erkennen, in welche Richtung die Faltkante verläuft, und bemessen Sie Ihre Bereiche dann um sie herum. Diese View ist aus Apples Dokumentation adaptiert:

struct SplitContent: View {
    var body: some View {
        GeometryReader { proxy in
            if let fold = proxy.reservedRegions(kind: .division).first,
               fold.frame.width > fold.frame.height {
                // Wie ein Laptop gefaltet: Bereiche stapeln.
                VStack(spacing: 0) {
                    ScreenView()
                        .frame(height: fold.frame.minY)
                    Color.clear
                        .frame(height: fold.frame.height)
                    ControlsView()
                        .frame(height: proxy.size.height - fold.frame.maxY)
                }
            } else {
                // Flach oder wie ein Buch gefaltet: ein Layout.
                SingleLayout()
            }
        }
    }
}

Der transparente Abstandshalter hat genau die Größe der Division, sodass nichts im Knick landet. Apples vollständiges Beispiel behandelt außerdem die vertikale Faltung im Buchstil mit einem HStack. Das iPhone Duo hat eine Faltkante, .first zu lesen genügt also.

Einige Regeln aus Apples Richtlinien helfen dabei:

• Verschieben Sie nur, was nötig ist. Steuerelemente, die weit springen oder verschwinden, sind schwer wiederzufinden. Setzen Sie auf kleine Anpassungen und verschieben Sie zusammengehörige Steuerelemente gemeinsam.
• Lassen Sie scrollende Inhalte scrollen. Listen und Scroll Views teilen ihre Zeilen standardmäßig nicht um die Faltkante herum, und laut Tech Talk passen sich scrollende Inhalte im Allgemeinen selbst an. Prüfen Sie die Division nur, wenn eine Zeile schwer lesbar oder bedienbar wird.
• Verwenden Sie gerade Spaltenzahlen. In einem Grid teilt sich eine gerade Anzahl von Spalten sauber an der Faltkante.
• Bevorzugen Sie einen Container. Besteht Ihr Bildschirm aus zwei zusammengehörigen Views, hält ArrangementView in SwiftUI sie auf gegenüberliegenden Seiten der Faltkante, ohne dass Sie Regionen selbst auslesen.

Was bedeuten Reserved Regions für das Game Design?

Spiele zeichnen ihre UI meist selbst, das System kann sie also nicht für Sie verschieben. Ein Lebensbalken, ein Feuerknopf oder ein Punktestand, der die Faltkante überquert, ist genau der eigene Inhalt, den Sie laut Apple prüfen sollten.

Die Tabletop-Haltung, wie ein Laptop gefaltet und auf einen Tisch gestellt, verändert die Layout-Frage. Apples Design-Richtlinien besagen, wie Designer Blake Crosley zusammenfasst, dass sich der obere Bereich gut für Inhalte eignet, die man aus der Entfernung betrachtet, und der untere Bereich für interaktive Steuerelemente. Apples Richtlinien verlangen von Spielen außerdem, den Bildschirm auszufüllen, wenn sich die Haltung ändert, eine Änderung des Seitenverhältnisses dem Letterboxing vorzuziehen und Text- und Steuerelementgrößen beim Skalieren konsistent zu halten.

Mehrere Spiele auf AppleDuo sind um genau diese Teilung herum gebaut. In Battlefleet Duo liegt Ihre Flotte auf dem unteren Bildschirm, während die gegnerischen Gewässer aufrecht stehen, und zwei Spieler können sich über die Faltkante hinweg gegenübersitzen. Greens: Mini-golf faltet sich wie ein Laptop: Sie putten auf der unteren Hälfte, und die aufgestellte Hälfte wird zur Caddie-Kamera. Wir beschreiben diese Spiele anhand ihrer Store-Einträge; welche APIs sie intern verwenden, wissen wir nicht.

Für Ihr eigenes Spiel ergeben sich aus der API einige Muster:

• Behandeln Sie die Faltkante als Naht in Ihrem HUD. Verankern Sie Touch-Steuerelemente auf der flachen Hälfte und Statusanzeigen auf der aufgestellten Hälfte, mit dem Division-Frame als Grenze.
• Halten Sie wichtige Teile des Spielfelds frei. Hintergrundgrafik darf über den Knick laufen, aber kein Ziel, keine Karte und kein Feld, das jemand antippen muss.
• Planen Sie beide Ausrichtungen. Eine Faltung im Buchstil verläuft vertikal, was zu einer Teilung wie zwei Spielern oder zwei Spielbrettern nebeneinander passt. Eine Faltung im Laptopstil verläuft horizontal.
• Vermeiden Sie Layout-Sprünge. Fragen Sie mit .includeInactive ab und reservieren Sie den Platz frühzeitig, wenn eine plötzliche Verschiebung das Spiel stören würde.

Weitere Beispiele finden Sie auf unserer Seite Built for the Fold.

Das Wichtigste in Kürze

• Reserved Regions, neu in iOS 27.1, markieren Bereiche, die Ihre UI nicht nutzen sollte. Auf dem iPhone Duo sind das die äußere Kamera, die innere Kamera, während sie aktiv ist, und die Faltkante.
• Rufen Sie proxy.reservedRegions(kind: .division) für die Faltkante oder .occlusion für die Kameras auf. UIKit hat dieselbe Methode auf UIView.
• Die Division der Faltkante ist nur aktiv, wenn das iPhone Duo teilweise gefaltet ist. Übergeben Sie .includeInactive, um sie auch im flachen Zustand zu erhalten, und prüfen Sie isActive.
• Jede ReservedRegion hat einen frame in den Koordinaten Ihrer View, in Punkten, mit bereits eingerechneten margins. Lesen Sie ihn in der View aus, die Ihren Inhalt platziert.
• Standardcontainer behandeln die Faltkante bereits. Nutzen Sie Reserved Regions für eigene Steuerelemente, Overlays und Spiel-HUDs, und halten Sie alles Antippbare auf einer Seite des Knicks.

Sehen Sie als Nächstes, wie ArrangementView die Faltkante bei Layouts mit zwei Views behandelt, oder gehen Sie die Checkliste zur iPhone-Duo-Vorbereitung Ihrer App durch.