Im vorherigen Tutorial haben wir gelernt, wie man einen neuen ViewController hinzufügt, diesen modular anzeigt und gleichzeitig Daten an den neuen ViewController übergibt. Heute lernen wir eine neue Art der Navigation kennen, namens "show segue" oder auch "push" genannt.
Der NavigationController
Im Gegensatz zu einem modular dargestellten ViewController ist ein mit "show segue" angezeigter ViewController nicht dazu gedacht, temporäre oder kritische Informationen anzuzeigen, die die sofortige Aufmerksamkeit des Benutzers erfordern. Der ViewController soll auch dann im Speicher bleiben, wenn er nicht mehr angezeigt wird. Ebenfalls ist es möglich, dorthin zurück zu navigieren. Das für die Verwaltung des ViewController-Stack verantwortliche Element ist der UINavigationController.
Ein NavigationController kann als ein Container von ViewControllern verstanden werden, der jeweils einen untergeordneten ViewController anzeigt. Wenn der Benutzer zu einer neuen Seite navigiert, wird ein ViewController angezeigt und der vorherige ausgeblendet. Durch Tippen auf die Zurück-Schaltfläche wird der oberste ViewController entfernt und der Benutzer kehrt zum vorherigen ViewController zurück.
Einbetten eines UIViewControllers in einen UINavigationController
Der Versuch, einen ViewController von einem anderen ViewController zu pushen, der nicht von einem NavigationController verwaltet wird, funktioniert nicht. Wir müssen zuerst den ursprünglichen ViewController in einen NavigationController einbetten.
Um das zu tun, folge den nächsten Schritten
Öffne die Datei Main.storyboard
Selektiere den ersten ViewController und wähle in der Menüleiste "Editor"
Wähle als nächstes "Embed In" und dann "Navigation Controller"
Der initiale ViewController ist jetzt der NavigationController mit ViewController als RootViewController. Du wirst feststellen, dass der ViewController jetzt eine Navigation Bar hat, die ebenfalls automatisch beim Einbetten hinzugefügt wird. Die Navigation Bar kann Action-Buttons und den View-Titel enthalten und ebenfalls wird hier der Zurück-Button angezeigt.
Anzeigen (pushen) von einem neuen ViewController
An diesem Punkt sind wir bereit, einen neuen ViewController anzuzeigen.
Folge dazu den nächsten Schritten:
Füge einen neuen ViewControllers zum Storyboard hinzu.
Erstelle eine Datei "ViewController3.swift" und verknüpfe diese mit dem ViewController, den du gerade zum Storyboard hinzugefügt hast (siehe vorheriges Tutorial oder das Video unten für weitere Details).
Klicke auf den Button, den du gerade hinzugefügt hast.
Drücke und halte die Steuerungstaste deiner Tastatur (ctrl ^), klicke auf den Button und bewege deine Maus auf den neuen ViewController, lasse jetzt alle Tasten und die Maus los.
Eine Liste der Segue-Typen erscheint, wähle "Show"
Klicke auf die neue "Segue" und öffne die Inspector Bar. Wähle jetzt den Inspector Tab und trage den Text "NavigationToScreen3" in das Feld "Identifier" ein.
Füge einen Button zu dem ViewController3 hinzu und erstelle eine entsprechende Variable in der Klasse "ViewController3.swift". Nenne die Variable einfach "Button" und vergesse nicht den UIButton im Storyboard damit zu verknüpfen.
Füge eine Variable vom Typen "String" hinzu und nenne diese "buttonTitle".
var buttonTitle: String!Genauso wie im vorherigen Tutorial können wir Daten an den Ziel-ViewController3 übergeben. Jedoch gibt es eine Sache, die wir in der Funktion prepareForSegue anpassen müssen. Zuvor hatten wir nur eine einzelne Navigation, so dass wir nicht den Segue-identifier überprüfen mussten, um zu bestimmen, welche Navigation durchgeführt wurde. Um aber zu wissen, welche Navigation betätigt wurde, müssen wir den Segue-identifier abfangen und überprüfen.
Bearbeite dazu die Funktion prepareForSegue wie folgt:
override func prepare(for segue: UIStoryboardSegue, sender: Any?){
if segue.identifier == "NavigationToScreen2" {
let viewController2 = segue.destination as? ViewController2
if inputTextField.text == nil {
viewController2?.text = "No Text"
} else {
viewController2?.text = inputTextField.text!
}
} else if segue.identifier == "NavigationToScreen3" {
let viewController3 = segue.destination as? ViewController3
if inputTextField.text == nil {
viewController3?.buttonTitle = "No Text"
} else {
viewController3?.buttonTitle = inputTextField.text!
}
}
}Füge dem Button programmatisch einen Titel hinzu
Während der Navigation erhält der ViewController3 die Textvariable "buttonTitle". Dadurch wird aber noch nicht automatisch der Titel von dem Button gesetzt. Um dies zu tun, füge die folgende Codezeile in der Funktion viewDidLoad in der Datei "ViewController3.swift" hinzu
button.setTitle(buttonTitle, for: .normal)Starte jetzt die App, tippe in das Textfeld und gebe einen beliebigen Text ein. Klicke dann auf den Button "NavigationToScreen3". Es wird der neueViewController3 geöffnet und der Text aus dem Textfeld wird als Titel des Buttons festgelegt. Ebenfalls sollte der Zurück-Button in der linken oberen Ecke sichtbar sein. Wenn du auf diesen Button klickst, wird der ViewController3 geschlossen und du kehrst zum vorherigen ViewController zurück.
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 UIViewController!