4.2Der Navigationcontroller

Ein Container-Viewcontroller enthält mehrere andere Viewcontroller und steuert deren Anzeige. Ein wichtiger Vertreter dieser Kategorie ist der Navigationcontroller, der eine Hierarchie von mehreren Viewcontrollern verwaltet, die er über einen internen Stapel verwaltet. Dabei zeigt er immer nur den obersten Controller an, und die Hierarchie muss immer mindestens einen Viewcontroller enthalten. Diesen Controller auf der untersten Ebene der Navigationshierarchie nennt man auch Rootviewcontroller des Navigationcontrollers.

Mit dem Interface Builder legen Sie in einem Storyboard einen Navigationcontroller über das entsprechende Symbol an; das ist ein orange-gelber Kreis mit einem dunklen Kleiner-als-Zeichen, das ausgewählte Objekt in der Objektbibliothek in Abbildung 4.15.

In einem Storyboard ist der Navigationcontroller durch einen Pfeil, der wie ein Übergang aussieht, mit seinem Rootviewcontroller verbunden (siehe Abbildung 4.15). Das ist indes kein echter Übergang, da Sie hierüber nur den Wert der Property rootViewController des Navigationcontrollers festlegen und kein Objekt der Klasse UIStoryboardSegue erzeugen.

Sie können einen anderen Rootviewcontroller festlegen, indem Sie eine Verbindung vom Navigation- zum neuen Rootviewcontroller ziehen und im Pop-over-Dialog den Eintrag root view controller auswählen (siehe Abbildung 4.16).

Abbildung 4.15 Navigationscontroller in einem Storyboard

Abbildung 4.16 Festlegen eines neuen Rootviewcontrollers

4.2.1Viewcontroller anzeigen und entfernen

Über die Methode pushViewController:animated: können Sie einen anderen Viewcontroller über den obersten Controller des Navigationsstapels legen. Der Navigationcontroller schiebt dabei den neuen View von rechts herein, wenn Sie für den Parameter animated den Wert YES übergeben.

Die Klasse UIViewController besitzt die Property navigationController. Diese Property verweist auf den Navigationcontroller, auf dem der Viewcontroller liegt, und sie hat den Wert nil, wenn sich der Viewcontroller nicht auf dem Stapel eines Navigationcontrollers befindet. Damit können Sie auch ohne einen Übergang relativ einfach einen neuen Viewcontroller auf den Navigationsstapel schieben. In einer Action-Methode sieht das in der Regel so aus:

[self.navigationController pushViewController:theController 
    animated:YES];

Listing 4.15 Viewcontroller auf den Navigationsstapel legen

In einem Storyboard können Sie diesen Viewwechsel auch durch einen Übergang vom Typ Push ausführen. Bei der Ausführung des Übergangs muss sich allerdings der Quellviewcontroller auch in der Hierarchie eines Navigationcontrollers befinden. Andernfalls erhalten Sie eine Fehlermeldung mit der Nachricht: Push segues can only be used when the source controller is managed by an instance of UINavigationController.

Über die Methode popViewControllerAnimated: können Sie den obersten Viewcontroller wieder aus der Hierarchie entfernen. Bei eingeschalteter Animation schiebt der Navigationcontroller den obersten View nach rechts aus dem Bildschirm, und nach dem Entfernen zeigt der Navigationcontroller wieder den View des darunterliegenden Viewcontrollers aus dem Navigationsstapel an. Es gibt allerdings noch andere Möglichkeiten, Viewcontroller vom Navigationsstapel zu entfernen. Über popToViewController:animated: können Sie zu dem Viewcontroller zurückspringen, den Sie im ersten Parameter angeben. Falls Sie zum Rootviewcontroller zurück möchten, können Sie dafür auch popToRootViewControllerAnimated: benutzen. Neben diesen Möglichkeiten per Programmcode können Sie jedoch auch den Zurück-Button (siehe Abschnitt 4.2.3, »Der Zurück-Button«) oder Übergänge des Typs Unwind (siehe Abschnitt 4.2.4, »Gehe drei Felder zurück«) einsetzen.

4.2.2Die Navigationsleiste

Der Navigationcontroller verwaltet jedoch nicht nur die Viewcontroller, sondern stellt auch eine Navigationsleiste bereit, die Sie im Interface Builder konfigurieren können. Wenn Sie einen Navigationcontroller anlegen, enthält er automatisch einen View der Klasse UINavigationBar (siehe Abbildung 4.15 links oben).

In der Navigationsleiste können Sie verschiedene Elemente anzeigen lassen, die Tabelle 4.4 aufführt. Sie hat einen festen Aufbau, und es gibt vier Positionen, an denen Sie Elemente anzeigen lassen können. Abbildung 4.17 stellt eine Leiste mit einem Prompt, einem Titel, einem linken und einem rechten Button dar.

Abbildung 4.17 Die Elemente der Navigationsleiste

Alternativ kann die Navigationsleiste auf der linken Seite einen Zurück-Button anzeigen, dessen Standardlayout – der typische Linkspfeil von iOS – von den anderen Standard-Buttons abweicht. Das Drücken des Zurück-Buttons entfernt den obersten Viewcontroller vom Navigationsstapel und zeigt den darunterliegenden an.

Abbildung 4.18 Zurück-Button in den Einstellungen des erweiterten Weckers

Die Elemente für die Navigationsleiste legen Sie jedoch nicht direkt in der Navigationsleiste, sondern in einem Navigation-Item an, das die Klasse UINavigationItem hat. Die Klasse UIViewController besitzt eine Property navigationItem, über die jeder Viewcontroller seinen eigenen Navigation-Item verwalten kann. Somit kann Cocoa Touch den Inhalt der Navigationsleiste in Abhängigkeit vom obersten Controller auf dem Navigationsstapel ändern. Der Interface Builder stellt den Navigation-Item in der Baumdarstellung innerhalb des Viewcontrollers dar (siehe Abbildung 4.19).

Abbildung 4.19 Der Navigation-Item im Viewcontroller

Die Navigationsleiste zeigt immer die Elemente des Navigation-Items des obersten Viewcontrollers an. Der Navigationcontroller tauscht also die Elemente in der Navigationsleiste automatisch aus, wenn Sie einen Viewcontroller auf den Stapel des Navigationcontrollers legen oder ihn davon entfernen.

Die Buttons in der Navigationsleiste haben die Klasse UIBarButtonItem, die allerdings keine Unterklasse von UIView ist. Sie können das Aussehen dieser Buttons auch nur sehr begrenzt verändern. Seit iOS 5 können Sie die Farbe über das Feld Tint im Attributinspektor des Interface Builders oder die Property tintColor frei festlegen. Im Attributinspektor können Sie außerdem den Button-Typ über das Feld Identifier wählen. Hier steht eine Reihe von vordefinierten Icons (z. B. für Play, Pause, Kamera) oder Texten (z. B. Save, Edit, Cancel) zur Verfügung.

Alternativ zu den Standardtypen steht der Button-Typ Custom zur Verfügung, bei dem Sie entweder einen beliebigen Text oder ein Bild anzeigen lassen. Das Bild sollte ungefähr 20 × 20 Punkte groß sein. Der Button verwendet jedoch nur die Alphamaske des Bildes für das Piktogramm.

Sie können auch in einem Bar-Button-Item oder im Titel der Navigationsleiste nahezu beliebige Views anzeigen lassen. Dazu ziehen Sie im Interface Builder einfach den gewünschten View auf den gewünschten Platz im Navigation-Item. Der Interface Builder weist dann diesen View der Property customView des Bar-Button-Items zu.

Ein Bar-Button-Item ist kein Control, und es verschickt auch nicht die üblichen Action-Events. Stattdessen gibt es im Verbindungsinspektor eine Action-Verbindung namens selector, der Sie eine Action-Methode zuweisen können. Diese Action-Methode ruft der Button auf, wenn Sie ihn drücken. In Storyboards können Sie über ein Bar-Button-Item auch einen Übergang auslösen. Das gilt jedoch nur, sofern Sie keinen View in den Button gelegt haben, der die Gesten selbst verarbeitet.

4.2.3Der Zurück-Button

Der Zurück-Button nimmt gegenüber den anderen Elementen eines Navigation-Items eine Sonderrolle ein. Er hat, wie der Name schon vermuten lässt, die feste Funktion, den obersten Viewcontroller vom Navigationsstapel zu entfernen. Außerdem unterscheidet sich seine Form (Linkspfeil) signifikant von den anderen Standard-Buttons. Sie können seinen Titel automatisch erzeugen lassen oder frei festlegen und ihm dabei auch eine eigene Farbe zuweisen.

Die Navigationsleiste zeigt niemals den Zurück-Button des aktuellen Controllers, sondern höchstens den seines Vorgängers an. Allerdings zeigt die Navigationsleiste keinen Zurück-Button an, wenn Sie im Navigation-Item einen linken Button festgelegt haben. Sie können also auch den linken Button im Navigation-Item anstelle des Zurück-Buttons verwenden.

Die Navigationsleiste sucht den Button für die linke Seite in der folgenden Reihenfolge. Sie verwendet dabei das erste Element, das verschieden von nil ist:

1. den linken Button im Navigation-Item des aktuellen Viewcontrollers
2. den Zurück-Button im Navigation-Item des Viewcontrollers unterhalb des aktuellen. Sie können dessen Titel im Interface Builder über den Attributinspektor des Items festlegen, indem Sie in das Feld Back Button einen Text eingeben.
3. einen Zurück-Button, der aus dem Titel des Navigation-Items des Viewcontrollers unter dem aktuellen Viewcontroller erzeugt wird

Diesen Ablauf zeigt Abbildung 4.20 grafisch. Dabei stellen die gestrichelten Pfeile die Reihenfolge der zu prüfenden Elemente dar, die Cocoa Touch in der Navigationsleiste an der Stelle des Fragezeichens anzeigt.

Abbildung 4.20 Suchreihenfolge für den linken Button der Navigationsleiste

Sie erhalten also nur den typischen Linkspfeil als Zurück-Button, wenn Sie ihn über den entsprechenden Titel explizit festlegen (Fall 2) oder wenn die Navigationsleiste ihn aus dem Titel des Vorgängers automatisch erzeugt (Fall 3).

4.2.4Gehe drei Felder zurück

Mit iOS 6 hat Apple eine weitere Möglichkeit eingeführt, im Interface Builder eine Rücksprungmöglichkeit zu weiter unten liegenden Viewcontrollern auf dem Navigationsstapel zu konfigurieren. Als Basis dafür dienen die Unwind-Übergänge zusammen mit speziellen Action-Methoden. Diese Exit-Methoden haben den Ergebnistyp IBAction und immer genau einen Parameter mit dem Typ UIStoryboardSegue. Über das grüne Exit-Symbol im Interface Builder lassen sich Unwind-Übergänge zu den Exit-Methoden wie in Abbildung 4.21 herstellen. Der Interface Builder stellt dabei zwar die Unwind-Übergänge als Objekte in der View-Hierarchie, jedoch nicht als Pfeile auf der Zeichenfläche dar (siehe Abbildung 4.21).

Abbildung 4.21 Erzeugung eines »Unwind«-Übergangs

Abbildung 4.22 »Unwind«-Übergang in der Baumansicht

Wenn der Nutzer einen Unwind-Übergang auslöst, durchsucht der Übergang ausgehend vom obersten Viewcontroller den Navigationsstapel von oben nach unten und ruft die Exit-Methode beim ersten Viewcontroller auf, der eine passende Methode besitzt und deren Ausführung erlaubt. Danach entfernt er alle darüberliegenden Viewcontroller vom Navigationsstapel und zeigt den gefundenen Viewcontroller an.

Sie können das Suchverhalten des Unwind-Übergangs über die Methode canPerformUnwindSegueAction:fromViewController:withSender: beeinflussen. Der Übergang verwendet bei der Suche im Navigationsstapel das Ergebnis dieser Methode, anstatt nach der Exit-Methode zu suchen. Wenn dieser Methodenaufruf also NO liefert, ignoriert der Übergang den Viewcontroller und sucht weiter unten im Stapel. Liefert er hingegen YES als Ergebnis, dann verwendet der Übergang diesen Viewcontroller für den Rücksprung ungeachtet dessen, ob der Controller tatsächlich die Exit-Methode implementiert. Stellen Sie also bei dem Rückgabewert immer sicher, dass der Controller auch die entsprechende Exit-Methode besitzt. Das können Sie in der Regel über die Methode respondsToSelector: erreichen, wie das Listing 4.16 zeigt:

- (BOOL)canPerformUnwindSegueAction:(SEL)inAction 
    fromViewController:(UIViewController *)inViewController 
    withSender:(id)inSender {
    if([self respondsToSelector:inAction]) {
        return ...;
    }
    else {
        return NO;
    }
}

Listing 4.16 Überprüfung der Exit-Methode über »respondsToSelector:«

Alternativ können Sie auch die Methode canPerformUnwindSegueAction:fromViewController:withSender: der Oberklasse wie in Listing 4.17 aufrufen, da die Implementierung dieser Methode in der Klasse UIViewController auch nur die Existenz der Exit-Methode prüft.

- (BOOL)canPerformUnwindSegueAction:(SEL)inAction 
    fromViewController:(UIViewController *)inViewController 
    withSender:(id)inSender {
    if([super canPerformUnwindSegueAction:inAction 
        fromViewController:inViewController 
        withSender:inSender]) {
        return ...;
    }
    else {
        return NO;
    }
}

Listing 4.17 Überprüfung der Exit-Methode über die Oberklasse

Am Beispielprojekt Unwind können Sie das Verhalten von Unwind-Übergängen untersuchen, indem Sie einen Navigationsstapel mit zwei unterschiedlichen Controllertypen befüllen. Über den Button Unwind schieben Sie einen Viewcontroller der Klasse UnwindViewController, die die Exit-Methode jumpBack: besitzt, auf den Stapel. Außerdem zeigt dieser Controller einen Schalter an, mit dem Sie den Rückgabewert der Methode canPerformUnwindSegueAction:fromViewController:withSender: festlegen können. Über den Button Controller können Sie Viewcontroller der Klasse ViewController auf den Navigationsstapel schieben, die keine Exit-Methode besitzen.

Über diese beiden Buttons lassen sich nun beliebig viele Viewcontroller auf den Navigationsstapel legen. Wenn Sie den Done-Button in der Navigationsleiste drücken, führt die Applikation einen Unwind-Übergang aus, der zu dem ersten Unwind-Viewcontroller zurückspringt, dessen Schalter auf 1 steht. In der Log-Ausgabe zeigt Ihnen die App zusätzlich die Aufrufe der Methoden jumpBack: und canPerformUnwindSegueAction:fromViewController:withSender: an.

4.2.5Die Werkzeugleiste

Sie können Werkzeugleisten sowohl wie gewöhnliche Elemente in Ihre Views einbauen als auch über einen Navigationcontroller verwalten lassen, der sie automatisch am unteren Bildschirmrand platziert. Bei dieser Variante hängt der Inhalt der Werkzeugleiste von dem gerade angezeigten Viewcontroller ab. Damit der Navigationcontroller eine Werkzeugleiste anzeigt, müssen Sie ihn entsprechend konfigurieren. Dazu aktivieren Sie im Interface Builder im Attributinspektor des Navigationcontrollers den Schalter Shows Toolbar (siehe Abbildung 4.23).

Abbildung 4.23 Aktivierung der Werkzeugleiste im Interface Builder

Sie können jedem Viewcontroller über die Property toolbarItems ein Array mit den Elementen für die Werkzeugleiste zuweisen. Dabei müssen die Elemente in dem Array die Klasse UIBarbuttonItem haben. Im Interface Builder können Sie die Bar-Button-Items auch einfach auf den Viewcontroller ziehen; er legt dann automatisch dieses Array an. Die Werkzeugleiste zeigt die Elemente aus dem Array von links nach rechts an, und der Navigationcontroller verwendet für seine Werkzeugleiste die Elemente des Viewcontrollers, der zuoberst auf dem Navigationsstapel liegt.

Sie können das Layout der Elemente in der Werkzeugleiste über zusätzliche, feste und flexible Abstände beeinflussen. Dabei können Sie mit einem flexiblen Abstand den kompletten verfügbaren Freiraum belegen und so beispielsweise die dahinterliegenden Elemente an den rechten Rand schieben. Oder Sie zentrieren die Elemente, indem Sie links und rechts davon einen flexiblen Abstand legen.

Wenn Sie im Storyboard Bar-Button-Items zu einem Viewcontroller hinzufügen, zeigt der Interface Builder automatisch eine virtuelle Werkzeugleiste an, in der diese Elemente erscheinen. Diese Werkzeugleiste gehört jedoch nicht zum Viewcontroller und dient nur zur Visualisierung der Elemente; in der App ist sie nicht vorhanden. Sie können diese virtuelle Werkzeugleiste auch über den Attributinspektor des Viewcontrollers explizit ein- oder ausschalten, indem Sie in der Rubrik Simulated Metrics in der Auswahl Bottom Bar den gewünschten Wert einstellen (siehe Abbildung 4.24).

Abbildung 4.24 Anzeigen der virtuellen Werkzeugleiste

Sehr praktisch ist auch die Auswahl des Punktes Inferred. Dann übernimmt der Viewcontroller die Einstellung seines Vorgängers. Dabei gibt es zwei mögliche Arten von Vorgängern:

• Der Vorgänger des Rootviewcontrollers eines Navigationcontrollers ist der Navigationcontroller. In diesem Fall zeigt Viewcontroller die gleiche Werkzeugleiste wie der Navigationcontroller an.
• Das Gleiche gilt, wenn Sie zwei Viewcontroller durch einen Übergang vom Typ Push miteinander verbinden. Der Zielcontroller zeigt die gleiche Werkzeugleiste wie der Ausgangscontroller an.

Sie können nun in die simulierten Werkzeugleisten Elemente vom Typ UIBarButtonItem aus der Bibliothek hineinziehen und konfigurieren. Der Interface Builder zeigt Ihnen eine Voransicht der Werkzeugleiste der App, wobei er allerdings auch flexible und feste Abstände durch gestrichelte Linien darstellt.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.