13. Februar 2020

iOS Tutorial: Beispielprojekt „Würfel-App“

Zielstellung

Erstelle eine iPhone-App zum Würfeln:

Dice app in simulator

Lernziele

Dieses Tutorial zeigt in folgenden Schritten die Entwicklung einer einfachen iOS-App:

Voraussetzungen

Für dieses Tutorial werden keine Vorkenntnisse in Swift/Xcode vorausgesetzt. Um mit Xcode 11 iOS-Apps für das iPhone / iPad zu entwickeln, benötigst Du einen Mac mit mindestens macOS 10.14 Mojave.

Xcode installieren und neues iOS-Projekt anlegen

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

    Install Xcode via Mac App Store
  2. Starte Xcode und überprüfe Deine Xcode-Version:

    Xcode version
  3. Wenn Du bereits Xcode-Projekte erstellst hast und weißt wie Du Image-Assets importierst, 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 dem Hinzufügen der Views für die Benutzeroberfläche 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".
    • 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 eines Storyboard für das User Interface.
    • Deaktiviere Use Core Data and 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. Füge icon_60pt@2x.png und ...@3x.png als Icon für die iPhone-App hinzu:

    Add an app icon

Storyboard bearbeiten und dem View-Controller UI-Elemente hinzufügen

  1. Öffne das Main.storyboard. Du siehst dort den Initial View Controller der App mit einem leeren View:

    Open Main.storyboard
  2. Verwende die Library, um dem View ein Image View und einen Button hinzuzufügen (Hinweis: Du kannst in der Library nach dem Namen suchen). Füge das View per Doppelklick oder per Drag&Drop hinzu:

    Add Views using the Library
  3. Platziere die Views folgendermaßen:

    Placement UIImageView and UIButton
  4. Wähle das Image View und wähle im Attributes Inspector eines der Würfel-Bilder aus. Verwende Editor » Size to Fit content ⌘=, um das View an die Größe des Bildes anzupassen:

    Dice image for image view
  5. Konfiguriere für die Schaltfläche den Text „Würfeln!“:

    Text UIButton

Layout-Contraints erstellen

Um die Views auf allen verschiedenen Gerätegrößen zu zentrieren, können ein Stack View sowie Auto Layout constraints verwendet werden:

  1. Wähle beide Views aus und verwende Embed in » Stack View , um ein Stack View zu erstellen, in der beide Ansichten vertikal übereinander positioniert werden:

    Embed in » Stack View
  2. Verwende Add Alignment constraints, um Constraints zu erstellen, die die Ansicht horizontal und vertikal im Container zentrieren:

    Add Alignment constraints
  3. Verwende View as, um zu einer anderen Gerätegröße zu wechseln. Prüfe, das das View auch hier korrekt positioniert wird:

    Select device size

Button-Taps mit Actions und Outlets behandeln

  1. Wähle den View Controller aus und öffne den Identity Inspector. Die hier angegebene Klasse enthält den Code, der für die Verwaltung der Views des Controllers verantwortlich ist:

    Custom class in identity inspector
  2. Öffne den Assistant Editor, um den Code neben dem Storyboard-Editor anzuzeigen:

    Assistant Editor
  3. Ziehe mit gedrückter Strg-Taste mit der rechten Maustaste von dem Image View in den Code der Klasse, um eine neue Outlet-Eigenschaft zu erstellen, mit der im Code auf das View zugegriffen werden kann:

    Create an outlet

    Nenne das Outlet diceImageView:

    Outlet name
  4. Ziehe mit gedrückter Strg-Taste / rechter Maustaste von dem Button in den Code der Klasse, um eine neue Action-Methode zu erstellen, die aufgerufen wird, wenn auf die Schaltfläche getippt wird:

    Create an action method

    Nenne die Action-Methode rollDice:

    Action name

Würfel-Code schreiben

  1. Die View-Controller-Klasse sollte jetzt folgendermaßen aussehen:

    class ViewController: UIViewController {
    
        @IBOutlet weak var diceImageView: UIImageView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view.
        }
    
        @IBAction func rollDice(_ sender: Any) {
        }
    
    }
    
  2. Verwende in der rollDice-Methode das Range-Sprachfeature von Swift, um eine Zufallszahl zu generieren. Lege die erzeugte Zufallszahl mit let als Konstante ab:

    @IBAction func rollDice(_ sender: Any) {
        let number = (1...6).randomElement()
    }
    
  3. Überprüfe den zurückgegebenen Typ, indem Du mit auf die number-Konstante klickst:

    Return type optional

    Der Typ ist ein Optional-Typ Int?. In diesem Fall gibt die Methode zwar immer einen Wert zurück, allerdings könnte randomElement() auch nichts (nil) zurückgeben, wenn es auf einer leeren Liste aufgerufen wird.

  4. Verwende den force unwrap operator-Operator !, um den Optional-Wert auszupacken. Dies kann hier verwendet werden, da wir 100% sicher sind, dass immer einen Wert vorhanden ist und die Methode niemals nil zurückgibt:

    @IBAction func rollDice(_ sender: Any) {
        let number = (1...6).randomElement() !
    }
    
  5. Lade das Bild mit UIImage(named: ...). Du kannst \(...) verwenden, um den Wert in den String einzufügen und das Bild nach dem Namen zu laden (die Bilder heißen dice-1, dice-2, ...):

    @IBAction func rollDice(_ sender: Any) {
        let number = (1...6).randomElement()!
        self.diceImageView.image = UIImage(named: "dice-\(number)")
    }
    

App im Simulator starten

  1. Wähle einen iPhone Simulator als "Schema" aus und start die App via Run ⌘R:

    Select scheme
  2. Die App startet im Simulator - teste das Würfeln:

Dice app in iPhone simulator