# SwiftUI: Moderne Interfaces fuer iOS entwickeln

> Umfassende Anleitung zur Erstellung moderner Benutzeroberflaechen mit SwiftUI: deklarative Syntax, Komponenten, Animationen und Best Practices fuer iOS 18.

- Published: 2026-01-05
- Updated: 2026-04-02
- Author: Anthony Fillion-Maillet
- Tags: swiftui, ios, swift, ui, apple
- Reading time: 12 min

---

SwiftUI hat die Interface-Entwicklung auf den Apple-Plattformen grundlegend veraendert. Mit seiner deklarativen Syntax und nativen Integration ermoeglicht das Framework die Entwicklung eleganter Anwendungen mit weniger Code als je zuvor. iOS 18 bringt erhebliche Verbesserungen bei der Performance und neue Funktionen.

> **Why SwiftUI in 2026?**
>
> SwiftUI hat mit iOS 18 seine Reife erreicht und bietet optimiertes Rendering, besseres Speichermanagement und vereinfachte UIKit-Integration. Es ist zum Standard fuer neue iOS-Anwendungen geworden.

## Das Deklarative Paradigma verstehen

Bevor Code geschrieben wird, lohnt es sich zu verstehen, was SwiftUI unterscheidet. Bei UIKit (dem aelteren Framework) musste iOS **Schritt fuer Schritt** angewiesen werden, wie die Oberflaeche aufgebaut wird: "Erstelle ein Label, positioniere es hier, aendere die Farbe bei Beruehrung". Das ist das **imperative** Paradigma.

SwiftUI funktioniert anders: Es wird beschrieben, **was** angezeigt werden soll, und das Framework uebernimmt den Rest. Der Unterschied laesst sich vergleichen mit einer GPS-Navigation, die jede Abbiegung einzeln ansagt (imperativ), gegenueber der einfachen Eingabe des Ziels (deklarativ).

### Die erste View

In SwiftUI ist jedes Interface-Element eine `View`. Eine View ist ein Struct, das beschreibt, was auf dem Bildschirm erscheinen soll. Im Folgenden eine erste Ansicht mit Titel, Untertitel und Button:

```swift
// ContentView.swift
import SwiftUI

// Each screen is a struct that implements the View protocol
struct ContentView: View {

    // The "body" property describes what the view displays
    // "some View" means "a type of View, but Swift figures it out automatically"
    var body: some View {

        // VStack = "Vertical Stack": stacks elements vertically
        // spacing: 20 = 20 points of space between each element
        VStack(spacing: 20) {

            // A simple text with style modifiers
            Text("Welcome to SharpSkill")
                .font(.largeTitle)      // Large title font
                .fontWeight(.bold)      // Bold text

            Text("Prepare for your iOS interviews")
                .font(.subheadline)     // Smaller font
                .foregroundColor(.secondary)  // Gray secondary color

            // Button with an action (closure) and a label
            Button("Get Started") {
                print("Button tapped!")
            }
            .buttonStyle(.borderedProminent)  // Filled blue button style
        }
        .padding()  // Adds margins around the VStack
    }
}
```

Die Struktur ist klar: Die gewuenschten Elemente werden deklariert (Texte, Button), vertikal gestapelt (VStack) und ueber **Modifier** gestylt (`.font()`, `.padding()`).

> **Kernaussage**: In SwiftUI werden keine UI-Objekte "erstellt" -- es wird die gewuenschte Oberflaeche **beschrieben**. SwiftUI kuemmert sich um das Erstellen, Aktualisieren und Entfernen der tatsaechlichen Elemente.

### Modifier: Views transformieren

Modifier sind Methoden, die nach einer View verkettet werden, um sie zu transformieren. Sie funktionieren aehnlich wie Instagram-Filter, die nacheinander angewendet werden. **Die Reihenfolge ist entscheidend**, da jeder Modifier eine neue View erzeugt, die die vorherige umschliesst.

Das folgende Beispiel zeigt, warum die Reihenfolge wichtig ist:

```swift
// ModifiersOrder.swift

// Example 1: padding THEN background
Text("SwiftUI")
    .padding()           // 1. Adds 16pt of space around the text
    .background(.blue)   // 2. Blue background covers text + padding
    .foregroundColor(.white)
// Result: white text on blue rectangle with margins

// Example 2: background THEN padding (reversed order!)
Text("SwiftUI")
    .background(.blue)   // 1. Tight blue background around text only
    .padding()           // 2. Transparent padding around blue background
    .foregroundColor(.white)
// Result: white text on small blue rectangle, surrounded by empty space
```

Der Unterschied: Im ersten Fall liegt das Padding "innerhalb" des Hintergrunds. Im zweiten Fall liegt es "ausserhalb". Subtil, aber entscheidend fuer die Beherrschung von Layouts.

## Interfaces mit Stacks organisieren

SwiftUI bietet drei Haupt-Container fuer die Organisation von Views. Sie lassen sich als Boxen vorstellen, die ihren Inhalt unterschiedlich anordnen.

### VStack, HStack und ZStack

- **VStack** (Vertical Stack): Stapelt Elemente von oben nach unten
- **HStack** (Horizontal Stack): Reiht Elemente von links nach rechts auf
- **ZStack** (Z-axis Stack): Schichtet Elemente uebereinander

Das naechste Beispiel erstellt eine Benutzerprofilkarte mit allen drei Stack-Typen. Das Ziel: Ein Foto mit Verifizierungsabzeichen anzeigen, daneben Name und Rolle.

```swift
// ProfileCard.swift

struct ProfileCard: View {
    var body: some View {
        // Main HStack: photo on left, info on right
        HStack(spacing: 16) {

            // ZStack to overlay the badge on the photo
            ZStack(alignment: .bottomTrailing) {
                // Profile image (circle)
                Image("avatar")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .clipShape(Circle())

                // Green "verified" badge at bottom right
                Image(systemName: "checkmark.circle.fill")
                    .foregroundColor(.green)
                    .background(Circle().fill(.white))  // White circle behind
            }

            // VStack to stack name and role vertically
            VStack(alignment: .leading, spacing: 4) {
                Text("Marie Dupont")
                    .font(.headline)

                Text("iOS Developer")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            // Spacer pushes everything to the left
            Spacer()

            // Chevron on right indicates it's tappable
            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(12)
    }
}
```

Der Trick liegt beim `Spacer()`: ein unsichtbares Element, das den gesamten verfuegbaren Platz einnimmt. Ohne ihn waeren die Elemente zentriert. Mit ihm werden sie nach links gedrueckt, und der Chevron bleibt rechts verankert.

> **Xcode Tip**
>
> Mit `Cmd + Klick` auf eine beliebige View in Xcode oeffnet sich der visuelle Inspektor. Modifier lassen sich hinzufuegen, ohne Code zu tippen.

## State-Management mit @State und @Binding

Das State-Management ist das Herzstuck von SwiftUI. State bezeichnet alle Daten, die sich aendern koennen und die Oberflaeche aktualisieren sollen. Wenn sich der State aendert, berechnet SwiftUI die betroffenen Views automatisch neu.

### @State: Der lokale State einer View

`@State` ist ein Property Wrapper, der SwiftUI mitteilt: "Beobachte diese Variable und aktualisiere die View bei Aenderungen". Ideal fuer den lokalen State einer einzelnen View.

Der folgende interaktive Zaehler veranschaulicht den Mechanismus:

```swift
// CounterView.swift

struct CounterView: View {
    // @State creates a "source of truth" for this view
    // private because state shouldn't be modified from outside
    @State private var count = 0

    var body: some View {
        VStack(spacing: 30) {
            // This Text updates automatically when count changes
            Text("\(count)")
                .font(.system(size: 72, weight: .bold))

            HStack(spacing: 40) {
                // Decrement button
                Button(action: {
                    count -= 1  // Modifies state → view refreshes
                }) {
                    Image(systemName: "minus.circle.fill")
                        .font(.largeTitle)
                }

                // Increment button
                Button(action: {
                    count += 1
                }) {
                    Image(systemName: "plus.circle.fill")
                        .font(.largeTitle)
                }
            }
        }
    }
}
```

Beim Antippen eines Buttons aendert sich `count`. SwiftUI erkennt diese Aenderung und fuehrt `body` erneut aus, um die Anzeige zu aktualisieren. Das Label muss nicht manuell aktualisiert werden -- alles geschieht automatisch.

### @Binding: State zwischen Views teilen

Manchmal muss eine untergeordnete View den State der uebergeordneten View aendern. Dafuer gibt es `@Binding`: Es erstellt eine bidirektionale Verbindung zu einem bestehenden `@State`.

Ein konkretes Beispiel: ein Eingabefeld fuer den Benutzernamen mit Echtzeit-Validierung.

```swift
// UsernameValidation.swift

// Parent view: owns the state
struct SignupForm: View {
    @State private var username = ""       // Source of truth
    @State private var isValid = false     // Validation state

    var body: some View {
        VStack(spacing: 20) {
            // We pass BINDINGS (with $) to the child view
            UsernameField(username: $username, isValid: $isValid)

            Button("Create Account") {
                // Submit the form
            }
            .disabled(!isValid)  // Disabled if invalid
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}
```

Die untergeordnete View empfaengt Bindings und kann sie aendern:

```swift
// Child view: receives and modifies state via @Binding
struct UsernameField: View {
    @Binding var username: String   // Connection to parent's @State
    @Binding var isValid: Bool

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            TextField("Username", text: $username)
                .textFieldStyle(.roundedBorder)
                .onChange(of: username) { oldValue, newValue in
                    // Validation: at least 3 characters
                    isValid = newValue.count >= 3
                }

            // Visual feedback
            HStack {
                Image(systemName: isValid ? "checkmark.circle" : "xmark.circle")
                Text("Minimum 3 characters")
            }
            .font(.caption)
            .foregroundColor(isValid ? .green : .red)
        }
    }
}
```

Wenn der Benutzer in das TextField tippt, wird `username` ueber das Binding geaendert. Die uebergeordnete View erkennt diese Aenderung und kann sie nutzen. Saubere bidirektionale Kommunikation.

> **Warning**
>
> `@State` nur fuer einfachen, lokalen State verwenden. Fuer Daten, die ueber mehrere Screens geteilt werden, oder komplexe Logik empfiehlt sich `@Observable` (iOS 17+) oder MVVM-Patterns.

## Dynamische Listen darstellen

Listen sind in praktisch jeder mobilen App praesent. SwiftUI stellt `List` zur Verfuegung, um Datensammlungen mit nativem iOS-Styling (Trennlinien, Swipe-Aktionen usw.) anzuzeigen.

### Eine einfache Liste erstellen

Fuer die Anzeige einer Liste werden zwei Dinge benoetigt: Daten und eine Moeglichkeit, sie zu identifizieren. Das `Identifiable`-Protokoll erlaubt SwiftUI festzustellen, welche View welchem Datensatz entspricht.

Zunaechst die Definition des Datenmodells:

```swift
// Models/Interview.swift

// Identifiable lets SwiftUI track each element
struct Interview: Identifiable {
    let id = UUID()           // Auto-generated unique identifier
    let technology: String
    let difficulty: String
    let questionCount: Int
}
```

Nun die Liste. Die Idee: ueber die Daten mit `ForEach` iterieren und fuer jedes Element eine Zeile erstellen:

```swift
// InterviewListView.swift

struct InterviewListView: View {
    // Data to display (in reality, this would come from an API)
    @State private var interviews = [
        Interview(technology: "iOS", difficulty: "Intermediate", questionCount: 25),
        Interview(technology: "Android", difficulty: "Advanced", questionCount: 30),
        Interview(technology: "React", difficulty: "Beginner", questionCount: 20)
    ]

    var body: some View {
        // NavigationStack enables the navigation bar
        NavigationStack {
            List {
                // ForEach iterates over each interview
                // Thanks to Identifiable, no need to specify id:
                ForEach(interviews) { interview in
                    InterviewRow(interview: interview)
                }
            }
            .navigationTitle("My Interviews")
        }
    }
}
```

Und die View fuer jede Zeile, in eine eigene Komponente ausgelagert fuer bessere Uebersichtlichkeit:

```swift
// InterviewRow.swift

struct InterviewRow: View {
    let interview: Interview

    var body: some View {
        HStack {
            // Left column: title and subtitle
            VStack(alignment: .leading, spacing: 4) {
                Text(interview.technology)
                    .font(.headline)

                Text(interview.difficulty)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            Spacer()

            // Badge with question count
            Text("\(interview.questionCount) Q")
                .font(.caption)
                .fontWeight(.medium)
                .padding(.horizontal, 8)
                .padding(.vertical, 4)
                .background(Color.blue.opacity(0.1))
                .cornerRadius(8)
        }
        .padding(.vertical, 4)
    }
}
```

`InterviewRow` in ein eigenes Struct auszulagern, macht den Code lesbarer und wiederverwendbar. Das ist eine bewaehrte Best Practice in SwiftUI.

### Aktionen: Loeschen und Neuanordnen

iOS-Listen unterstuetzen nativ das Loeschen (nach links wischen) und Neuanordnen (Drag and Drop). SwiftUI vereinfacht dies mit `.onDelete` und `.onMove`:

```swift
// InterviewListView.swift (enhanced version)

struct InterviewListView: View {
    @State private var interviews = [/* ... data ... */]

    var body: some View {
        NavigationStack {
            List {
                ForEach(interviews) { interview in
                    InterviewRow(interview: interview)
                }
                // Swipe to delete
                .onDelete(perform: deleteInterview)
                // Drag and drop to reorder
                .onMove(perform: moveInterview)
            }
            .navigationTitle("My Interviews")
            .toolbar {
                // "Edit" button that activates edit mode
                EditButton()
            }
        }
    }

    // Deletes elements at specified indices
    private func deleteInterview(at offsets: IndexSet) {
        interviews.remove(atOffsets: offsets)
    }

    // Moves elements from one position to another
    private func moveInterview(from source: IndexSet, to destination: Int) {
        interviews.move(fromOffsets: source, toOffset: destination)
    }
}
```

Mit nur 4 zusaetzlichen Codezeilen (`.onDelete`, `.onMove`, `EditButton` und die beiden Funktionen) entsteht eine vollstaendig interaktive Liste. Das ist die Effizienz von SwiftUI.

## Interfaces animieren

SwiftUI glaenzt bei Animationen. Im Gegensatz zu UIKit, wo Animationen viel Code erforderten, ist hier alles deklarativ: Der Endzustand wird beschrieben und SwiftUI animiert den Uebergang.

### Implizite Animationen mit withAnimation

Der einfachste Weg zu animieren ist, eine State-Aenderung in `withAnimation` zu verpacken. SwiftUI erkennt, was sich aendert, und animiert die betroffenen visuellen Eigenschaften automatisch.

```swift
// AnimatedCard.swift

struct AnimatedCard: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 20)
                .fill(.blue)
                // Dimensions change based on state
                .frame(
                    width: isExpanded ? 300 : 150,
                    height: isExpanded ? 200 : 100
                )

            Button(isExpanded ? "Collapse" : "Expand") {
                // withAnimation animates ALL visual changes
                // resulting from this state change
                withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) {
                    isExpanded.toggle()
                }
            }
            .padding(.top)
        }
    }
}
```

Beim Antippen des Buttons wechselt `isExpanded`. Dank `withAnimation` wird die Groessenaenderung des Rechtecks mit einem Federeffekt animiert. Es muss nicht angegeben werden, was animiert werden soll -- SwiftUI ermittelt das automatisch.

### Transitionen: Erscheinen und Verschwinden animieren

Transitionen definieren, wie eine View erscheint oder verschwindet. Standardmaessig ist es ein Fade (`opacity`), aber Anpassungen sind moeglich:

```swift
// TransitionDemo.swift

struct TransitionDemo: View {
    @State private var showDetails = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Details") {
                withAnimation(.easeInOut(duration: 0.3)) {
                    showDetails.toggle()
                }
            }

            // This view appears/disappears with a transition
            if showDetails {
                DetailCard()
                    // Asymmetric transition: different for entry and exit
                    .transition(
                        .asymmetric(
                            insertion: .scale.combined(with: .opacity),  // Entry: zoom + fade
                            removal: .slide                               // Exit: slide
                        )
                    )
            }
        }
    }
}

struct DetailCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Interview Details")
                .font(.headline)
            Text("25 questions • 45 minutes")
                .foregroundColor(.secondary)
        }
        .padding()
        .background(Color(.systemGray6))
        .cornerRadius(16)
    }
}
```

In diesem Beispiel erscheint die Karte mit einem Zoom aus der Mitte (scale + opacity) und verschwindet mit einer seitlichen Gleitbewegung (slide). Solche Mikroanimationen lassen die Oberflaeche lebendig und professionell wirken.

> **Performance**
>
> SwiftUI optimiert Animationen automatisch. Empfehlenswert ist `.spring()` fuer ein natuerliches Gefuehl. Ueberlange Animationen (> 0.5s) frustrieren Benutzer und sollten vermieden werden.

## Asynchrone Daten laden

In realen Anwendungen stammen Daten haeufig von einer API. Swift Concurrency (async/await) integriert sich nahtlos mit SwiftUI ueber den `.task`-Modifier.

### Das Loading-/Error-/Success-Pattern

Das folgende Standardmuster zeigt API-Daten an. Drei Zustaende werden verwaltet: Laden, Fehler und Erfolg.

```swift
// AsyncDataView.swift

struct AsyncDataView: View {
    @State private var questions: [Question] = []
    @State private var isLoading = true
    @State private var errorMessage: String?

    var body: some View {
        Group {
            if isLoading {
                // State: loading in progress
                ProgressView("Loading...")

            } else if let error = errorMessage {
                // State: error
                VStack(spacing: 16) {
                    Image(systemName: "exclamationmark.triangle")
                        .font(.largeTitle)
                        .foregroundColor(.orange)
                    Text(error)
                    Button("Retry") {
                        Task { await loadQuestions() }
                    }
                }

            } else {
                // State: success, display data
                List(questions) { question in
                    Text(question.title)
                }
            }
        }
        // .task runs automatically when the view appears
        .task {
            await loadQuestions()
        }
        // Pull-to-refresh
        .refreshable {
            await loadQuestions()
        }
    }

    private func loadQuestions() async {
        isLoading = true
        errorMessage = nil

        do {
            // Async API call
            questions = try await QuestionService.shared.fetchQuestions()
        } catch {
            errorMessage = "Unable to load questions"
        }

        isLoading = false
    }
}
```

Der `.task`-Modifier ist unverzichtbar: Er startet eine asynchrone Aufgabe beim Erscheinen der View und bricht sie beim Verschwinden automatisch ab. Speicherlecks sind damit ausgeschlossen.

## Fazit

SwiftUI hat sich als unverzichtbares Werkzeug fuer die moderne iOS-Entwicklung etabliert. Mit iOS 18 hat das Framework eine Reife erreicht, die es fuer Produktionsanwendungen bestens geeignet macht.

### Zentrale Erkenntnisse

- **Deklaratives Paradigma**: Beschreiben, was gewuenscht wird, nicht wie es gebaut wird
- **@State und @Binding**: State reaktiv verwalten und zwischen Views weitergeben
- **Stacks**: VStack, HStack und ZStack fuer flexible Layouts kombinieren
- **List**: Sammlungen mit minimalem Code und nativen Interaktionen anzeigen
- **Animationen**: `withAnimation` fuer automatische, fliessende Uebergaenge nutzen
- **Async/await**: Daten mit `.task` laden und Lade-/Fehlerzustaende verwalten

### Checkliste

- Den Unterschied zwischen imperativ (UIKit) und deklarativ (SwiftUI) verstehen
- Modifier und ihre Anwendungsreihenfolge beherrschen
- Wissen, wann @State vs @Binding vs @Observable eingesetzt wird
- Layouts mit Stacks aufbauen
- Listen mit Aktionen (Loeschen, Verschieben) implementieren
- State-Aenderungen mit withAnimation animieren

SwiftUI oeffnet die Tuer zur Entwicklung eleganter Anwendungen im gesamten Apple-Oekosystem. Der effektivste Weg zum Lernen fuehrt ueber die Praxis: Ein kleines persoenliches Projekt erstellen und jeden Konzept aus diesem Artikel ausprobieren.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/blog/ios/swiftui-building-modern-interfaces