Ein BlurView für SwiftUI

Der Blur-Modifier von SwiftUI wird in vielen Fällen ausreichen, um ein Bild, oder eine kompletten View, verschwommen anzuzeigen. Mehr Kontrolle erhält man jedoch, wenn stattdessen ein UIVisualEffectView mit einem UIBlurEffect zum Einsatz kommen. Wir die Namen es vermuten lassen, haben es diese beiden Klassen noch nicht in das SwiftUI-Framework geschafft. Es sind UIKit-Klassen. Zwar können auch diese problemlos verwendet werden, es ist nur etwas mehr Aufwand nötig.
Sollen UIKit-Steuerelemente in SwiftUI verwendet werden, benötigt man meistens eine Struktur, die das Protokoll UIViewRepresentable implementiert. Das Protokoll gibt zwei Methode vor. Um die View zu erstellen, makeUIView und updateView um die View nachträglich zu ändern. Für eine eigenen BlurView benötigen wir updateView nicht, die Methode muss aber implementiert werden. Es ist makeUIView, wo der View erzeugt wird. Im konkreten Beispiel ein UIVisualEffectView in Verbindung mit einem UIBlurEffect. Der Stil des Effektes wird eine Eigenschaft der Struktur BlurView. So kann die Art der Unschärfe später von ausserhalb der Struktur vorgegeben werden.

import SwiftUI

struct BlurView: UIViewRepresentable {

    let style : UIBlurEffect.Style

    func makeUIView(context: Context) -> UIVisualEffectView {

        let view = UIVisualEffectView(effect: UIBlurEffect(style: style))

        return view

    }

    func updateUIView(_ uiView: UIViewType, context: Context) {

        // Hier gibs es nichts zu tun

    }

}

Der BlurView stellt den unter ihm liegenden Bildschirminhalt verschwommen dar, was in den meisten Fällen den Einsatz innerhalb eines ZStack voraussetzt. Als Parameter wird der View ein Stil übergeben mit dem bestimmt wird, in welcher Form die Unschärfe angewendet werden soll. Aktuell stehen im Framework über zwölf verschiedene Einstellungen zur Verfügung.

import SwiftUI

struct BlurViewSample: View {

    @State var isBlured = false

    var body: some View {

        VStack{

            ZStack {

                Image("ProfilImage")

                    .frame(width: 300, height: 300, alignment: .center)

                    .cornerRadius(10)

                if isBlured {

                    BlurView(style: .systemThinMaterialLight)

                }

            }.frame(height: 500, alignment: .center)

            Toggle("Blur", isOn: $isBlured)

                .toggleStyle(SwitchToggleStyle(tint: Color(UIColor.systemBlue)))

            .padding()

        }

    }

}