4.5Der Tabbarcontroller

Viele Apps enthalten mehrere Viewcontroller, die untereinander keine Hierarchie haben. Es wäre also wünschenswert, sie gleichberechtigt nebeneinander liegen zu haben. Sie können natürlich einen Viewcontroller erstellen, der einen Button für jeden Viewcontroller besitzt. Wenn der Nutzer den Button drückt, zeigt die Applikation den Viewcontroller als modalen Dialog oder über einen Navigationcontroller an. Dieses Vorgehen hat allerdings für den Nutzer den Nachteil, dass er bei einem Controllerwechsel immer zuerst zu der Ansicht mit den Buttons zurückkehren muss. Ein direkter Wechsel ist so nur sehr schwer möglich.

Ein Navigationcontroller oder modale Dialoge ergeben für den Wechsel also wenig Sinn. Eine Tabbarnavigation, auch Reiternavigation genannt, ist hierfür besser geeignet. Sie verwaltet beliebig viele Viewcontroller, von denen sie jedoch immer nur einen anzeigen kann. Über die Tabbar können Sie den Viewcontroller für die Anzeige auswählen. Dabei stellt die Tabbar für jeden Viewcontroller ein beschriftetes Icon dar. In Abbildung 4.48 sehen Sie ein Beispiel für eine Tabbar. Sie gehört zum Beispielprojekt Games aus Kapitel 6, »Models, Layer, Animationen«.

Abbildung 4.48 Eine Tabbar mit vier Einträgen

4.5.1Aufbau einer Reiternavigation

Für die Erstellung einer Tabbarnavigation in einem Storyboard legen Sie zuerst einen Tabbarcontroller an, indem Sie den entsprechenden Viewcontroller auf die Arbeitsfläche ziehen. Der Interface Builder erzeugt mit dem Tabbarcontroller direkt zwei Viewcontroller an. Sie können diese Controller in Ihrer App verwenden oder bei Nichtgefallen einfach löschen.

Um andere Viewcontroller zum Tabbarcontroller hinzuzufügen, ziehen Sie eine Verbindung vom Tabbarcontroller zum Viewcontroller und wählen den Punkt view controllers im Pop-over-Menü aus. In Abbildung 4.49 sehen Sie eine Tabbarcontroller-Szene in einem Storyboard. Der Tabbarcontroller auf der Arbeitsfläche stellt am unteren Rand seine Tabbar dar. Sie können die Reihenfolge der Einträge in der Tabbar – und damit auch in der App – anpassen, indem Sie dort die Einträge mit der Maus verschieben.

Abbildung 4.49 Eine Tabbarcontroller-Szene in einem Storyboard

Beim Einfügen eines Viewcontrollers in einen Tabbarcontroller legt der Interface Builder automatisch ein Objekt der Klasse UITabBarItem unterhalb des Viewcontrollers an. Über den Attributinspektor dieses Elements legen Sie das Icon und die Beschriftung des Viewcontrollers in der Tabbar fest. Für das Icon können Sie jedes Bild aus dem Ressourcenordner der App benutzen; alternativ können Sie auch Bilder aus den Image-Assets auswählen.

Außerdem können Sie über den Tabbar-Item die Beschriftung der Plakette (beziehungsweise Badge) bestimmen. Die Plakette ist der rote Kreis mit der 3 in Abbildung 4.48. Über die Property tabBarItem der Klasse UIViewController können Sie auf den Tabbar-Item des Viewcontrollers zugreifen.

Über das Delegate des Tabbarcontrollers können Sie die Controllerauswahl beeinflussen oder sich darüber informieren lassen. Der Tabbarcontroller fragt das Delegate über die Methode tabBarController:shouldSelectViewController:, ob er den angegebenen Viewcontroller anzeigen darf. Sie können das unterbinden, indem Sie NO zurückgeben. Nach der Anzeige eines Viewcontrollers ruft der Tabbarcontroller die Delegate-Methode tabBarController:didSelectViewController: auf.

4.5.2Plaketten

Viele Apps verwenden Plaketten (Badges), um auf Neuigkeiten in den Tabs hinzuweisen. Sie können den angezeigten Wert der Plakette über die Property badgeValue der Klasse UITabBarItem setzen. Anders als beim Applikationsicon können Sie der Plakette eines Tabbareintrags auch eine (sehr) kurze Zeichenkette übergeben, die sie auch klaglos anzeigt. Wenn Sie keine Plakette anzeigen möchten, müssen Sie den Wert nil verwenden. Übergeben Sie stattdessen eine leere Zeichenkette, zeigt der Tabbareintrag auch eine leere Plakette an. Listing 4.42 enthält ein Beispiel dafür, wie ein Viewcontroller einen numerischen Wert in seine eigene Plakette setzt. Dazu müssen Sie die Zahl in eine Zeichenkette umwandeln. Den Wert 0 ändern Sie jedoch in nil, um die Plakette zu löschen.

NSUInteger theBadgeValue = ...;
NSString *theValue = theBadgeValue == 0 ? nil :
    [NSString stringWithFormat:@"%d", theBadgeValue];
self.tabBarItem.badgeValue = theValue;

Listing 4.42 Aktualisierung der Plakette

Das Beispielprojekt Games in Kapitel 6 verwendet die Plakette eines Tabbareintrags, um die Anzahl neuer Highscores anzuzeigen.

4.5.3Für ein paar Controller mehr

Ein Tabbarcontroller kann beliebig viele Viewcontroller enthalten; die Tabbar kann hingegen nur maximal fünf Einträge nebeneinander anzeigen. Bei sechs und mehr Controllern verwendet der Tabbarcontroller einen zusätzlichen Navigationcontroller mit eingebettetem Tableviewcontroller. Darüber können Sie auf die restlichen Viewcontroller zugreifen. Die Tabbar verwendet in diesem Fall den Platz für den fünften Tabbareintrag zur Anzeige des Mehreintrags, der zu diesem Tableviewcontroller führt. Abbildung 4.50 stellt diese Struktur dar.

Abbildung 4.50 Struktur des Tabbarcontrollers

Der Tableview des Mehreintrags listet alle Tabbarelemente der Viewcontroller auf, die keinen Platz in der Tabbar gefunden haben. Wenn Sie einen Viewcontroller aus der Tabelle auswählen, zeigt ihn der Tabbarcontroller an, indem er ihn auf den Navigationcontroller schiebt.

Die Auslagerung der Einträge aus der Tabbar in den Tableview geschieht dabei vollkommen automatisch. [Anm.: Das gilt jedoch nur für die App; der Interface Builder quetscht alle Tabbareinträge nebeneinander, bis sie Sardinen in einer Dose ähneln.] Sie haben dafür also keinen zusätzlichen Aufwand. Andererseits können Sie die Anzeige des Mehreintrags nicht unterdrücken oder bei weniger als sechs Viewcontrollern erzwingen.

Über den Button Bearbeiten in der Navigationsleiste gelangen Sie zu einer Ansicht, mit der Sie die Einträge in der Tabbar anpassen. Diese Ansicht zeigt alle Tabbareinträge. Sie können jeden Eintrag auf die Tabbar ziehen und dadurch deren Einträge neu festlegen (siehe Abbildung 4.51).

Abbildung 4.51 Bearbeiten der Tabbar

Der Tabbarcontroller speichert diese neue Anordnung allerdings nicht permanent ab. Das Beispielprojekt More demonstriert ein Vorgehen, wie Sie die Anordnung der Tabbareinträge in den Nutzereinstellungen speichern. Dazu weist es jedem Viewcontroller eine fortlaufende Nummer zu. Wenn Sie die Viewcontroller umordnen, verändern Sie die Reihenfolge dieser Nummern. Das Programm speichert diese Reihenfolge in den User-Defaults ab und kann beim Neustart daraus die Anordnung der Viewcontroller wiederherstellen.

Zur Ablage der Indexwerte in den Viewcontrollern verwendet die App die Property tag der Tabbareinträge. Nach dem Laden des Tabbarcontrollers aus der NIB-Datei weist sie zunächst den Tabbareinträgen die Indexwerte zu. Dazu iteriert die Methode application:didFinishLaunchingWithOptions: über die Controller. Danach kann die App die Reihenfolge der Controller wiederherstellen, was in der Methode restoreTabBar geschieht:

NSArray *theControllers = 
    self.tabBarController.viewControllers;
NSUInteger theIndex = 0;

for (UIViewController *theController in theControllers) {
    theController.tabBarItem.tag = theIndex++;
}
[self restoreTabBar];

Listing 4.43 Nummerierung der Tabbareinträge

Nach jeder Änderung der Tabbareinträge soll die App die neue Reihenfolge in den User-Defaults abspeichern. Das erfolgt über die Delegate-Methode tabBarController:willEndCustomizingViewControllers:changed: des Tabbarcontrollers, deren Implementierung Listing 4.44 enthält. Da Sie nur bei einer Änderung der Reihenfolge die Werte speichern müssen, überprüft die Methode den Wert des Parameters change. Über die Key-Value-Coding-Methode valueForKeyPath: erzeugt die Methode das Array mit den Viewcontroller-Positionswerten. Das Array theIndexes enthält also die Werte der Tags der Tabbarelemente in der aktuellen Reihenfolge der Tabbar. Dabei sind die Arraye-Elemente allerdings Objekte der Klasse NSNumber, da die Instanzen von NSArray keine einfachen Datentypen wie int oder NSInteger direkt speichern können.

- (void)tabBarController:(UITabBarController *)inController 
    willEndCustomizingViewControllers:(NSArray *)inControllers 
    changed:(BOOL)inChanged {
    if(inChanged) {
        NSArray *theIndexes = 
            [inControllers valueForKeyPath:@"tabBarItem.tag"]; 
        NSUserDefaults *theDefaults = 
            [NSUserDefaults standardUserDefaults];
        [theDefaults setObject:theIndexes 
            forKey:@"tabBarItems"];
        [theDefaults synchronize];
    }
}

Listing 4.44 Abspeichern der Reihenfolge in den User-Defaults

Jetzt fehlt nur der Code zur Wiederherstellung der Reihenfolge in der Tabbar. Das übernimmt die Methode restoreTabBar, die Sie in Listing 4.45 sehen. Sie liest zuerst die Indexwerte aus den User-Defaults. Die Schleife durchquert die Viewcontroller in der Reihenfolge der Indexwerte aus dem Tabbarcontroller und fügt sie in ein veränderliches Array ein. Schließlich weist sie dieses Array dem Tabbarcontroller zu.

- (void)restoreTabBar { 
    NSUserDefaults *theDefaults = 
        [NSUserDefaults standardUserDefaults];
    NSArray *theIndexes = 
        [theDefaults arrayForKey:@"tabBarItems"];
    NSArray *theViewControllers = 
        self.tabBarController.viewControllers; 

    if(theIndexes.count == theViewControllers.count) {
        NSMutableArray *theControllers = [NSMutableArray 
            arrayWithCapacity:theIndexes.count];
        for(NSNumber *theIndex in theIndexes) {
            NSUInteger theValue = theIndex.unsignedIntValue;

            [theControllers addObject: 
                [theViewControllers objectAtIndex:theValue]];
        }
        self.tabBarController.viewControllers =
            theControllers;
    }
}

Listing 4.45 Wiederherstellung der Reihenfolge in der Tabbar

Die if-Abfrage in Listing 4.45 wirkt auf den ersten Blick überflüssig; sie vermeidet jedoch zwei Probleme. Beim ersten Start existieren noch keine Indexwerte in den User-Defaults, und ohne diese Abfrage erhielte der Tabbarcontroller ein leeres Array, da die Methode den Schleifenblock deswegen nicht ausführt. Dadurch bliebe somit auch die Tabbar leer.

Ein ähnlicher Effekt kann bei einer Aktualisierung Ihrer App auftreten, bei der Sie die Tabbar erweitern oder verkürzen. Bei einer Erweiterung würden Viewcontroller herausfallen, und eine Verkürzung hätte einen Fehler mit Programmabsturz zur Folge.

In einem Storyboard müssen Sie dem Tabbarcontroller sein Delegate über den Programmcode zuweisen. Das ist relativ einfach, wenn der Tabbarcontroller der initiale Viewcontroller in dem Storyboard ist. Hier können Sie sich den Tabbarcontroller über die Property rootViewController des Fensters holen. In der More-App für das Storyboard finden Sie dazu den entsprechenden Code in der Methode application:didFinishLaunchingWithOptions:.

self.tabBarController = (UITabBarController *)
    self.window.rootViewController;
self.tabBarController.delegate = self;

Listing 4.46 Delegate des Tabbarcontrollers setzen

Wenn der Tabbarcontroller nicht der initiale Controller in seinem Storyboard ist, funktioniert diese Zuweisung nicht, weil das Fenster ja auf einen anderen Rootviewcontroller verweist. Hier müssen Sie das Delegate setzen, bevor Sie den Tabbarcontroller anzeigen. Wenn Sie dafür einen Übergang verwenden, ist die Methode prepareForSegue:sender: der richtige Platz. Listing 4.47 setzt das Application-Delegate als Delegate des Tabbarcontrollers in dieser Methode.

- (void)prepareForSegue:(UIStoryboardSegue *)inSegue
    sender:(id)inSender {
    if([inSegue.destinationViewController
        isKindOfClass:[UITabBarController class]) {
        id theDelegate =
            [[UIApplication sharedApplication] delegate];

        [inSegue.destinationViewController
            setDelegate:theDelegate];
    }
}

Listing 4.47 Delegate des Tabbarcontrollers bei einem Übergang setzen

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.