Tabelle erstellen

In diesem kurzen Eintrag werde ich euch zeigen, wie man eine Tabelle in iOS 5 erstellt.

Wir öffnen dazu XCode, erstellen mit „cmd“ + „Shift“ + „N“ ein neues Projekt und wählen „Single View Application“.

Benannt wird es natürlich mit „Tabelle“, der Company Identifier ist der umgekehrte URL eurer Webpage, einen Class Präfix brauchen wir heute noch nicht, ich werde das in einem späteren Eintrag erklären, der Gerätetyp wird ein iPhone und wir verwenden keine Storyboards.

Jetzt sollte euer Projekt nach wenigen Sekunden so aussehen

Zuerst ändern wir im ViewController.h folgendes:
@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>;
{
UITableView *myTableView;
}

@property (nonatomic, retain) UITableView *myTableView;
@end
Als nächstes gehen wir in das ViewController.m File fügen unterhalb von @implemention ViewController ein @synthesize myTableView; hinzu.

Weiter geht’s in viewDidLoad:
- (void)viewDidLoad
{
[super viewDidLoad];

UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(10.0f, 10.0f, 200.0f, 200.0f) style:UITableViewStylePlain];
self.myTableView = tableView;
self.myTableView.dataSource = self;
self.myTableView.delegate = self;

[self.view addSubview:tableView];
}
Wir erzeugen hier eine Tabelle mit dem Pointer auf tableView und reservieren uns mit alloc den dafür nötigen Speicher. Danach legen wir mit initWithFrame: die Größe und die Lage auf dem Bildschirm fest. Dazu nutzen wir CGRectMake() welches uns erlaubt die Parameter anzugeben. Als erstes wird der X-Wert angegeben, dann der Y-Wert, anschließend die Breite und zum Schluss die Höhe. Die Werte sollten vom Typ float sein.
Als nächsten Schritt sagen wir, dass unsere gerade erzeugte Tabelle die Tabelle aus dem .h File ist und fügen die Tabelle unserem View durch [self.view addSubview:tableView]; dem View hinzu.
Wenn wir jetzt das Programm kompilieren lassen („cmd“ + „B“) kommt ein gelbes Dreieck und sagt:

Method in protocol not implemented
Incomplete implemention

Um diesen Fehler zu beheben fügen wir nach dem viewDidLoad hinzu:
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}

Diese Methode liefert der Tabelle einen Wert, wie viele Zeilen erstellt werden sollen. In diesem Fall ist es eine einzige.
Weiter fügen wir hinzu:
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}

cell.textLabel.text = @“Hallo“;

return cell;
}
Dies erzeugt uns die nötigen Zellen und fügt ihnen den Textinhalt Hallo hinzu. Dies geschieht durch cell.textLabel.text

Jetzt können wir ohne Fehler den Simulator mit „cmd“ + „R“ anwerfen und sehen unsere wunderschöne Tabelle.
Wenn man die Zeile „Hallo“ jedoch anklickt, so bleibt diese angeklickt und verblasst nicht mehr, so wie es sich gehören würde. Dazu fügen wir einfach eine weitere Methode ein
-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}

Eine kurze Erklärung dazu:
tableView ist die Tabelle in der die Zeile abgewählt werden soll
deselectRowAtIndexPath: ist die Funktion, welche die Zeile wieder abwählt
indexPath ist die Zeile welche abgewählt werden soll, also die aktuelle Zeile, welche gerade angewählt wurde
animated: führt den ganzen Vorgang ästhetisch schön aus, sodass die Zeile langsam verblasst.
Ihr könnt einfach einmal ausprobieren, wie das ganze aussieht wenn animated: auf NO gesetzt wird.

Das komplette voll funktionsfähige XCode Projekt kann hier heruntergeladen werden
http://dl.dropbox.com/u/3775355/Wordpress%20Tutorials/Tabelle.zip

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s