Half Sheets in SwiftUI 4

Neuerungen der WWDC 2022 – Teil 1

Auf der WWDC 2022 stellte Apple wieder eine Vielzahl an Neuerungen für Swift, SwiftUI und Xcode vor. In dieser neuen Artikelreihe werde ich einige dieser neuen Features beleuchten und im Detail vorstellen.

Beginnen möchte ich mit einem meiner Highlights: SwiftUI 4 ermöglicht es, die Größe von Sheets nun individuell anzupassen. Alles, was es dazu braucht, ist ein neuer Modifier namens presentationDetents(_:).

presentationDetents(_:) erwartet ein Set von PresentationDetent-Instanzen. Bei PresentationDetent handelt es sich um eine Structure, mit deren Hilfe man die Größe eines Sheets definiert. Zu diesem Zweck stellt die Structure verschiedene Type Properties und Type Methods zur Verfügung. Dazu gehören unter anderem:

• large: Entspricht der Standardgröße eines Sheets, wie man sie bisher bereits aus SwiftUI kannte.
• medium: Das Sheet nimmt nur die Hälfte des Bildschirmplatzes ein.
• height(_:): Das Sheet entspricht der Größe, die man in Form eines CGFloat-Parameter übergibt.

Ein einfaches Beispiel zum Einsatz des neuen presentationDetents(_:)-Modifiers zeigt das nachfolgende Listing. Der Aufruf des Modifiers erfolgt auf der View, die als Sheet eingeblendet wird. In dem gezeigten Beispiel kommt die Type Property medium zum Einsatz, um das Sheet auf die halbe Größe des Bildschirms zu beschränken.

struct TSHalfSheets: View {
    @State private var showHalfSheet = false
    
    var body: some View {
        Button("Show half sheet") {
            showHalfSheet = true
        }
        .sheet(isPresented: $showHalfSheet) {
            Text("Half sheet")
                .presentationDetents([.medium])
        }
    }
}

Variable Sheet-Größe realisieren

Der presentationDetents(_:)-Modifier ermöglicht es aber auch, mehrere unterschiedliche Größen für ein Sheet zu verwenden, zwischen denen der Nutzer wechseln kann. Dazu übergibt man dem Set-Parameter des Modifiers alle gewünschten Variationen. Der Nutzer kann das Sheet dann gemäß jener verfügbaren Varianten durch Ziehen des Indikators am oberen Rand des Sheets in der Größe verändern.

Ein entsprechendes Beispiel zeigt das nachfolgende Listing. Der Nutzer kann die Sheet-Größe hier zwischen einer fixen Höhe von 100 Punkten, der halben Bildschirmgröße und der Standardgröße wechseln.

struct TSHalfSheets: View {
    @State private var showDynamicSheet = false
    
    var body: some View {
        Button("Show dynamic sheet") {
            showDynamicSheet = true
        }
        .sheet(isPresented: $showDynamicSheet) {
            Text("Dynamic sheet")
                .presentationDetents([.height(100), .medium, .large])
        }
    }
}

Fazit

Die Möglichkeit, Sheets in ihrer Größe anpassen zu können, ist eine sehr gelungene Neuerung in SwiftUI 4. Solche Half Sheets waren bisher nur mit größerem Aufwand möglich, jetzt braucht es nicht mehr als den Aufruf des presentationDetents(_:)-Modifiers. Und der ist sogar so flexibel, dass er mit mehreren unterschiedlichen Größen-Optionen gleichzeitig umgehen kann; ein definitiv mehr als gelungenes neues Feature in SwiftUI 4.

Euer Thomas

Weiterführende Links zum Artikel

• Ergänzendes Video auf YouTube: https://www.youtube.com/watch?v=xBiyGD8iZFI