Einführung in die iOS-App-Entwicklung mit SwiftUI

von @ralfebert · aktualisiert am 19. Oktober 2023
SwiftUI, Xcode 15 & iOS 17
Entwickler*innen ohne iOS-Vorkenntnisse
Deutsch
Englisch

Das SwiftUI-Tutorial vermittelt anhand einer Würfel-App die Grundlagen der iOS-App-Entwicklung mit SwiftUI. Es zeigt die Erstellung eines iOS-App-Projektes in Xcode, die Verwendung der SwiftUI-Vorschau, wie SwiftUI-Views hinzugefügt und konfiguriert werden und wie Apps im Simulator ausgeführt werden.

Voraussetzungen

Für dieses Tutorial werden keine Vorkenntnisse in Swift/iOS-Entwicklung vorausgesetzt. Um mit Xcode 15 iOS-Apps für das iPhone / iPad zu entwickeln, benötigst Du einen Mac mit mindestens macOS 13 (Ventura).

Lernziele

Dieses Tutorial zeigt die ersten Schritte zur Entwicklung einer iOS-App:

Xcode installieren und neues iOS-Projekt anlegen

  1. Öffne die App Store-App und installiere das aktuelle Xcode:

    Install Xcode via Mac App Store

  2. Starte Xcode und überprüfe Deine Xcode-Version auf dem Startbildschirm:

    Xcode version

  3. Wenn Du bereits Xcode-Projekte erstellt hast und mit der Verwendung von Image-Assets vertraut bist, nimm am besten eine Abkürzung und lade einen Start-Stand von dem Projekt herunter: Dice-starter.zip. Hier sind die Bilder bereits importiert und Du kannst direkt mit der Verwendung der SwiftUI-Preview fortfahren.

  4. Erstelle ein neues Projekt mit Create New Project... im Willkommensbildschirm oder verwende File » New » Project ⌘⇧N. Wähle iOS » App:

    File » New » Project » iOS » Application » Single View Application

  5. Verwende folgende Projekteinstellungen:

    • Nenne die App "Dice".

    • Wenn Du bereits eine Apple ID oder einen Apple Developer Account erstellt hast, um Apps auf echten Geräten auszuführen, wähle diesen bei Team aus, ansonsten belasse None als Auswahl.

    • Verwende com.example als Company Identifier. Du kannst auch einen eigenen Domain-Namen verwenden - dies sollte ein Domain-Name sein, den Du selbst besitzt, um Namenskonflikte zu vermeiden.

    • Wähle die Verwendung von SwiftUI für das Interface.

    • Wähle Swift als Language.

    • Wähle None für Storage.

    • Deaktiviere Use Core Data und Include Tests (für dieses Tutorial nicht erforderlich).

    Project settings Dice

  6. Bestätige mit Next und wähle einen Ordner, in dem Xcode den Ordner Dice für das Projekt erstellen soll.

Bilder in das Xcode-Projekt importieren

  1. Lade assets.zip herunter, das Bilder für das Projekt enthält, und entpacke das Archiv. Öffne Assets.xcassets im Xcode-Projekt und ziehe die Bilder für den Würfel in das Projekt:

    Drag folder dice into assets

  2. Wähle im Finder alle Icons im Ordner AppIcon aus und ziehe sie auf die Icons im AppIcon im Asset-Katalog - diese werden hervorgehoben und die Zuordnung erfolgt automatisch. Korrigiere im Anschluss den Eintrag für das 1024pt-Icon.

    Add an app icon

Verwendung der SwiftUI-Canvas-Vorschau

  1. Öffne die Datei ContentView.swift im Projekt:

  2. Aktiviere die Canvas-Vorschau:

    Canvas-Vorschau für SwiftUI

  3. Aktiviere die Vorschau mit Resume (dies kann beim ersten Mal etwas dauern, da Xcode für die Live-Vorschau das Projekt bauen muss):

    Resume Canvas-Vorschau

  4. Ändere den Text im View-Code - die Vorschau wird unmittelbar aktualisiert:

    Unmittelbare Aktualisierung der SwiftUI-Vorschau

Ein Image-View hinzufügen

  1. Wähle über die Media library eines der Würfel-Bilder aus:

  2. Ziehe dieses so auf den Code, dass ein entsprechendes Image-View für das Würfelbild über dem globe-Symbol eingefügt wird:

  3. Entferne das globe-Image und prüfe den erstellten Code und mache Dich damit vertraut - beide Views werden in einem VStack vertikal gruppiert:

    struct ContentView: View {
    var body: some View {
        VStack {
            Image("dice-1")
            Text("Hello SwiftUI!")
        }
        .padding()
    }
}

Werte einsetzen

  1. Deklariere im View eine Konstante mit let, erzeuge eine Zufallszahl mit Int.random (hier ist ein Range zu übergeben) und verwende die String interpolation-Syntax \(...), um die Würfelzahl in die String-Werte einzufügen:

    struct ContentView: View {
    let diceNumber = Int.random(in: 1...6)

    var body: some View {
        VStack {
            Image( "dice-\(diceNumber)")
            Text( "You rolled a \(diceNumber)")
        }
        .padding()
    }
}

SwiftUI-Views konfigurieren

  1. Wähle den VStack aus und experimentiere mit den Parametern Spacing und Alignment im Attributes inspector. Beachte, wie sich diese Einstellungen im Code auswirken:

  2. Wähle das Text-View aus und füge einen Bold-Modifier hinzu:

App im Simulator starten

  1. Wähle einen iPhone Simulator aus und starte die App mit Product » Run ⌘R:

    Select scheme

  2. Die App startet im Simulator, jedes Mal mit einer neuen Würfelzahl:

    Dice app in iPhone simulator

  3. Wähle im Simulator über das Window-Menü ⌘1…⌘4 die verschiedenen Bildschirm-Skalierungen bzw. skaliere die Größe des Simulator-Fensters:

    Bildschirmgröße iPhone-Simulator

  4. Wechsle mittels Hardware » Home ⇧⌘H zum Homescreen und zurück zur App.