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

von @ralfebert · aktualisiert am 30. Oktober 2021
SwiftUI, Xcode 13 & iOS 15
Entwickler*innen ohne iOS-Vorkenntnisse
Deutsch

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 13 iOS-Apps für das iPhone / iPad zu entwickeln, benötigst Du einen Mac mit mindestens macOS 11 (Big Sur).

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. Starte Xcode und erstelle ein neues Projekt mit File » New » Project ⌘⇧N. Wähle iOS » Application » Single View Application:

    File » New » Project » iOS » Application » Single View Application
  5. Verwende folgende Projekteinstellungen:

    • Nenne die App "Dice".
    • Wenn Du eine Apple ID oder einen Apple Developer Account hast, wähle diesen bei Team aus, ansonsten belasse None als Auswahl.
    • Verwende com.example als Company Identifier. Dies sollte ein Domainname sein, den Du selbst besitzt, um Namenskonflikte zu vermeiden. Du kannst auch einen eigenen Domain-Namen verwenden.
    • Wähle Swift als Language.
    • Wähle die Verwendung von SwiftUI für das Interface.
    • 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 - 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 die Vorschau, dass ein VStack erstellt wird, um das Bild über dem Text zu platzieren:

  3. Prüfe den erstellten Code und mache Dich damit vertraut - beide Views werden nun mit einem VStack gruppiert:

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

Werte einsetzen

  1. Deklariere im View eine Konstante mit let, erzeuge eine Zufallszahl mit Int.random (range übergeben) und verwende String interpolation, 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)")
            }
        }
    }
    

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.