Benutzerdefinierte wiederverwendbare Styles in SwiftUI

Ein ansprechendes Design für eine App zu entwicklen, ist keine einfache Aufgabe. Glücklicherweise bietet das SwiftUI-Framework ausreichend Möglichkeiten, die eigenen Ideen umzusetzen. Steuerelemente beispielsweise, können auf verschiedenste Art angepasst werden. Farben, Schriftart, Größe und Abstände sind nur einige der Eigenschaften, die manipuliert werden können. Nötig sind nur die passenden ViewModifier.

Button("Simple Button") { /* Action */ }

    .font(Font.system(size: 20, weight: .bold))

    .frame(maxWidth: .infinity, maxHeight: 45)

    .foregroundColor(.white)

    .background(Color(.systemBlue))

    .cornerRadius(15)

    .padding(10)

Ist das Design gefunden, muss es anschließend nur noch allen Steuerelementen zugewiesen werden. Um die immer gleiche Liste von ViewModifier zu verhindern, ist es dann empfehlenswert, das Design in benutzerdefinierte Style auszulagern. Der eigene Stil für Schaltflächen kann implementiert werden, indem man von der Struktur ButtonStyle erbt. In der neuen Struktur kann anschließend das eigenen Design hinterlegt werden. Das folgende Listing zeigt es beispielhaft an der Struktur CustomButtonStyle.

import SwiftUI

struct CustomButtonStyle : ButtonStyle {

    func makeBody(configuration: Configuration) -> some View {

        configuration.label

            .font(Font.system(size: 20, weight: .bold))

            .frame(maxWidth: .infinity, maxHeight: 45)

            .foregroundColor(.white)

            .background(Color(.systemBlue))

            .cornerRadius(15)

            .padding(10)

    }

}

Statt einer Reihe von ViewModifier kann einem Button anschließend direkt der Stil zugewiesen werden.

Button("Simple Button") { /* Action */ }

    .buttonStyle(CustomButtonStyle())

Der Vorteil dieser Vorgehensweise ist offensichtlich. Das Erscheinungsbild sämtlicher Schaltflächen wird an einer zentralen Stelle verwaltet, immer vorausgesetzt, jedem Button wird der Stil zugewiesen. Änderungen an einer Eigenschaft, beispielsweise der Schriftgröße, müssen nur noch an einer Stelle durchgeführt werden.
Leider ist der gezeigte ButtonStyle nicht flexible. Wird eine Schaltfläche in einer anderen Farbe benötigt, ist das nicht möglich. Allerdings können Stile auch mit zusätzlichen Eigenschaften definiert werden. Bei der Zuweisung stehen dann zusätzliche Parameter zur Verfügung.

import SwiftUI

struct CustomColorButtonStyle : ButtonStyle {

    let backgroundColor: Color

    let foregroundColor: Color

    func makeBody(configuration: Configuration) -> some View {

        configuration.label

            .font(Font.system(size: 20, weight: .bold))

            .frame(maxWidth: .infinity, maxHeight: 45)

            .foregroundColor(foregroundColor)

            .background(backgroundColor)

            .cornerRadius(15)

            .padding(10)

    }

}

Wird dieser Stil verwendet, muss bei der Zuweisen eine Hintergrundfarbe und eine Schriftfarbe angegeben werden. Alle anderen Eigenschaften der Schaltflächen werden weiterhin einheitlich von dem Stil verwaltet.

Button("CustomColorButtonStyle") { /* Action */ }

    .buttonStyle(CustomColorButtonStyle(backgroundColor: .yellow, foregroundColor: .black))

Button("CustomColorButtonStyle") { /* Action */ }

    .buttonStyle(CustomColorButtonStyle(backgroundColor: .purple, foregroundColor: .yellow))

Geschrieben am: 20.11.2020
Technologien: Swift, SwiftUI, macOS, iOS