iOS Development Tutorial 5 - Navigation zwischen ViewController - Teil 1

Im vorherigen Tutorial haben wir gelernt, wie man Bilder verwaltet und über den Interface Builder (Storyboard) sowie im Code anzeigt. Im heutigen Tutorial werden wir lernen, wie wir zu einem neuen Bildschirm navigieren und wie wir Daten zwischen einzelnen Screens übergeben können. Dieses Tutorial wird aus 3 Teilen bestehen. Im ersten Teil werden wir behandeln, wie Screens modular angezeigt werden. Im zweiten Teil geht es um Navigationscontroller und Screens, die über die "show-segue" gezeigt werden, und im dritten Teil werden wir lernen, wie wir Daten mit Hilfe von Delegates an den Ursprung zurückgeben können.

Einen neuen ViewController hinzufügen

Das Hinzufügen eines ViewControllers zum Storyboard funktioniert sehr ähnlich, wie wir es schon von UIElementen kennen. Gehe dafür wie folgt vor:

• Öffne die Datei Main.storyboard.

• Auf der Toolbar klicke den Knopf mit dem "+" in der oberen rechten Ecke.

• Eine Liste mit Elementen wird angezeigt.

• Ziehe das Element "View Controller" neben den bereits existierenden ViewController.

Als nächstes müssen wir eine neue Klasse für den soeben hinzugefügten ViewController erstellen. Führe dafür folgende Schritte aus:

• Rechts-Klick oder cmd+N auf den Ordner "Hello World"

• Wähle dann "New File..."

• Eine Liste von möglichen Typen erscheint, wähle für den ViewController "Cocoa Touch Class"

• Für "Class" schreibe "ViewController2", wähle als "Subclass of" UIViewController, lasse die Checkbox für "Also create XIB file" unmarkiert und wähle als "Language" Swift

• Klicke auf "Next" und erstelle die Datei.

Aktuell hast du den ViewController zu deinem Storyboard hinzugefügt und eine Klasse für den ViewContontroller erstellt. Jetzt müssen diese beiden Elemente noch miteinander verbunden werden.

• Öffne die Datei Main.storyboard

• Wähle den neu hinzugefügten ViewController auf der linken Seite und die Inspector Bar auf der rechten Seite. In dem "Custom Class" Feld kannst du jetzt unter "Class" deine soeben erstelle Klasse "ViewController2" auswählen.

Erstellen von UIStoryboardSegue

Eine "Segue" ist ein Übergang zwischen zwei ViewController, welche im Storyboard definiert wurden. Es gibt unterschiedliche Arten von "Segues". In diesem Tutorial konzentrieren wir uns zunächst nur auf die modale Anzeige. Die modale Anzeige zeigt Screens kurzfristig und kann vom Anwender jederzeit wieder geschlossen werden. Wichtig hierbei, der Screen wird nicht einem existierenden "Navigation stack" hinzugefügt. "Navigation stack" erklären wir in einem späteren Tutorial.

• Füge einen neuen Button hinzu, du kannst den Button über das bereits existierende ImageView platzieren.

• Markiere den gerade hinzugefügten Button.

• Klicke und halte (ctrl^) auf deiner Tastatur und bewege die Linie auf den neu hinzugefügten ViewController. Lasse jetzt die Tasten los.

• Jetzt erscheint eine Liste von unterschiedlichen "Segues". Wähle "Present Modally".

• Markiere die soeben erstellte Segue und wähle die "Inspector Bar" aus. Trage für "Identifier" den Text "NavigationToScreen2" ein.

• Füge ein neues Label zu deinem neuen ViewController hinzu und zentriere es im View. Erstelle ebenfalls eine IBOutlet Variable in deinem neuen ViewController und verlinke das Label damit. (Schaue dir das vorherige Tutorial oder das Video am Ende von diesem Tutorial an, um eine detaillierte Anleitung zu erhalten.)

@IBOutlet weak var textLabel: UILabel!

• Als nächstes fügen wir einen Button zu dem neuen ViewController hinzu, damit wir die Möglichkeit haben, diesen auch wieder zu schließen. Wähle als Titel für den Button "Navigate to Screen 2". (Mehr Details zu Button und Actions gibt es in diesem Tutorial)

• Füge jetzt die IBAction hinzu

@IBAction func closeScreen(sender: UIButton) {
    dismiss(animated: true, completion: nil)
}

Die "dismiss" Funktion ist eine vordefinierte Funktion vom UIViewController. Damit kann der UIViewController geschlossen werden. Setze "animated" auf "false" falls du die Animation ausschalten möchtest.

Hinzugefügten Text zum neuen ViewController übergeben

Im nächsten Abschnitt lernen wir, wie eingegebener Text aus dem Textfeld im Label auf dem ViewController2 angezeigt werden kann.

• Öffne "ViewController2.swift"

• Füge eine neue Variable vom Typen String hinzu

var text: String!

• In der ViewDidLoad Funktion, schreibe den folgenden Code

textLabel.text = text

• Öffne "ViewController.swift" file

• Override die Funktion "prepare(for segue: UIStoryboardSegue, sender: Any?)":

override func prepare(for segue: UIStoryboardSegue, sender: Any?){
    let viewController2 = segue.destination as? ViewController2
    if inputTextField.text == nil {
        viewController2?.text = "No Text"
    } else {
        viewController2?.text = inputTextField.text!
    }
}

Overriding eine Funktion bedeutet, dass diese Funktion in der superclass von deiner Klasse bereits existiert und das wir die Implementierung ändern möchten. In unserem Fall bedeutet das konkret. Unsere Klasse ist ViewController und die superclass ist UIViewController.

Starte jetzt die App, tippen auf das Textfeld und gebe ein beliebiges Wort in das Textfeld ein. Klick im Anschluss auf den Button "Navigate to Screen 2". Jetzt siehst du den neuen Screen mit dem eingegeben Wort. In unserem nächsten Tutorial beschäftigen wir uns mit der "show segue". Du kannst das Projekt wie immer hier runterladen.

Verpasse kein Tutorial mehr! Like dafür einfach unsere Facebook Seite ✅

Also: Bleib dran!

Viel Spaß beim Coden.

Euer Code Pirate Team

Du liest: Navigation zwischen ViewController!