SwiftUI: Erstellen eines eigenen Edit-Buttons

Im Zuge meiner aktuellen Let’s Code-Reihe auf YouTube entwickelte ich vor kurzem einen eigenen Edit-Button in SwiftUI. Dieser Button hat eine vergleichbare Aufgabe wie die View EditButton aus dem SwiftUI-Framework. Allerdings ist EditButton nicht sonderlich flexibel. Möchte ich beispielsweise einen alternativen Text oder gar Grafiken für den Button verwenden, muss man zu einer eigens kreierten Lösung greifen.

Wie auch ihr eure eigenen Edit-Buttons in SwiftUI erstellen könnt, erläutere ich im Folgenden.

Die Basis: das Environment

Mit die wichtigste Rolle bei einem eigenen Edit-Button auf Basis von SwiftUI spielt das Environment, genauer gesagt der Wert für den Key-Path editMode. Der liefert uns in Form eines Bindings Zugriff auf eine Instanz vom Typ EditMode. Und diese Instanz ist entscheidend! Sie informiert uns einerseits darüber, ob gerade der Edit-Mode einer View aktiv ist oder nicht. Diese Information können wir über die boolesche Property isEditing von EditMode auslesen.

Zum anderen nutzen wir diese EditMode-Instanz, um aktiv und programmatisch eine Änderung des Edit-Modes herbei zu führen. Schließlich soll unser eigener Edit-Button den Edit-Mode ja auch sowohl aktivieren als auch deaktivieren können.

Das Binding, das man über das Environment und den Schlüssel editMode erhält, ist ein Optional. Um darauf zugreifen zu können, muss man es also entpacken.

Im folgenden Listing seht ihr einmal, wie sich anhand der genannten Informationen ein eigener Edit-Button auf Basis von SwiftUI umsetzen lässt. Die Hilfs-Property isEditing dient dazu, auszulesen, ob aktuell der Edit-Mode aktiv ist oder nicht. Diese Information nutze ich bei der Gestaltung des Buttons, um abhängig davon eine andere SF-Symbols Grafik darzustellen; pencil.circle.fill für einen aktiven Edit-Mode, pencil.circle für einen inaktiven.

Bei Betätigung des Buttons invertiere ich den momentanen Zustand des Edit-Mode und weise ihn den Wert des Environment-Bindings zu.

struct CustomEditButton: View {
    @Environment(\.editMode) var editMode
    
    private var isEditing: Bool {
        editMode?.wrappedValue.isEditing ?? false
    }
    
    var body: some View {
        Button(action: {
            withAnimation {
                editMode?.wrappedValue = isEditing ? .inactive : .active
            }
        }, label: {
            Image(systemName: isEditing ? "pencil.circle.fill" : "pencil.circle")
                .resizable()
                .scaledToFit()
                .frame(height: 24)
        })
    }
}

Fazit

Einen eigenen Edit-Button auf Basis von SwiftUI zu erstellen ist erfreulich simpel. Am wichtigsten ist der Zugriff auf das Environment, um in Erfahrung zu bringen, ob der Edit-Mode gerade aktiv ist oder nicht. Außerdem nutzt man das Environment, um den Status des Edit-Mode programmatisch zu überschreiben und ihn so selbst zu aktiveren beziehungsweise zu deaktivieren.

Euer Thomas