4.2 Der Navigationcontroller

Ein Containerviewcontroller 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 einer XIB-Datei oder einem Storyboard einen Navigationcontroller über das entsprechende Symbol an; das ist ein orange-gelber Kreis mit einem grauen Linkspfeil. In Abbildung 4.17 können Sie die XIB-Datei des Navigationcontrollers unseres Fototagebuchprojekts aus Kapitel 5, »Daten, Tabellen und Controller«, sehen. Der Navigationcontroller erhält automatisch einen Rootviewcontroller, der in XIB-Dateien die Klasse UIViewController hat, während er in Storyboards ein Tableviewcontroller ist. Sie können diesen Controller entweder nach Ihren Bedürfnissen konfigurieren oder durch einen bestehenden Viewcontroller ersetzen. Letzteres erreichen Sie in einem XIB, indem Sie den bestehenden Controller auf den Rootviewcontroller ziehen.

Abbildung 4.17 Navigationcontroller in einer XIB-Datei

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

Abbildung 4.18 Navigationcontroller in einem Storyboard

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.19).

Abbildung 4.19 Festlegen eines neuen Rootviewcontrollers

4.2.1 Viewcontroller 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.

In einem Storyboard können Sie diesen View-Wechsel 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.

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 Actionmethode sieht das in der Regel so aus:

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

Listing 4.15 Viewcontroller auf den Navigationsstapel legen

Ü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 auch 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ückbutton (siehe Abschnitt 4.2.3) oder Übergänge des Typs Unwind (siehe Abschnitt 4.2.4) einsetzen.

4.2.2 Die 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.20).

Abbildung 4.20 Die Elemente der Navigationsleiste

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.20 stellt eine Leiste mit einem Prompt, einem Titel, einem linken und einem rechten Button dar.

Alternativ kann die Navigationsleiste auf der linken Seite auch einen Zurückbutton anzeigen, dessen Standardlayout – der typische Linkspfeil von iOS – von den anderen Standardbuttons abweicht.

Abbildung 4.21 Zurückbutton in den Einstellungen des erweiterten Weckers

Diese Elemente legen Sie jedoch nicht direkt in die Navigationsleiste, sondern in einem Navigation-Item an, das die Klasse UINavigationItem hat. Die Klasse UIViewController besitzt eine Property navigationItem, über die jeder Viewcontroller ein eigenes 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 das Navigation-Item in der Baumdarstellung innerhalb des Viewcontrollers dar (siehe Abbildung 4.17 und Abbildung 4.18).

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. Die Farbe des Buttons bestimmt Cocoa Touch bis iOS-Version 4 (einschließlich) automatisch über die Hintergrundfarbe der Navigationsleiste und den Typ des Buttons. Dabei ist die Schriftfarbe immer Weiß. Seit iOS 5 können Sie die Farben frei festlegen, worauf Abschnitt 4.8, »Regelbasierte Anpassung der Oberfläche«, genauer eingeht.

Wenn Sie für den Button einen Standardtyp und für die Leiste eine der drei Standardfarben wählen, dann ist der Button entweder graublau (Leistenfarbe Default, siehe Abbildung 4.20) beziehungsweise schwarz (Leistenfarbe Black Translucent oder Black Opaque, wie in Abbildung 4.21). Eine Ausnahme bilden die blauen Standardbuttons Save (UIBarButtonSystemItemSave) und Done (UIBarButtonSystemItemDone). Bei einer individuellen Hintergrundfarbe für die Navigationsleiste, die Sie über die Property tintColor oder die Farbauswahl Tint des Attributinspektors der Navigationsleiste im Interface Builder setzen können, erhalten alle Buttons diese Farbe als Hintergrundfarbe. Lediglich die Farbe des Save- und des Done-Buttons ist etwas dunkler. Dabei sollten Sie jedoch vorsichtig mit zu hellen Farben sein, da die Buttons immer eine weiße Beschriftung haben. Seit iOS 5 können Sie den Buttons – analog zur Navigationsleiste – auch eine beliebige Farbe zuweisen.

Alternativ zu den Standardtypen steht auch der Buttontyp Custom zur Verfügung, bei dem Sie entweder einen beliebigen Text oder ein Bild anzeigen lassen können. Das Bild sollte ungefähr 20 × 20 Pixel groß sein. Der Button verwendet jedoch nur die Alphamaske des Bildes als weißes Piktogramm. Für Custombuttons gibt es drei mögliche Darstellungsarten:

• Plain: Der Button hat keinen Rahmen. Cocoa Touch zeichnet den Titel oder das Bild direkt auf die Leiste.
• Bordered: Die Buttons erhalten einen Rahmen. Die meisten Beispiele in diesem Kapitel verwenden diese Darstellungsart.
• Done: Die Buttons erhalten einen Rahmen und eine hervorgehobene Darstellung analog zum Save- und Done-Button.

Sie können auch in einem Barbutton-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 Barbutton-Items zu.

Ein Barbutton-Item ist kein Control, und es verschickt auch nicht die üblichen Actionevents. Stattdessen gibt es im Verbindungsinspektor eine Actionverbindung namens selector, der Sie eine Actionmethode zuweisen können. Diese Actionmethode ruft der Button auf, wenn Sie ihn drücken. In Storyboards können Sie über ein Barbutton-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.3 Der Zurückbutton

Der Zurückbutton 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 Standardbuttons. Bis iOS 4 konnten Sie beim Zurückbutton nur den Titel beeinflussen. Seit iOS 5 können Sie auch die Farbe festlegen. Sie können dem Zurückbutton zwar eine Actionmethode zuweisen – Cocoa Touch ignoriert sie allerdings schlichtweg und ruft sie niemals auf.

Die Navigationsleiste zeigt niemals den Zurückbutton des aktuellen Controllers, sondern höchstens den seines Vorgängers an. Allerdings zeigt die Navigationsleiste keinen Zurückbutton 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ückbuttons 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 linke Button im Navigation-Item des aktuellen Viewcontrollers
2. den Zurückbutton 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ückbutton, der aus dem Titel des Navigation-Items des Viewcontrollers unter dem aktuellen Viewcontroller erzeugt wird

Diesen Ablauf stellt Abbildung 4.22 grafisch dar. 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.22 Suchreihenfolge für den linken Button der Navigationsleiste

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

4.2.4 Gehe drei Felder zurück

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

Abbildung 4.23 Erzeugung eines »Unwind«-Übergangs

Abbildung 4.24 »Unwind«-Übergang in der Baumansicht

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

Sie können das Suchverhalten des Unwind-Übergangs allerdings ü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 unter 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 einen Aufruf der Methode in der Oberklasse oder der Methode respondsToSelector: erreichen. Listing 4.16 stellt diese beiden Varianten dar:

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

- (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

Am Beispielprojekt Unwind können Sie das Verhalten von Unwind-Übergängen untersuchen, indem Sie einen Navigationsstapel mit zwei unterschiedlichen Controllertypen befüllen können. Über den Button Unwind in der Werkzeugleiste schieben Sie einen Viewcontroller der Klasse UnwindViewController auf den Stapel, der die Exit-Methode jumpBack: besitzt. Außerdem zeigt dieser Controller in der Werkzeugleiste noch 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 Logausgabe zeigt Ihnen die App zusätzlich die Aufrufe der Methoden jumpBack: und canPerformUnwindSegueAction:fromViewController:withSender: an.

4.2.5 Die 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.25).

Abbildung 4.25 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. Der Navigationcontroller zeigt automatisch die Elemente desjenigen Viewcontrollers an, der zuoberst auf dem Navigationsstapel liegt, und die Werkzeugleiste ordnet dabei die enthaltenen Elemente immer von links nach rechts an.

Sie können das Layout zusätzlich über feste und flexible Abstände beeinflussen, die den Abstand zwischen zwei Barbutton-Items vergrößern. Dabei können Sie mit einem flexiblen Abstand den kompletten verfügbaren Freiraum belegen und so beispielsweise die dahinter liegenden Elemente an den rechten Rand schieben. Oder Sie zentrieren die Elemente, indem Sie links und rechts davon einen flexiblen Abstand legen.

In einem Storyboard lassen sich die Toolbar-Items der Viewcontroller direkt verwalten. Dazu muss der View eines Viewcontrollers eine Toolbar anzeigen. Das können Sie über das Menü Bottom Bar in der Rubrik Simulated Metrics im Attributinspektor des Viewcontrollers erreichen. Entweder wählen Sie dort einen der Punkte Toolbar, Black Toolbar oder Translucent Black Toolbar aus; dann zeigt der View im Interface Builder immer eine Werkzeugleiste an (siehe Abbildung 4.26).

Abbildung 4.26 Anzeige der simulierten Werkzeugleiste einschalten

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. Er übernimmt also auch deren Farbe.
• 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 Symbole darstellt (siehe Abbildung 4.27).

Abbildung 4.27 Werkzeugleiste in einem Storyboard

Analog dazu können Sie Toolbar-Items eines Viewcontrollers in einer XIB-Datei verwalten. Dort müssen Sie allerdings immer die Anzeige einer Toolbar im Attributinspektor einschalten. Außerdem müssen Sie das Viewcontroller-Objekt über eine XIB-Datei anlegen.

4.2.6 Navigations- und Werkzeugleisten gestalten

Bis auf die Farbe können Sie das Aussehen der Navigations- oder Werkzeugleiste nicht beeinflussen. Bei einer Änderung der Farbe verändern Sie allerdings vor iOS 5 leider auch immer die Farbe der Buttons. Mit den Standardleisten haben Sie also nur sehr eingeschränkte Gestaltungsmöglichkeiten.

Über Unterklassen von UINavigationBar und UIToolbar lassen sich jedoch diese Leisten freier gestalten. Die Unterklassen können über eine Implementierung der Methode drawRect: eigene Hintergrundmuster und -farben zeichnen.

Das Beispielprojekt Bars auf der beiliegenden DVD zeigt einen Navigationcontroller mit eigener Navigations- und Werkzeugleiste. Die Navigationsleiste hat die Klasse NavigationBar, die ein Bild als Hintergrund anzeigt. Dazu verwendet sie den Code aus Listing 4.17 in einer Unterklasse von UINavigationBar.

- (void)drawRect:(CGRect)inRect {
    UIImage *theImage = [UIImage imageNamed:@"background.png"];
    [theImage drawAsPatternInRect:self.bounds];
}

Listing 4.17 Anzeige eines Hintergrundbildes

Sie können dagegen einem Navigationcontroller nicht einfach eine neue Navigationsleiste zuweisen, weil die Property navigationBar nicht schreibbar ist. Wenn Sie den Navigationcontroller hingegen über eine XIB-Datei oder ein Storyboard erzeugen, können Sie ihm jedoch im Identitätsinspektor der Navigationsleiste eine eigene Klasse zuordnen.

Cocoa Touch legt die Farbe der Buttons auch in einer eigenen Navigationsleiste über deren Farbe fest. Sie können also über eine eigene Klasse für die Navigationsleiste auch die Farbgebung der Buttons von der Farbe der Leiste trennen.

Das Beispielprogramm verwendet außerdem eine Unterklasse von UIToolbar, um eine Werkzeugleiste mit eigenem Hintergrundmuster darzustellen. Die drawRect:-Methode aus Listing 4.18 füllt dazu die vorhandene Fläche zunächst mit weißer Farbe und zeichnet darauf rote Schrägstriche, sodass das typische Muster einer Bonbonstange oder einer Verkehrsbake entsteht:

- (void)drawRect:(CGRect)inRect {
    CGSize theSize = self.bounds.size;
    CGFloat theX = 0;
    CGContextRef theContext = UIGraphicsGetCurrentContext();

    CGContextSaveGState(theContext);
    CGContextSetRGBFillColor(theContext, 1.0, 1.0, 1.0, 1.0);
    CGContextFillRect(theContext, self.bounds);
    CGContextSetRGBFillColor(theContext, 1.0, 0.0, 0.0, 1.0);
    while(theX < theSize.width) {
        CGContextMoveToPoint(theContext, theX, 0.0);
        CGContextAddLineToPoint(theContext,
            theX + theSize.height, 0.0);
        CGContextAddLineToPoint(theContext,
            theX, theSize.height);
        CGContextAddLineToPoint(theContext,
            theX – theSize.height, theSize.height);
        CGContextClosePath(theContext);
        CGContextFillPath(theContext);
        theX += 2 * theSize.height;
    }
    CGContextRestoreGState(theContext);
}

Listing 4.18 Zeichnen eines Hintergrundmusters für eine Werkzeugleiste

Für die Werkzeugleiste gilt das Gleiche wie für die Navigationsleiste. Um sie verwenden zu können, müssen Sie die Unterklasse im Identitätsinspektor der Werkzeugleiste des Navigationcontrollers zuweisen. Ein Ändern der Werkzeugleiste per Programmcode ist auch hier nicht möglich.

Ab iOS 5 ist es dagegen möglich, einer Werkzeugleiste über die Methode setBackgroundImage:forToolbarPosition:barMetrics: ein Bild als Hintergrund zuzuweise. Das geht in dieser Version auch bei Navigationsleisten über die Methode setBackgroundImage:forBarMetrics:.

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.