iPhone Duo Safe Area und Content Margins: Leitfaden für Entwickler

Jahrelang war die Safe Area des iPhone vor allem ein Thema für oben und unten: Notch oder Dynamic Island oben, der Home-Indikator unten. Die Safe Area des iPhone Duo ist anders. Navigation, Toolbar-Elemente, Statusinformationen und Live Activities können sich eine vertikale Leiste an der Seite des Displays teilen, sodass die linken und rechten Insets oft nicht gleich sind. Dieser Leitfaden erklärt, was sich geändert hat, welche APIs Sie in SwiftUI und UIKit verwenden und wie Sie Ihr Layout vor der Veröffentlichung prüfen.

Alles hier stammt aus Apples Tech Talks zum iPhone Duo, Apples Dokumentation und Antworten in den Entwicklerforen sowie aus Beiträgen des iOS-Entwicklers @sarunw. Wir haben diese APIs nicht selbst auf Hardware getestet. Die meisten kamen mit iOS 27.1 und Xcode 27.1, Details können sich zwischen Releases also noch ändern.

Warum ist die Safe Area des iPhone Duo ungleichmäßig?

Auf dem iPhone Duo wandern viele Steuerelemente vom oberen und unteren Bildschirmrand an die Seite. Apples Tech Talk „Design for iPhone Duo“ sagt es deutlich: Steuerelemente „sind entlang der Seite des Geräts positioniert“, und „die meisten Inhalte brauchen einen Versatz, damit sie nicht hinter den Steuerelementen verborgen sind“. Die vertikale Leiste behandelt unser Leitfaden zur vertikalen Toolbar des iPhone Duo ausführlich.

Dieser Versatz ist der horizontale Safe Area Inset. In Prepare your app for iPhone Duo sagt Apple, Safe Areas seien „oft asymmetrisch“, besonders auf dem iPhone Duo, wo vertikale Schaltflächen im Querformat und im Split-View-Multitasking auf der linken Seite erscheinen können. In Split View kann auch die gegenüberliegende Kante die Steuerelemente einer anderen App tragen, beide Seiten zählen also.

Die vertikale Leiste folgt der Hardware, nicht der Leserichtung. In Rechts-nach-links-Sprachen bleibt sie auf derselben Seite des Geräts, setzen Sie „die Seite mit der Leiste“ also nicht mit leading oder trailing gleich. Lesen Sie den tatsächlichen Inset an jeder Kante aus.

Wie behandle ich horizontale Safe Area Insets?

Apples Regel ist kurz: „Gehen Sie nicht davon aus, dass die Insets gegenüberliegender Seiten gleich sind.“ Platzieren Sie Vordergrundinhalte innerhalb der Safe Area, lassen Sie Hintergründe darunter weiterlaufen, und berechnen Sie Größen aus dem eingerückten Rechteck statt aus einer Seite.

SwiftUI platziert Inhalte standardmäßig bereits innerhalb der Safe Area. Für UIKit zeigt Apples Tech Talk den häufigen Fehler und die Lösung:

// Vermeiden: nimmt an, dass linker und rechter Inset gleich sind
let width = view.bounds.width - view.safeAreaInsets.left * 2

// Jede Seite unabhängig behandeln
let width = view.bounds.inset(by: view.safeAreaInsets).width

Die erste Zeile verdoppelt den linken Inset, was immer dann falsch ist, wenn die Leiste nur auf einer Seite liegt. Die zweite Zeile zieht jede Kante einzeln ab und funktioniert daher auf jedem Gerät und in jeder Haltung.

Für Hintergründe empfiehlt Apple .ignoresSafeArea() in SwiftUI und in UIKit, die Hintergrund-View auf view.bounds zu bemessen. Der Talk „Design for iPhone Duo“ schlägt außerdem eine Mischung vor: „ein Hintergrundbild oder Header in voller Breite mit eingerücktem, scrollbarem Vordergrundinhalt“, solange jedes interaktive Element im eingerückten Bereich bleibt.

Muss ich Scroll-Inhalte unter der vertikalen Leiste abschneiden?

Nein. In den Entwicklerforen erklärte ein Apple-Ingenieur, dass die Seite mit der Leiste einen Safe Area Inset hat, der „automatisch zu einem Content Inset der Scroll View wird“, sodass alle Inhalte erreichbar bleiben. Schneiden Sie sie nicht manuell ab.

Was sind ungleichmäßige Ränder auf dem iPhone Duo?

Safe Areas sagen Ihnen, wo System-UI liegt. Margins sagen Ihnen, wie weit Ihr Inhalt vom Rand seines Containers entfernt sein sollte. Auf dem iPhone Duo können beide je nach Seite unterschiedlich sein.

Laut @sarunw hat das iPhone Duo „20 Punkte auf einer Seite, 0 neben der Leiste“. Das passt zu Apples Dokumentation des neuen Container Margin Guide, nach der die System-Layout-Margins „auf dem iPhone zwischen 16 und 20 Punkten liegen“ und auf dem iPhone Duo „der Rand auch asymmetrisch sein kann, mit unterschiedlichen Werten auf jeder Seite des Geräts, wenn er neben einer vertikalen Leiste liegt“. Apples Tech Talk erklärt, warum: Asymmetrische Ränder lassen Vordergrundinhalte „näher an vertikale Schaltflächen und die Statusleiste heranrücken, während der Rand auf der gegenüberliegenden Seite erhalten bleibt“.

Die genauen Punktwerte stammen aus der Beobachtung eines Entwicklers, nicht aus einer Apple-Spezifikation. Apples Empfehlung lautet, den Guide auszulesen oder anzuwenden, „statt diese Werte in Ihr Layout zu schreiben“.

Wie verwende ich .contentMargins(for: .container) in SwiftUI?

iOS 27.1 ergänzt contentMargins(for:edges:alignment:), einen Modifier, der eine View um einen ContentMarginGuide einrückt. SwiftUI stellt einen Guide bereit, container, beschrieben als „die Ränder des Containers, in dem sich die View befindet“. Der Parameter edges ist standardmäßig auf alle Kanten gesetzt, alignment ist optional.

Dies ist das Beispiel aus Apples Dokumentation. Es richtet ein Grid an den horizontalen Systemrändern aus:

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

Ausgelassene Kanten bleiben unverändert, selbst wenn der Guide einen Wert für sie hat. Das macht .horizontal zur passenden Wahl für das iPhone Duo, wo gerade die horizontalen Ränder variieren.

Füllt eine View ihre vorgeschlagene Größe nicht aus, platziert alignment sie innerhalb der Ränder. Apples Dokumentation verwendet eine Schaltfläche zum Verfassen, die in der unteren nachgestellten Ecke der Containerränder sitzt:

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

Das ist ein anderer Modifier als die älteren contentMargins(_:for:) und contentMargins(_:_:for:), die eine feste Länge für eine Platzierung wie Scroll-Inhalte festlegen. Der neue nimmt einen Guide statt einer Zahl, sodass sich der Wert mit Gerät, Container und Haltung ändern kann.

Die Ränder aus GeometryProxy auslesen

Wenn Sie Views manuell anordnen, erhält GeometryProxy die Methode contentMargins(for:edges:), die EdgeInsets zurückgibt. Sie steht neben dem bestehenden safeAreaInsets:

GeometryReader { proxy in
    let margins = proxy.contentMargins(for: .container, edges: .horizontal)
    let safeArea = proxy.safeAreaInsets
    // margins.leading und margins.trailing können auf dem iPhone Duo abweichen.
    CustomCanvas(leading: margins.leading, trailing: margins.trailing)
}

CustomCanvas ist ein Platzhalter für Ihre eigene View. Entscheidend ist, beide Kanten getrennt auszulesen, statt von einem einzigen Wert auszugehen.

Wie funktionieren Layout Margins in UIKit auf dem iPhone Duo?

UIKit hat bereits Layout Margins: layoutMargins, directionalLayoutMargins und layoutMarginsGuide. Laut Apples Tech Talk sind sie auf dem iPhone Duo asymmetrisch, genau wie Safe Areas. Wer Inhalte am Margins Guide der Root View eines View Controllers verankert, übernimmt diese Werte automatisch.

Eine Änderung sollten Sie kennen. In einem Forenthread über scheinbar defekte Ränder erklärte ein Apple-Ingenieur, dass „in iOS 27.1 die Standard-Layout-Margins einer UIView auf dem iPhone Duo null werden“ und dass die Änderung andere Geräte in iOS 27.2 erreicht. Ein View Controller gibt seiner Root View weiterhin systemMinimumLayoutMargins. Um sie in einer Subview zu erben, setzen Sie preservesSuperviewLayoutMargins auf true.

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

// Eine eigene Subview, die die Ränder des View Controllers erben soll
cardView.preservesSuperviewLayoutMargins = true

Für eigene Zelleninhalte schlug derselbe Ingenieur vor, die bevorzugten directionalLayoutMargins aus UIListContentConfiguration.cell() auszulesen, statt sich auf den UIView-Standard zu verlassen. Wenn Ihre Zellen auf dem iPhone Duo plötzlich ihr Padding verlieren, prüfen Sie das zuerst.

Wie wirkt sich die vertikale Leiste auf Apps mit älteren SDKs aus?

Wie viel vom Display Ihre App nutzt, hängt vom SDK ab, mit dem Sie bauen. Apple beschreibt drei Stufen:

Ältere Apps funktionieren weiter, erhalten aber nicht das volle Erlebnis. Erst beim Bauen mit dem iOS 27.1 SDK werden ungleichmäßige Insets und Ränder relevant, weil Ihr Inhalt dann bis an die Kante neben der Leiste reicht. Apple weist außerdem darauf hin, dass das iPhone Duo UIRequiresFullScreen respektiert, Ihre App aber trotzdem ihre Größe ändert, wenn jemand das Gerät auf- oder zuklappt.

Die Kamera ist ein Sonderfall. In den Entwicklerforen empfiehlt Apple, Occlusion Regions abzufragen, statt die gesamte Safe Area zu ignorieren, wenn Sie Inhalte in voller Breite möchten. Unser Leitfaden zu Reserved Regions und der Faltkante behandelt diese APIs.

Was sollte ich vor der Veröffentlichung prüfen?

Apples Design-Richtlinien empfehlen, „Ihre Layouts mit Layout Margins und horizontalen Safe Area Insets zu bauen“ und „feste Breiten, Breakpoints oder Metriken, die an einen bestimmten Bildschirm gebunden sind“, zu vermeiden. Daraus ergibt sich eine kurze Checkliste:

1. Bauen Sie mit Xcode 27.1 und dem iOS 27.1 SDK, und führen Sie Ihre App dann im iPhone Duo Simulator in jeder Haltung aus: zugeklappt, aufgeklappt, Hochformat und Querformat.
2. Durchsuchen Sie Ihren Code nach safeAreaInsets.left * 2 und ähnlichen Berechnungen. Ersetzen Sie sie durch bounds.inset(by:) oder Werte pro Kante.
3. Codieren Sie 16 oder 20 Punkte nicht fest. Wenden Sie in SwiftUI .contentMargins(for: .container, edges: .horizontal) an oder verankern Sie in UIKit an layoutMarginsGuide.
4. Suchen Sie nach UIKit-Views und -Zellen, die ihr Padding verloren haben, weil die Standardränder von UIView auf dem iPhone Duo jetzt null sind.
5. Halten Sie jede Schaltfläche und jedes Textfeld innerhalb der Safe Area. Lassen Sie nur Hintergründe und dekorative Bilder von Rand zu Rand laufen.
6. Testen Sie Split-View-Multitasking, bei dem die Steuerelemente einer anderen App an der gegenüberliegenden Kante liegen können.
7. Testen Sie eine Rechts-nach-links-Sprache. Die Leiste bleibt auf derselben Seite des Geräts.

Wenn Sie eine ganze App anpassen, stellt unsere Checkliste zur iPhone-Duo-Vorbereitung dies neben Size Classes, Sheets und das Scharnier.

Das Wichtigste in Kürze

• Auf dem iPhone Duo können Steuerelemente an der Seite liegen, horizontale Safe Area Insets sind daher genauso wichtig wie oben und unten.
• Gehen Sie nie davon aus, dass linker und rechter Inset übereinstimmen. Verwenden Sie bounds.inset(by: safeAreaInsets) oder lesen Sie jede Kante aus.
• iOS 27.1 ergänzt .contentMargins(for: .container, edges: .horizontal) und GeometryProxy.contentMargins(for:edges:) für Systemränder, die neben einer vertikalen Leiste ungleichmäßig sein können.
• Verankern Sie in UIKit an layoutMarginsGuide und beachten Sie, dass die Standardränder von UIView auf dem iPhone Duo in iOS 27.1 null sind.
• Bauen Sie mit dem iOS 27.1 SDK, um den Bildschirmrand zu erreichen, und testen Sie dann jede Haltung, Split View und Rechts-nach-links-Layouts.

Lesen Sie als Nächstes in unserem Leitfaden zur vertikalen Toolbar, wie das System Leisten an die Seite verlegt, oder sehen Sie sich auf Built for the Fold Apps an, die das Display bereits voll ausnutzen.