Tutorial: UITabBarController

In diesem Tutorial wird erklärt, wie ein UITabBarController benutzt wird, um zwischen verschiedenen Views hin und her zu wechseln. Dazu werden in dem Beispiel zwei Views angelegt. Für beide Views wird jeweils ein eigener ViewController und eine XIB-Datei erstellt, die die UIView enthält. Außerdem wird beschrieben, wie sich der Text und die Icons (UIImage) in der TabBar (UITabBarItem) anpassen lassen.

Die fertige App ist auf folgenden Screenshots zu sehen. Über die TabBar kann zwischen einer View mit grünem Hintergrund zu einer View mit rotem Hintergrund gewechselt werden.

Auf dem folgenden Diagramm sind die Zusammenhänge zwischen den Objekten und Klassen zu sehen, die im Laufe des Tutorials angelegt und verbunden werden. Es empfielt sich regelmäßig einen Blick darauf zu werfen, wenn Unklarheiten auftreten, wie die Objekte und Klassen zusammenhängen.

Gestartet wird mit dem Anlegen einer iOS Application (⌘+⇧+N). In dem Fenster wählt man unter iOS den Eintrag Application aus. Als Template wird Empty Application selektiert.

Als Product Name für die App verwenden wir TabBarControllerDemoApp.

Abschließend wird ein Projekt-Verzeichnis gewählt.

Nach dem Klick auf Create öffnet Xcode das neue Projekt.

Nun wird der ViewController für die grüne View mit ⌘+N angelegt. In dem Fenster wählt man unter iOS den Eintrag Cocoa Touch aus. Als Template wird Objective-C class selektiert und mit Next bestätigt.

Als Namen für die Class wählt man GreenViewController und klickt auf Next.

Dann wird mit Create die Klasse erzeugt.

Nun muß in der Interface-Datei GreenViewController.h noch festgelegt werden, daß es sich um einen ViewController handelt. Dazu wird einfach UIViewController ergänzt, so daß der Inhalt folgendermaßen aussieht:

//
//  GreenViewController.h
//  TabBarControllerDemoApp
//
//  Created by Jörn Hameister on 28.04.12.
//  Copyright (c) 2012 http://www.hameister.org. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface GreenViewController : UIViewController

@end

Diese Erweiterung wird benötigt, damit eine Verbindung zwischen GreenViewController und XIB-Datei hergestellt werden kann.

Nun wird eine Xib-Datei für die grüne View mit ⌘+N angelegt. In dem Fenster wählt man unter iOS den Eintrag User Interface aus. Als Template wird Empty selektiert und mit Next bestätigt.

Als Device Family läßt man unverändert iPhone stehen und bestätigt den Dialog mit Next.

Unter Save As: wird der Name der Xib-Datei eingetragen. Da ViewController und zugehörige XIB-Datei den gleichen Namen haben sollten, wählt man GreenViewController und schließt den Dialog mit Create

Nun öffnet sich der Interface Builder mit einer leeren Ansicht. Dort sucht man in der Object Library nach UIView und zieht diese nach links in die Oberfläche. Anschließend wird oben der Attribute Inspector ausgewählt und als Background die Farbe grün gewählt.

Nun wird File's Owner selektiert und im Identity inspector als Class der Name des ViewControllers GreenViewController eingetragen. Abschließend wird mit einem ctrl-Klick auf den File's Owner die Verbindung zwischen dem Outlet view und der grünen View hergestellt.

Damit der Button für die grüne View in der TabBar ein Titel und ein eigenes Icon hat, öffnet man als erstes die Datei GreenViewController.m. Dort ergänzt man die Methode initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil. Beim Initialisieren des Controllers, wird der Titel mit setTitle auf Green gesetzt. Außerdem wird dem UITabBarItem ein UIImage zugewiesen. Das Icon muß sich im Xcode-Projekt befinden und den Namen Green.png haben. In dem folgenden Codeschnipsel sieht man eine zweite Möglichkeit, wie die Hintergrundfarbe programmatisch gesetzt werden kann, d.h. sie muß nicht unbedingt im Interface Builder festgelegt werden.

- (id) initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nil bundle:nil];
    if(self) {
        UITabBarItem *tbi = [self tabBarItem];
        [tbi setTitle:@"Green"];
        UIImage *i = [UIImage imageNamed:@"Green.png"];
        [tbi setImage:i];

        //Zweite Moeglichkeit den Hintergrund der View zu setzen
        //[[self view] setBackgroundColor:[UIColor greenColor]];
    }
    return self;
}

Bei den beiden Icons ist anzumerken, daß die Schrift weiß ist und der Hintergrund transparent sein muß.

Analog zum Anlegen der grünen View muß nun noch eine rote View angelegt werden. Dazu wird der Name RedViewController verwendet. Danach sollte das Projekt in Xcode etwa so aussehen:

Was jetzt noch fehlt ist der eigentlich TabBarController. Dieser wird in der Datei AppDelegate.m angelegt. Die Methode application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions muß folgendermaßen erweitert werden:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    GreenViewController* gvc = [[GreenViewController alloc]init];
    RedViewController* rvc = [[RedViewController alloc]init];

    UITabBarController *tbc = [[UITabBarController alloc]init];
    NSArray* viewController = [NSArray arrayWithObjects:gvc, rvc, nil];
    [tbc setViewControllers:viewController];

    [[self window] setRootViewController:tbc];

    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Erstmal werden die beiden ViewController initialisiert. Anschließend der UITabBarController. Die beiden ViewController werden danach in einem NSArray abgelegt, welches der Methode setViewControllers des UITabBarController übergeben werden. Dadurch kennt der TabBarController dann die beiden Controller und kann zwischen ihnen hin- und herschalten. Was jetzt noch fehlt ist, dem Hauptfenster window den UITabBarController durch den Aufruf setRootViewController bekannt zu machen. Die Zusammenhänge zwischen die einzelnen Komponenten sind in der Abbildung ganz oben in dem Artikel zu sehen.

Nach dem Kompilieren und Starten mit ⌘+R öffnet sich der Simulator und zeigt den TabBarController mit den beiden Tabs an.