Drehung ins Quer-/Hochformat behandeln mit Size classes in SwiftUI

von @ralfebert · veröffentlicht am 23. Juli 2021

Oft sind Layout-Details abhängig von der Bildschirmgröße und ob das Gerät ins Hoch- oder Querformat gedreht ist. Es wird allerdings davon abgeraten, diese Werte direkt für eine Unterscheidung zu verwenden. Denn so werden oft die Layout-Besonderheiten des iPads wie Split View / Slide Over nicht behandelt. Stattdessen wird die Verwendung der Size Classes empfohlen.

Size classes unterschieden zwischen "viel Platz" (.regular) und "Platz begrenzt" (.compact) jeweils in der horizontalen und vertikalen Richtung.

Übersicht über die Size classes:

↗ Adaptivity and Layout - Human Interface Guidelines

↗ Size Class Reference Guide

Reagieren auf Layoutgrößen mit @Environment in SwiftUI:

struct SizeClassExampleView: View {
    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?

    var body: some View {
        HStack {
            Image(systemName: "square.and.arrow.up")
            if horizontalSizeClass == .regular {
                Text("Share")
            }
        }
    }
}

Beispielprojekt für Size Classes:

↗ SwiftUI-with-Size-Classes

Ansatz Workaround Device Rotation in SwiftUI direkt beobachten:

↗ How to detect device rotation

Stacks horizontal/vertikal ausrichten abhängig von der Size class:

↗ AStack: SwiftUI Adaptive and Accessible Stacks Library