iPhone SDK Tutorial deutsch 5 – Tab Bar Controller

Hinweis: Dieses Tutorial ist für Xcode Version 4.1 geschrieben und mit der neuesten Version nicht nachvollziehbar. Alle aktuellen Tutorials findest du in der Übersicht.

Auf den Wunsch eines Lesers hin, schreibe ich ein Tutorial über den Tab Bar Controller und das Sortieren von Tabellen Daten.

Hinweis: Bevor du dieses Tutorial durcharbeitest, solltest du dich mit Tabellen Views auskennen. Ein Tutorial dazu findest du hier: UITableView Tutorial

1. In diesem Tutorial

Die App stellt einen digitalen Kassenzettel dar:

Die Gegenstände auf dem Kassenzettel sind, je nachdem welcher Tab angewählt ist, nach Preis oder Namen sortiert.

2. Das Projekt erstellen

In diesem Tutorial lernen wir wieder ein neues Projekt-Template kennen: Das Tab Bar Application Template. Öffne Xcode und wähle im Menü File->New->New Project…->Tab Bar Application. Ich nenne das Projekt Tutorial5.

3. Der Tab Bar Controller

Zuerst wollen wir uns den Tab Bar Controller etwas genauer anschauen. Bevor wir das tun, führen wir die App einfach mal aus, ohne das Template verändert zu haben. Die App besteht aus einem ganz normalen View und einer schwarzen Leiste am unteren Rand des Bildschirms. Mit dieser Leiste, der sogenannten Tab Bar, können wir zwischen zwei verschiedenen Reitern wählen. Je nachdem wird der First View bzw. der Second View angezeigt.

Der Text in beiden Views verweist auf die Datei MainWindow.xib. Kehre also zu Xcode zurück und öffne die besagte Datei. In der linken Seitenleiste im Interface Builder unter Objects finden wir drei Elemente. Das Tutorial5 App Delegate, Window und Tab Bar Controller. Wir wollen uns den Tab Bar Controller etwas genauer ansehen. Klicke dazu auf den Pfeil neben dem Icon des Objects. Es kommen nun weitere Elemente zum Vorschein. Wir klicken zuerst mal auf die Tab Bar. Daraufhin erscheint im View eine schwarze Leiste am unteren Rand des Views. Dieses Object ist demnach, wie der Name schon sagt, die eigentliche Tab Bar. Allerdings befinden sich innerhalb des Tab Bar Controllers noch zwei weitere Objects, zwei View Controller. Dies sind jene Views, die wir im iPhone Simulator bereits gesehen haben: First View Controller und Second View Controller. Für jeden Reiter der Tab Bar existiert also ein eigener View Controller.

Für unsere App benötigen wir Tabellen Views. First und Second View Controller sind allerdings ganz normale Views. Wir könnten die beiden Controller zwar zu Table Views umschreiben, allerdings geht es schneller, wenn wir von Anfang an mit Table Views arbeiten.

4. Die View Controller

Wir beginnen also, indem wir die Dateien aus denen die zwei View Controller bestehen löschen. Klicke dazu mit der rechten Maustaste auf die ausgewählten Objekte und wähle Delete. Im daraufhin erscheinenden Fenster wählst du wieder Delete.

Hinweis: Die Objects der beiden View Controller in MainWindow.xib müssen nicht gelöscht werden, da wir sie später einfach weiterverwenden werden.

Nun erstellen wir unseren eigenen View Controller. Wir fangen mit dem an, der die Einkaufsgegenstände nach Preis sortiert anzeigt. Klicke also mit der rechten Maustaste auf den Projektordner (hier: Tutorial5) und wähle New File… Unter Cocoa Touch müssen wir uns für UIViewController subclass entscheiden. Klicke auf Next und wähle im nächsten Dialog einen UITableViewController. Außerdem sollte nur der Haken bei With XIB for User Interface ausgewählt sein. Der View Controller soll ByPriceViewController heißen.

Wie bei fast jeder Tabellen View erstellen wir zuerst eine Variable, in der die Zeilen der Tabelle gespeichert werden. In diesem Fall ist das ein Array mit den Einkaufsgegenständen.

Wir öffnen also die Datei ByPriceViewController.h, fügen die Membervariable hinzu und erstellen zugleich deren Eigenschaft. Die Datei sieht danach so aus:

#import <UIKit/UIKit.h>

@interface ByPriceViewController : UITableViewController {
    NSArray *salesSlip;
}
@property (nonatomic, retain) NSArray *salesSlip;

@end

Öffne jetzt ByPriceViewController.m und schreibe unter @implementation ByPriceViewController:

@synthesize salesSlip;

Zunächst fügen wir folgende Methode am Ende der Datei, vor @end ein. Die Methode dealloc:

-(void) dealloc {
    self.salesSlip = nil;
    [super dealloc];
}

Wie bei jeder Tabellen View müssen noch die Methoden numberOfSectionsInTableView: und tableView:numberOfRowsInSection: abgeändert werden. Dir ist vielleicht schon aufgefallen, dass Xcode uns zwei Warnung ausspuckt.

Diese sollen uns nur darauf hinweisen, dass die Tabelle bisher keine Sections und keine Zeilen enthält und die Implementierung daher unvollständig ist.

Das ändern wir nun:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{

    // Return the number of rows in the section.
    return [salesSlip count];
}

Unsere Tabelle soll nur eine Section haben und so viele Zeilen wie das Array salesSlip Elemente hat.

Jetzt füllen wir das Array mit Daten, sodass die Tabelle bereits beim Start der App ein paar Zeilen besitzt. Außerdem werden diese sogleich sortiert. In einer richtigen App würde man die Daten aus einer Datenbank oder einer Datei auslesen, allerdings werden wir unsere Tabelle einfach in der Methode viewDidLoad füllen. Das macht in einer richtigen App zwar offen gesagt wenig Sinn, hier reicht es aber aus.

So sieht die Funktion viewDidLoad aus:

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSMutableArray *data = [NSMutableArray array];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:629.00], @"price", @"iPhone 4s", @"name", nil]];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:129.00], @"price", @"iPod nano", @"name", nil]];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:189.00], @"price", @"iPod Touch (weiß)", @"name", nil]];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:20.00], @"price", @"20€ iTunes-Gutschein", @"name", nil]];

    NSSortDescriptor *sorter = [[[NSSortDescriptor alloc]initWithKey:@"price" ascending:NO]autorelease];
    self.salesSlip = [data sortedArrayUsingDescriptors: [NSArray arrayWithObject:sorter]];

}

In Zeile 5 erstellen wir das Array data zu welchem wir in Zeile 7-13 Einkaufsgegenstände hinzufügen. Die Gegenstände sind NSDictionaries mit den Objekten “price” und “name”.
In Zeile 15 wird ein NSSortDescriptor deklariert und definiert. Wir geben an das er nach “price” sortieren soll. Ascending bedeutet ob aufsteigend (YES) oder absteigend (NO) sortiert wird. In Zeile 16 wird data mit dem SortDescpritor sorter aus Zeile 15 sortiert und gleich dem Array salesSlip zugewiesen. Dadurch enthält salesSlip nun alle Einkaufsgegenstände, sortiert nach Preis.

Zum Schluss geben wir das Aussehen der Zeilen in der Funktion tableView:cellForRowAtIndexPath: an. Wir benutzen UITableViewCellStyleValue1.

tableView:cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];
    }

    // Configure the cell...
    NSDictionary *item = [salesSlip objectAtIndex:indexPath.row];

    cell.textLabel.text = [item objectForKey:@"name"];

    NSNumber *price = [item objectForKey:@"price"];
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc]init];
    [formatter setNumberStyle:NSNumberFormatterCurrencyStyle];
    cell.detailTextLabel.text = [formatter stringFromNumber:price];
    [formatter release];

    return cell;
}

Zeile 11: Wir holen das passende NSDictionary-Objekt aus salesSlip und speichern es in item. (Das Prinzip von tableView:cellForRowAtIndexPath: wird in Tutorial 4.1 erläutert)
Zeile 13: Das textLabel der Zeile soll den Namen des Gegenstandes tragen. Wir bekommen ihn, indem wir im Dictionary item nach dem key ”name” suchen.
Zeile 15-19: Das detailTextLabel wird den Preis des Gegenstandes anzeigen. Wir holen den Wert aus dem Dictionary item und wandeln die Zahl dann in einen string um, damit wir ihn dem deatilTextLabel übergeben können.

Damit wären wir mit dem ersten der beiden View Controller fertig. Es folgt jetzt der zweite.

Erstelle also einen neuen Table View Controller und nenne ihn ByNameViewController.

Öffne die Datei ByNameViewController.h und füge wieder die Membervariable salesSlip hinzu:

#import <UIKit/UIKit.h>

@interface ByNameViewController : UITableViewController {
    NSArray *salesSlip;
}
@property (nonatomic, retain) NSArray *salesSlip;

@end

Da die Datei ByNameViewController.m fast genauso aussieht wie ByPriceViewController.m können wir ausnahmsweise kopieren und einfügen. Öffne dazu ByPriceViewController.m und kopiere alles von @synthesize salesSlip; bis @end. Öffne ByNameViewController.m und makiere alles von -(id)initWithStyle:(UITableViewStyle)style bis @end und füge den Code ein.

Das einzige was wir noch ändern müssen ist der NSSortDescriptor in viewDidLoad:

    NSSortDescriptor *sorter = [[[NSSortDescriptor alloc]initWithKey:@"name" ascending:YES]autorelease];

Diesmal wird aufsteigend nach Namen sortiert.

5. Die View Controller im Interface Builder

Öffne die Datei MainWindow.xib wähle in der Objects-Leiste den First View Controller. Lasse ihn dir im Identity inspector anzeigen. Bei Class schreibst du ByPriceViewController.

Öffne jetzt den Attributes inspector und lösche den Text bei NIB Name.

Zunächst ziehst du eine Table View aus der Library auf das Object By Price View Controller.

Drücke als Nächstes mit gedrückter ctrl-Taste auf die Table View und ziehe den blauen Faden auf den By Price View Controller.

Im erscheinenden Menü wählst du dataSource. Wiederhole es und wähle delegate.

Jetzt können wir die App das erste mal ausführen. Klicke auf Run um die App zu starten. Bisher funktioniert allerdings nur der erste Reiter.

Wiederhole nun alles ab Überschrift 5. Die View Controller im Interface Builder für den Second View Controller. Wenn du das getan hast, ist die App fertig.

6. Schluss

Den Code zum Tutorial kannst du hier downloaden: iPhone_SDK_Tutorial_deutsch_5_Tab_Bar_Controller

Wenn ihr auch noch Tutorial-Vorschläge habt, gebt mir einfach bescheid. Wenn euch das Tutorial gefallen hat, könnt ihr meinen Blog abonnieren oder mir auf Twitter folgen.