4. Storyboards

In Xcode-Projekten werden Storyboards verwendet, um die grafische Oberfläche der App zu definieren. Jede Sicht der Anwendung wird dabei in einer Scene definiert, zwischen denen Segue-Übergänge erstellt werden können. Die Szenen des Storyboards enthalten die zugehörigen UIViewController und UIView-Objekte:

Storyboard Scenes und Segues

Beim Start der App wird das im Projekt-Target angegebene Main Interface-Storyboard geladen:

Storyboard Main Interface

Dabei wird der Initial View Controller des Storyboards zur Anzeige gebracht:

Storyboard Initial View Controller

Controller und Views können dem Storyboard über die Object Library hinzugefügt und über die Utility Inspector-Paletten konfiguriert werden. Objekte können über die Document Outline oder per Shift + Klick im grafischen Editor zielgerichtet ausgewählt werden:

Interface Builder Aufbau

Das UIKit-Framework stellt folgende Views bereit:

Übersicht UIKit-Widgets

Die Konfiguration des ausgewählten Objektes erfolgt über die Inspector-Paletten Identity, Attributes, Size und Connections:

Weiterführende Informationen

Xcode Help: About Storyboards
Die Xcode-Hilfe beschreibt die Editorfunktionalitäten für das Bearbeiten von Storyboards.

Adding a Reference to another Storyboard
Es können mehrere Storyboards in einem Projekt angelegt werden, die Verknüpfung erfolgt mit Storyboard References.

Storyboards vs. the old XIB way
Vor der Einführung von Storyboards wurde die grafische Oberfläche in je einer XIB-Datei für jeden Controller separat abgelegt. Dieser Ansatz kann weiterhin verwendet werden, der Stack-Overflow-Artikel diskutiert die Vor- und Nachteile.

Tutorial 1: App-Design per Storyboard umsetzen

  1. Öffnen Sie das im ersten Kapitel erstellte und in den vorhergehenden Tutorials weiterentwickelte Flashcards-Projekt in Xcode.

  2. Das Storyboard Main.storyboard ist in der Projektkonfiguration als Main Interface konfiguriert - machen Sie sich mit dieser Konfigurationsoption vertraut:

    Storyboard Main Interface
  3. Öffnen Sie Main.Storyboard. Testen Sie unter View as verschiedene Vorschaugrößen. Wählen Sie abschließend die Größe von Ihrem Testgerät im Hochformat (im Zweifel verwenden Sie iPhone 8 im Hochformat):

    Storyboard: Vorschaugröße

    Hinweis: Dies ist für die Gestaltung der Screens hilfreich, da das Projekt erst im Layout-Kapitel um Unterstützung für verschiedene Bildschirmgrößen erweitert wird.

  4. Blenden Sie mit Show/Hide Document Outline die Outline ein und inspizieren Sie in der Outline die Struktur der Objekte: der View Controller enthält das View:

    ViewController und View im Storyboard
  5. Wählen Sie das View über die Outline oder über Shift+Klick auf das View aus und konfigurieren Sie die Hintergrundfarbe im Attributes Inspector ⌘⌥4 auf RGB 255/240/220:

    Hintergrundfarbe konfigurieren
  6. Vergrößern Sie das zuvor erstellte Label, setzen Sie im Attributes Inspector Lernkarte als Text, setzen Sie eine weiße Hintergrundfarbe, eine Schriftgröße von 20pt und lassen Sie den Text zentriert darstellen:

    Label-Eigenschaften
  7. Fügen Sie über die Object Library einen Button für das Umdrehen der Lernkarte hinzu. Entfernen Sie den Button-Titel und konfigurieren Sie im Attributes Inspector das Bild btn_flip:

    Attributes Inspector

    Hinweis: Die benötigte Grafiken wurden bereits im ersten Kapitel in das Projekt importiert.

  8. Duplizieren Sie den Button mit Edit » Duplicate ⌘D und wählen Sie die Grafiken btn_wrong und btn_correct. Platzieren Sie die Buttons so dass sich folgende Sicht ergibt:

  9. Fügen Sie über die Object Library einen zweiten View Controller hinzu und platzieren Sie darauf einen Button mit dem Text Kartenstapel lernen. Wählen Sie diesen View Controller aus und verschieben Sie den Eintrittspfeil oder aktivieren Sie die Option Is Initial View Controller:

    Add View Controller
  10. Ziehen Sie mit der rechten Maustaste einen Segue-Übergang von dem Button zu dem Lernkarten-Controller und erstellen Sie ein Action Segue » Show-Übergang:

    Segue Übergang erstellen
  11. Starten Sie die App und prüfen Sie den Übergang zwischen den Controllern.

  12. Übernehmen Sie die Änderungen mittels Source Control » Commit in das lokale Git-Repository. Prüfen Sie die Änderungen im Projekt und geben Sie als Commit-Nachricht "4.1. Storyboard für Flashcards App" an.

iOS Training Schulung Workshop
Nächste iOS-Schulung:
24. – 28. Juni 2019
Frankfurt am Main
iOS Buch
iOS 12-Apps entwickeln mit Swift & Xcode 10