09.05.2012

Xcode 4, iPhone, Cocoa Touch, iOS4, iOS5

Tutorial: UITabBarController - Badges in der TabBar

In diesem Tutorial wird erklärt wie Badges, d.h. diese kleinen roten Kreise/Bömmel mit den Zahlen, in einem TabBarItem angezeigt und wieder ausgeblendet werden können. Ausgehen vom dem Beispiel Tutorial: UITabBarController werden hier die Erweiterungen vorgenommen, die notwendig sind, um die Badges einzublenden.

In dem Beispiel wird für das rechts TabBarItem ein Badge hinzugefügt, welches den Wert 4 anzeigt. Wenn das TabBarItem angeklickt wird, dann soll das Badge verschwinden.

Das Einblenden des Badges soll beim Initialisieren des RedViewControllers erfolgen. Also muß die Datei RedViewController.m geöffnet werden und folgende Zeile ergänzt werden self.tabBarItem.badgeValue = @"4";, so daß die Methode initWithNibName:bundle: folgendermaßen aussieht:

- (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 Hinterrund der View zu setzen
        //[[self view] setBackgroundColor:[UIColor greenColor]];

        self.tabBarItem.badgeValue = @"4";
    }
    return self;
}

Durch diese Zeile wird ein Badge mit dem Wert 4 angezeigt.

Das Ausblenden soll dann erfolgen, wenn die View des RedViewController angezeigt wird. Dazu bietet sich die Methode viewWillApprear:animated an. Also wird diese Methode einfach in der Datei RedViewController.m überladen:

-(void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarItem.badgeValue = nil;
}

Mit dem setzen des Badge-Value auf nil, wird das Badge ausgeblendet.