iPhone SDK Tutorial deutsch 6 – Storyboard Part 2 – Table View

Hier ist Part 2 des Storyboard Tutorials in Xcode 4.2. Im letzten Tutorial haben wir schon die ersten View Controller erstellt und diese miteinander verbunden. Diesmal werden wir einen Table View Controller hinzufügen. Leider kommen wir in diesem Part nicht ganz ohne eine Zeile Code aus . Dieser Part baut übrigens direkt auf Part 1 auf, also solltest du diesen vorher gelesen haben: iPhone SDK Tutorial deutsch 6 – Storyboard Part 1 – Grundlagen

1. Das alte Projekt öffnen

Du kannst für dieses Tutorial einfach das Projekt des letzen Tutorials weiterverwenden. Wenn du dieses nicht mehr hast, kannst du es hier downloaden: iPhone_SDK_Tutorial_deutsch_6-Storyboard_Part_1-Grundlagen
Öffne die Projekt-Datei (z.B. “Tutorial6.xcodeproj”) in Xcode.

2. Table View Controller hinzufügen

Das letzte Mal haben wir schon einen normalen View Controller hinzugefügt. Den können wir nun leider nicht mehr gebrauchen. Wähle ihn also an (den ganz rechten), indem du das schwarze Dock anklickst, und drücke die Backspace-Taste um ihn zu entfernen. Als nächstes fügen wir den Table View Controller hinzu. Ziehe also das Table View Controller-Object aus der Library neben den Hauptmenü-View-Controller. Jetzt verbinden wir die beiden Controller, indem wir wieder mit gedrückter ctrl-Taste auf den Spieler-Liste-Button im Hauptmenü-View-Controller klicken und den blauen Faden auf den Table View Controller ziehen.

Im erscheinende kleinen, schwarzen Fenster wählst du Push. Wie schon in Part 1 bleibt der Navigation Controller damit erhalten. Damit alles übersichtlich bleibt, ändern wir den Titel der Navigation Bar im Table View Controller auf “Spieler-Liste”, indem wir die Navigation Bar dort doppelt klicken. Führe die App nun einmal aus, um zu sehen, ob der Wechsel zwischen den Views einwandfrei funktioniert.

3. Prototype Cells

Jetzt füllen wir unsere Tabelle mit Inhalt. Dazu verwenden wir einen vorgegebenen Zellenstil. Bevor wir dies allerdings tun, sehen wir nach, warum uns Xcode eine Warnung anzeigt. Klicke dazu auf das gelbe Dreieck im kleinen grauen Fenster in der Toolbar

Daraufhin erscheint in der linken Seitenleiste die Warnung.

“Unsupported Configuration – Prototype table cells must have reuse identifiers”

Die Warnung bedeutet, dass wir eine Table View mit Table View Cells benutzen, ohne diese Cells richtig konfiguriert zu haben.
Um dies zu ändern wähle die einzige Zeile in der Table View an und lass sie dir im Attributes inspector anzeigen. Zuerst setzen wir den Style auf Basic und wählen bei Accessory den Detail Disclosure. Wichtig ist, und darüber hat sich Xcode beschwert, dass wir den Identifier setzen. In unserem Beispiel nennen wir die Zelle PlayerCell. Mit Hilfe dieser Zellenbezeichnung können wir die Zelle immer wieder verwenden, ohne sie neu konfigurieren zu müssen (Reuse Identifier). 

Damit sollte die Warnung verschwunden sein und wir können die App nochmal ausführen, um zu testen, ob alles noch funktioniert. Geändert haben sollte sich nichts.

4. Die Data Source

Jetzt wird die Zelle mit dem eigentlichen Inhalt gefüllt. Dazu müssen wir zunächst zwei neue Dateien anlegen. Klicke mit der rechten Maustaste auf den Projektordner “Tutorial6″ in der linken Seitenleiste und wähle die Option “New File…”. Im erscheinenden Fenster wählst du Objective-C class in der Kategorie iOS–>Cocoa Touch. Nenne sie “PlayerlistViewController” und beachte, dass Subclass of UITableViewController ausgewählt ist. Der Haken bei With XIB for user interface sollte nicht gesetzt sein, da wir ja mit dem Storyboard arbeiten.

Nun müssen wir noch festlegen, zu welchem View Controller im Storyboard die Dateien gehören. Öffne dazu die Datei “MainStoryboard.storyboard” und wähle den Table View Controller aus. Im identity Inspector geben wir bei Class den Namen der eben erstellten View-Controller-Dateien ein.

Wie gewohnt erstellen wir ein Array, um die Tabelledaten zu verwalten. Öffne die Datei PlayerlistViewController.h und schreibe unter die @interface-Zeile folgendes:

@property (nonatomic, strong) NSMutableArray *playerList;

Das einzig neue ist hier das strong nach nonatomic, statt retain. Der Grund dafür ist, dass wir beim Erstellen des Projekts Use Automatic Reference Counting angekreuzt haben. Dieses neue Feature erspart dem Programmierer das Memory Management.  Retain würde also Speicher für das Array reservieren. Durch ARC wird allerdings automatisch Speicher reserviert und dieser auch automatisch wieder freigegeben.

Öffne nun PlayerlistViewController.m und füge unter der @implementation-Zeile folgendes ein:

@synthesize playerList;

Die oben erstellte property wird hier einfach synthetisiert.

Die Tabellendaten sollen im Tutorial einfach in viewDidLoad erstellt werden. Schreibe also folgenden Code unter [super viewDidLoad] in der Methode viewDidLoad:

    self.playerList = [NSMutableArray arrayWithCapacity:20];

    NSString *player;
    player = @"Andreas";
    [self.playerList addObject:player];

    player = @"Stefan";
    [self.playerList addObject:player];

    player = @"Alex";
    [self.playerList addObject:player];

Die Funktionen tableView:numberOfSectionsInTableView und tableView:numberOfRowsInSection sind noch genauso, wie wir sie von früher kennen:

- (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 [self.playerList count];
}

Die uns schon bekannte Funktion tableView:cellForRowAtIndexPath hat sich allerdings leicht geändert:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];
    NSString *player = [self.playerList objectAtIndex:indexPath.row];
    cell.textLabel.text = player;

    // Configure the cell...

    return cell;
}

Zuerst wird die Zelle mit dem Indentifier “PlayerCell” aus dem Storyboard geladen und dann dem Label in dieser Zeile der passende Text zugewiesen.

Damit ist alles notwendige für die Table View getan. Wenn du die App nun ausführst, werden die drei Spieler angezeigt.

5. Schluss

Ich denke ich werde noch einen Part 3 schreiben, wahrscheinlich über den Detail View der Table View und den Tab Bar Controller.

Den Code für diesen Part gibt’s hier: Tutorial6_2

Zum Schluss möchte ich euch noch schöne Weihnachtsfeiertage wünschen und einen guten Rutsch in neue Jahr 2012.

Wie immer würde ich mich freuen, wenn du mir auf Twitter folgst oder den Blog abonnierst. Wenn du willst kannst du den Artikel gerne mit anderen teilen .