Btn training bbbdf557d2 Nächste iOS-Schulung: 25. Februar - 01. März 2019, Stuttgart

5. 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:

Listendarstellungen mit UITableView und UITableViewController

Ein UITableView bringt Cells in Sections gruppiert zur Anzeige. Dabei werden die Anzeigestile Plain und Grouped unterschieden. Zellen unterstützen standardmäßig die Anzeigestile Basic, Right Detail, Left Detail und Subtitle:

UITableViewStyle.Plain, .Grouped, UITableViewCellStyle

Standardmäßig werden die Inhalte für Table Views programmatisch bereitgestellt - dies wird im Kapitel zum UITableViewController behandelt. Für Listen und Auswahlmenüs mit statischen Inhalten können mit der Table View-Option Content: Static Cells die Inhalte direkt im Storyboard konfiguriert werden. Dabei wird auch die Anzahl der Abschnitte festgelegt:

Table View Content: Static Cells

In der Section kann dabei die Anzahl der Zellen festgelegt werden:

Table View Content: Static Cells

Für die Zelle kann dann der Stil und das Aussehen der Tabellenzelle konfiguriert werden:

Table View Content: Static Cells

UINavigationController: Hierarchische Navigation zwischen Views

Ein UINavigationController ist ein UIViewController, der einen Stapel von UIViewControllern verwaltet. Die Navigations-Bar mit Zurück-Button und Titel wird dabei automatisch angezeigt und aktualisiert:

UINavigationController-Stapel mit Navigations-Bar

Initial zeigt ein Navigation Controller seinen Root View Controller an, der im Storyboard über ein Relationship-Segue-Übergang festgelegt wird:

Root View Controller relationship im Storyboard

Innerhalb eines UINavigationControllers bekommen UIViewController ein navigationItem zur Konfiguration der Navigation-Bar gesetzt:

Navigation-Item im StoryBoard

Weiterführende Informationen

Xcode Help: About Storyboards ▸ Die Xcode-Hilfe beschreibt ausführlich die Editorfunktionalitäten für das Bearbeiten von Storyboards.
https://help.apple.com/xcode/mac/8.0/#/dev62c993289

Adding a Reference to another Storyboard ▸ Es können mehrere Storyboards in einem Projekt angelegt werden, die Verknüpfung erfolgt mit Storyboard References.
http://useyourloaf.com/blog/refactoring-with-storyboard-references.html

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.
https://stackoverflow.com/questions/13834999/storyboards-vs-the-old-xib-way

Tutorial 1: View im Storyboard gestalten

Im Folgenden werden die Bilder des Prototypen aus dem vorherigen Tutorial durch echte Oberflächenelemente im Storyboard ersetzt.

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

  2. Prüfen Sie, dass das vom Projektassistenten angelegte Main.storyboard im Target des Xcode-Projektes als Main Interface konfiguriert ist:

    Storyboard Main Interface
  3. Öffnen Sie das Main.storyboard und 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. Verwenden Sie außerdem die Option View as: ... um verschiedene Gerätegrößen und Drehungen auszuwählen:

    ViewController und View im Storyboard

    Wählen Sie abschließend die Größe, die Ihrem Testgerät entspricht. 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. Entfernen Sie die zuvor erstellten Klick-Spots und die zugehörigen Segue-Übergänge:

    Remove Click Spots
  5. Fügen Sie dem Lernkarten-View Controller einen Button für das Umdrehen der Lernkarte hinzu. Orientieren Sie sich bei der Ausrichtung an der Designvorlage:

    Button für das Umdrehen der Lernkarte

    Entfernen Sie den Button-Titel und konfigurieren Sie im Attributes Inspector das Bild btn_flip:

    Attributes Inspector

    Hinweis: Die benötigte Grafiken wurde bereits im vorherigen Kapitel in das Projekt importiert.

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

  7. Fügen Sie ein Text View hinzu. Konfigurieren Sie eine Schriftgröße von 20pt, zentrierter Text und deaktivieren Sie die Eigenschaft Editable:

    Text View-Eigenschaften
  8. Entfernen Sie die Prototyping-Grafik und setzen sie die Hintergrundfarbe des Views des Controllers auf RGB 255/240/220:

    Hintergrundfarbe konfigurieren

Tutorial 2: Table View Controller im Storyboard hinzufügen

  1. Fügen Sie dem Storyboard über die Object Library einen Table View Controller hinzu:

    Table View Controller hinzufügen
  2. Wählen Sie das Table View (nicht den Table View Controller) über die Outline oder über Shift + Rechtsklick aus und konfigurieren Sie die Eigenschaft Content auf Static Cells um die Inhalte für das Tabellen-View im Storyboard zu konfigurieren:

    Table View Controller: Static Cells
  3. Wählen Sie die Zellen aus und konfigurieren Sie den Zellenstil Basic. Tragen Sie beispielhaft Namen für Kartenstapel ein: „Deutsch/Englisch: Verben“ und „Spanisch/Englisch: Tiere“:

    Table View Controller: Zelle konfigurieren
  4. Entfernen Sie den View Controller mit dem Prototyping-Bild.

  5. Duplizieren Sie mit ⌘D den soeben erstellten Table-View-Controller für den sehr ähnlich gestalteten Download von Kartenstapeln. Verwenden Sie hier den Style Subtitle für die Zellen und geben Sie als Untertitel die Anzahl der Lernkarten an. Wählen Sie btn_download als Bild, so dass sich folgende Darstellung ergibt:

    2. TableViewController: Downloads

    Hinweis: Die Bilder werden aufgrund eines Bugs in Xcode nicht in der Vorschau im Storyboard Editor angezeigt.

  1. Wählen Sie im Storyboard den Controller für die Liste der Kartenstapel aus und erstellen Sie mit Editor » Embed in » Navigation Controller einen Navigations-Controller. Damit wird ein Navigations-Controller erstellt und ein Segue-Übergang der eine Root View Controller-Beziehung zwischen den beiden Controllern herstellt:

    Navigations-Controller erstellen

  2. Wählen Sie den Navigations-Controller aus und wählen Sie im Attributes Inspector ⌘⌥4 die Option Is Initial View Controller, um diesen Controller zum Startbildschirm der App zu machen:

    Attributes Inspector: Initial View Controller
  3. Ziehen Sie mit der rechten Maustaste einen Segue-Übergang von der Tabellenzelle in der Kartenstapel-Auswahl zu dem Kartenstapel-Controller und erstellen Sie ein Selection Segue » Show-Übergang:

    Übergang zum Kartenstapel erstellen

  4. Vergeben Sie die Titel Flashcards und Lernkarte für die beiden View-Controller. Gegebenenfalls müssen Sie dazu ein Navigation Item hinzufügen, um den Titel bearbeiten zu können:

    Navigation Item: Titel für View-Controller
  5. Fügen Sie der Kartenstapel-Auswahl ein Bar Button Item hinzu und wählen als System Item die Option Add:

    Bar Button Item für Hinzufügen-Button
  6. Erstellen Sie einen Show-Segue von dem Button zu dem Download-Table View Controller und vergeben Sie „Downloads“ als Titel für den Controller:

    Segue-Übergang zum Download-ViewController

  7. Starten Sie die App und prüfen Sie die Übergänge zwischen den Controllern.

  8. Ü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. Storyboard für Flashcards App" an.

Btn book fed239f0c0 Buch „iOS 11-Apps entwickeln mit Swift & Xcode 9“
Btn training bbbdf557d2 Nächste iOS-Schulung: 25. Februar - 01. März 2019, Stuttgart
Btn about 5378472193 Über mich · Kontakt