HandySwiftUI Styles: SwiftUIs Standard-Views aufwerten

Nach 4 Jahren Feinschliff an diesen APIs in meinen eigenen Apps freue ich mich, das erste getaggte Release von HandySwiftUI zu teilen. Dieses Paket enthält verschiedene Hilfsfunktionen und Convenience-APIs, die mir enorm dabei geholfen haben, allein im letzten Jahr 10 Apps auszuliefern. Es bietet Komfortfunktionen für die SwiftUI-Entwicklung, ähnlich wie mein HandySwift-Paket für Foundation.

In diesem Artikel stelle ich eine Auswahl der Styles vor, die sich in meiner täglichen Arbeit an Apps wie TranslateKit, FreemiumKit und CrossCraft am meisten bewährt haben. HandySwiftUI enthält zwar noch viele weitere Hilfsfunktionen, aber diese Styles haben sich in der Praxis immer wieder als besonders wertvoll erwiesen und könnten auch für deine SwiftUI-Projekte nützlich sein.

Primary-, Secondary- und Pulsating-Buttons

Erstelle visuell ansprechende Buttons mit vorgefertigten Styles für verschiedene Anwendungsfälle:

struct ButtonShowcase: View {
   var body: some View {
       VStack(spacing: 20) {
           // Primary Button mit auffälligem Hintergrund
           Button("Get Started") {}
               .buttonStyle(.primary())

           // Secondary Button mit Rahmen
           Button("Learn More") {}
               .buttonStyle(.secondary())

           // Aufmerksamkeitsstarker pulsierender Button
           Button {} label: {
              Label("Updates", systemImage: "bell.fill")
                 .padding(15)
           }
           .buttonStyle(.pulsating(color: .blue, cornerRadius: 20, glowRadius: 8, duration: 2))
       }
   }
}

Horizontale, vertikale und Icon-Width-fixierte Labels

Mehrere Label-Styles für verschiedene Layout-Anforderungen:

struct LabelShowcase: View {
   var body: some View {
       VStack(spacing: 20) {
           // Horizontales Layout mit Icon rechts
           Label("Settings", systemImage: "gear")
               .labelStyle(.horizontal(spacing: 8, iconIsTrailing: true, iconColor: .blue))

           // Feste Icon-Breite für Ausrichtung
           Label("Profile", systemImage: "person")
               .labelStyle(.fixedIconWidth(30, iconColor: .green, titleColor: .primary))

           // Vertikales Stapel-Layout
           Label("Messages", systemImage: "message.fill")
               .labelStyle(.vertical(spacing: 8, iconColor: .blue, iconFont: .title))
       }
   }
}

Alle Parameter sind optional mit sinnvollen Standardwerten, du kannst sie also einfach wie .vertical() verwenden. Du musst nur angeben, was du anpassen möchtest.

Vertikal beschriftete Inhalte

Strukturierte Formulareingaben mit vertikalen Labels, wie sie in der API-Konfiguration von FreemiumKit verwendet werden:

struct APIConfigView: View {
    @State private var keyID = ""
    @State private var apiKey = ""

    var body: some View {
        Form {
            HStack {
                VStack {
                    LabeledContent("Key ID") {
                        TextField("e.g. 2X9R4HXF34", text: $keyID)
                            .textFieldStyle(.roundedBorder)
                    }
                    .labeledContentStyle(.vertical())

                    LabeledContent("API Key") {
                        TextEditor(text: $apiKey)
                            .frame(height: 80)
                            .textFieldStyle(.roundedBorder)
                    }
                    .labeledContentStyle(.vertical())
                }
            }
        }
    }
}

Der .vertical-Style ermöglicht die Anpassung von Ausrichtung (Standard: leading) und Abstand (Standard: 4). Übergib muteLabel: false, wenn du einen eigenen Label-Style verwendest, da Labels standardmäßig automatisch kleiner und grau dargestellt werden.

Zum Beispiel möchte ich im Feature-Lokalisierungsformular von FreemiumKit, dass das vertikale Label eine größere Schrift hat:

LabeledContent {
   LimitedTextField(
      "English \(self.title)",
      text: self.$localizedString.fallback,
      characterLimit: self.characterLimit
   )
   .textFieldStyle(.roundedBorder)
} label: {
   Text("English \(self.title) (\(self.isRequired ? "Required" : "Optional"))")
      .font(.title3)
}
.labeledContentStyle(.vertical(muteLabel: false))

Multi-Platform Toggle-Style

Während SwiftUI einen .checkbox-Toggle-Style bietet, ist dieser nur auf macOS verfügbar. HandySwiftUI ergänzt .checkboxUniversal, das Checkbox-artige Toggles auf allen Plattformen ermöglicht (und auf macOS als .checkbox gerendert wird):

struct ProductRow: View {
    @State private var isEnabled: Bool = true

    var body: some View {
       HStack {
           Toggle("", isOn: $isEnabled)
              .toggleStyle(.checkboxUniversal)

           Text("Pro Monthly")

           Spacer()
       }
    }
}

Das Beispiel stammt aus dem Produkte-Bildschirm von FreemiumKit, der für macOS optimiert ist, aber auch andere Plattformen unterstützt.

Leg noch heute los

Ich hoffe, du findest diese Styles genauso nützlich in deinen Projekten wie ich in meinen. Wenn du Ideen für Verbesserungen oder zusätzliche Styles hast, die der SwiftUI-Community zugutekommen könnten, trage gerne auf GitHub bei:

github.comFlineDev / HandySwiftUIHandy SwiftUI features that didn’t make it into SwiftUI (yet)

Dies ist der letzte von vier Artikeln, die die Features von HandySwiftUI erkunden. Schau dir die vorherigen Artikel über Neue Typen, View Modifier und Extensions an, falls du sie noch nicht gelesen hast!