5.6 Tableviews und Core Data

Sie haben jetzt ein Grundgerüst für die Erstellung neuer und die Aktualisierung bestehender Tagebucheinträge. Sie brauchen im Tagebuch noch eine Möglichkeit, sich alle Einträge anzeigen zu lassen. Dazu ist ein Tableview am besten geeignet. Er zeigt alle Einträge des Fototagebuchs an.

5.6.1 Tableviews

Tableviews eignen sich besonders für die Anzeige großer Mengen gleichartiger Daten. Dabei können Sie die Daten in Abschnitte unterteilen. Tableviews sind ein gutes Beispiel dafür, wie Sie das Aussehen und Verhalten eines Views verändern können, ohne von der Viewklasse ableiten zu müssen. Jeder Tableview besitzt ein Delegate und eine Datenquelle, deren Funktionsweise einem Delegate sehr stark ähnelt. Der View, das Delegate und die Datenquelle teilen ihre Zuständigkeiten folgendermaßen auf:

• Die Klasse UITableView übernimmt den Aufbau, die Darstellung und die Gestensteuerung der Tabelle. Die Tabelle besteht aus einer Spalte, die beliebig viele Zellen enthalten kann. Der Tableview kann die Zellen zu Abschnitten zusammenfassen.
• Die Datenquelle implementiert das Protokoll UITableViewDataSource und liefert die Anzahl der Abschnitte sowie die Anzahl der Zeilen pro Abschnitt. Sie ist außerdem dafür zuständig, die Views für die Zellen der Tabelle zu erzeugen und zu konfigurieren.
• Das Delegate implementiert das Protokoll UITableViewDelegate und stellt Methoden für die Ereignisverarbeitung des Tableviews bereit. Beispielsweise können Sie sich damit über die Auswahl von Zellen informieren lassen.

Leider ist die Unterscheidung zwischen der Datenquelle und dem Delegate nicht ganz so strikt. So besitzt zum Beispiel das Delegate Methoden, mit denen Sie die Höhe der Zellen oder das Aussehen der Abschnittsheader und -footer festlegen können. Sowohl die Datenquelle als auch das Delegate implementieren Sie in der Regel in dem Viewcontroller, der den Tableview verwaltet. Generell sind ja Viewcontroller ein guter Platz, um die Delegates der Views zu implementieren.

Mit der Klasse UITableViewController stellt das UIKit eine Basis für Tabellenansichten bereit. Die Klasse implementiert bereits die beiden Protokolle und erzeugt automatisch einen Tableview, sodass Sie keinen im NIB oder im Storyboard anlegen müssen. Außerdem verwaltet sie ab iOS 5 Prototypen für die Tabellenzellen. Dieser Mechanismus ähnelt der Verwaltung der Zellen in statischen Tableviews, die Sie bereits in Kapitel 4 kennengelernt haben.

Wenn Sie eine Datenquelle für einen Tableview anlegen, müssen Sie in der Regel drei Methoden überschreiben. Mit der Methode numberOfSectionsInTableView: legen Sie fest, in wie viele Abschnitte Sie Ihre Zellen unterteilen wollen. Die Anzahl der Zellen innerhalb eines Abschnitts erfragt der Tableview über die Methode tableView:numberOfRowsInSection:.

Tableviews sind übrigens hinsichtlich des Speichers optimiert. Im besten Fall brauchen sie nur ungefähr so viele Zellen, wie sie auch tatsächlich auf einmal auf dem Bildschirm darstellen. Außerdem zerstört der Tableview aus der Ansicht gescrollte Zellen nicht, sondern merkt sie sich für eine spätere Wiederverwendung. Durch diesen nachhaltigen Umgang mit Zellen und deren Daten können Tableviews auch Datenmengen anzeigen, deren Speicherbedarf wesentlich größer als der verfügbare Hauptspeicher des Geräts ist. Das ist natürlich nur möglich, wenn der Tableview immer nur einzelne Zellen von der Datenquelle anfordert. Dazu dient die Methode tableView:cellForRowAtIndexPath:.

Der zweite Parameter dieser Methode hat die Klasse NSIndexPath und enthält die Position einer Zelle oder eines Elements in der Tabelle. Auf diese Werte können Sie über die Propertys section und row zugreifen. Eine typische Implementierung der Methode der Datenquelle sieht für iOS bis einschließlich Version 4 folgendermaßen aus:

- (UITableViewCell *)tableView:(UITableView *)inTableView 
    cellForRowAtIndexPath:(NSIndexPath *)inIndexPath {
    NSString *theIdentifier = @"CellIdentifier";
    UITableViewCell *theCell = [inTableView 
        dequeueReusableCellWithIdentifier:theIdentifier];

    if(theCell == nil) {
        theCell = [[[UITableViewCell alloc] initWithStyle: 
            UITableViewCellStyleDefault 
            reuseIdentifier:theIdentifer] autorelease];
        // Zelle initialisieren; z. B. Subviews hinzufügen
    }
    // Zelle konfigurieren: Anzeigewerte setzen
    return theCell;
}

Listing 5.47 Erzeugung einer Tabellenzelle

Sie müssen zuerst die Tabelle über die Methode dequeueReusableCellWithIdentifier: fragen, ob sie noch eine freie Zelle zur Wiederverwendung hat. Falls sie keine mehr hat, liefert die den Wert nil zurück, und Sie müssen eine neue Zelle erzeugen. Aus diesem Grund legt die Methode im if-Block eine neue Zelle an. [Da unter iOS 4 noch kein ARC zur Verfügung steht, müssen Sie ein autorelease an die neue Zelle senden, damit kein Speicherleck entsteht.] Die Zellen haben immer die Klasse UITableViewCell oder eine Unterklasse davon. In dem if-Block kann die Methode noch weitere Initialisierungsschritte durchführen, wie beispielsweise das Anlegen von Subviews oder Action-Verbindungen. Bevor die Methode die Zelle zurückliefert, sollte sie sie konfigurieren, indem sie die anzuzeigenden Werte wie Texte oder Bilder an die Zelle übergibt.

Unter iOS 5 kann übrigens der if-Block mit der Initialisierung entfallen, da Sie hier Zellprototypen verwenden können. Darauf geht dieses Kapitel später noch genauer ein.

Wie bereits erwähnt wurde, können Tabellen die erzeugten Zellen wiederverwenden. Dabei müssen die Zellen nicht alle gleich aussehen. Die verschiedenen Arten von Zellen unterscheidet der Tableview anhand frei wählbarer Kennungen (in Listing 5.47 ist das «CellIdentifier«). Dabei haben Zellen der gleichen Art immer die gleiche Kennung, während unterschiedliche Zellarten natürlich unterschiedliche Kennungen verwenden sollten.

Das Beispielprojekt TableView demonstriert die Verwendung einer Tabelle mit unterschiedlichen Zellarten. Die Zellarten unterscheiden sich allerdings dabei nur durch unterschiedliche Textfarben.

Die Zellen enthalten außerdem einen Zähler, der ihre Erzeugungsreihenfolge angibt. Durch Scrollen können Sie feststellen, dass gleiche Zähler in unterschiedlichen Zellen auftreten können beziehungsweise dass die Zellen des gleichen Elements unterschiedliche Zähler haben können. Der Tableview verwendet die Zellen also mehrfach für unterschiedliche Elemente. Sie können an diesem Beispiel also sehen, wie der Tableview die Zellen wiederverwendet.

5.6.2 Tabellenzellen gestalten

Für viele Anwendungsfälle reichen die Darstellungsmöglichkeiten der Klasse UITableViewCell allerdings nicht aus. Die Standardzellen haben ein relativ starres Aussehen, auf das Sie wenig Einflussmöglichkeiten haben. Beispielsweise können diese Zellen zwar ein Bild darstellen; Sie können hingegen weder dessen Position noch dessen Größe festlegen.

Über die Property contentView erlaubt die Klasse UITableViewCell jedoch auch die Anzeige beliebiger Elemente in freier Anordnung. Natürlich können Sie diese Views durch Programmanweisungen erzeugen. Es ist allerdings auch möglich, dafür den Interface Builder zu verwenden. In der Elementbibliothek finden Sie dafür einen View der Klasse UITableViewCell, den Sie als Basis für Ihre eigenen Zellen verwenden können. Sie sollten auch jeder Zelle, die Sie im Interface Builder erstellen, eine eindeutige Kennung über deren Attributinspektor geben. Die Zelle können Sie dann wie jeden anderen View auch konfigurieren und mit Subviews füllen. Der Interface Builder legt die Subviews allerdings immer im Contentview der Zelle ab.

Sie können natürlich die Views über Ihren Programmcode zusammenbauen, was indes recht mühsam werden kann. Eine andere Möglichkeit ist das Laden der Zelle aus einer NIB-Datei.

Die einfachste Möglichkeit bis iOS 4 einschließlich ist das Ablegen der Zelle in einer eigenen XIB-Datei. Die Datenquelle lädt diese Datei jedes Mal über die Methode loadNibNamed:owner:options: der Kategorie NSBundle(UIKitAdditions) aus der NIB-Datei, wenn sie eine neue Zelle erzeugen möchte. Der Block der Bedingung in Listing 5.47 kann dann so aussehen:

if(theCell == nil) {
    NSBundle *theBundle = [NSBundle mainBundle];
    NSArray *theViews = [theBundle loadNibNamed:@"Cell"
        owner:self options:nil];
    theCell = [theViews objectAtIndex:0];
    // ggf. weitere Initialisierungsschritte
}

Listing 5.48 Erzeugung einer Zelle über eine NIB-Datei

Die Methode loadNibNamed:owner:options: liefert alle Objekte, die die NIB-Datei definiert, als Array zurück. Der File’s Owner und der First Responder gehören allerdings nicht dazu. Wenn Sie diesen Weg beschreiten, sollte die Zelle immer als erstes Objekt in der NIB-Datei liegen. Um möglichst wenig an Rechnerkapazitäten zu beanspruchen, sollte die Datei möglichst auch nur ein Top-Level-Objekt enthalten.

Als Eigentümer können Sie den Viewcontroller verwenden. Das ist einfach self, wenn der Viewcontroller die Datenquelle des Tableviews implementiert. Dadurch können Sie die Controls der Zelle direkt mit den Actions des Viewcontrollers verbinden. Allerdings müssen Sie meistens in den Actions die Zelle oder deren Indexpath ermitteln, wobei Ihnen die Methode indexPathForRowAtPoint: des Tableviews hilft:

- (IBAction)action:(id)inSender forEvent:(UIEvent *)inEvent {
    UITableView *theTableView = self.tableView;
    UITouch *theTouch = inEvent.allTouches.anyObject;
    CGPoint thePoint = [theTouch locationInView:theTableView];
    NSIndexPath *thePath = [theTableView
                            indexPathForRowAtPoint:thePoint];
    ...
}

Listing 5.49 Bestimmung des Indexpaths in einer Actionmethode

Da Sie für die Zellen keine Outlets verwenden können, müssen Sie die Subviews der Zelle über Tags ermitteln. Ein Tag ist eine ganze Zahl, auf die Sie über die Property tag bei jedem View zugreifen können. Tags dienen ausschließlich zur Markierung der Views, und Sie können diesen Wert beliebig festlegen. Im Interface Builder geht das über den Attributinspektor unter der Rubrik View (siehe Abbildung 5.31).

Abbildung 5.31 Ein Tag im Attributinspektor ändern

Der Zugriff auf Subviews über das Tag erfolgt durch die Methode viewWithTag: der Klasse UIView. Sie durchsucht den View und alle seine Subviews nach dem angegebenen Tag und liefert den ersten View mit dem angegebenen Tag zurück. Das Fototagebuch besitzt für die Tabellenzellen eine eigene Klasse DiaryEntryCell, um den Zugriff auf deren Subviews zu vereinheitlichen. Sie verwendet Tags, um auf die Subviews zuzugreifen:

#define ICON –100
#define TEXT –101
#define DATE –102

- (UIImageView *)imageView {
    return (UIImageView *)[self viewWithTag:ICON];
}

- (void)setIcon:(UIImage *)inImage {
    UIImageView *theView = self.imageView;

    theView.image = inImage;
}

- (void)setText:(NSString *)inText {
    UILabel *theLabel = (UILabel *)[self viewWithTag:TEXT];

    theLabel.text = inText;
}

- (void)setDate:(NSDate *)inDate {
    UILabel *theLabel = (UILabel *)[self viewWithTag:DATE];
    NSDateFormatter *theFormatter = 
        [[NSDateFormatter alloc] init];

    theFormatter.dateStyle = NSDateFormatterMediumStyle;
    theLabel.text = [theFormatter stringFromDate:inDate];
}

Listing 5.50 Zugriff auf Subviews über Tags

Die Methode setDate: verwendet einen Dateformatter, um das übergebene Datum in eine Zeichenkette umzuwandeln. Der Viewcontroller verwendet die drei Setter aus Listing 5.50, um die Werte aus der Core-Data-Entität an die Zelle zu übergeben. Er konfiguriert die Zellen in einer eigenen Methode, weil er diese Funktionalität noch an einer anderen Stelle braucht.

- (void)applyDiaryEntry:(DiaryEntry *)inEntry
                 toCell:(DiaryEntryCell *)inCell {
    UIImage *theImage = [UIImage imageWithData:inEntry.icon];
    [inCell setIcon:theImage];
    [inCell setText:inEntry.text];
    [inCell setDate:inEntry.creationTime];
}

Listing 5.51 Konfiguration einer Tabellenzelle

5.6.3 Tableviews unter iOS 5

Mit iOS 5 hat Apple die Verwaltung von Tabellenzellen erheblich vereinfacht. Der Tableview kann die Prototypen für seine Zellen selbst verwalten. Wenn Sie den Viewcontroller über ein Storyboard verwalten, können Sie die Zellprototypen direkt in den Tableviewcontroller ziehen (siehe Abbildung 5.32), wie Sie es bereits bei dem statischen Tableview im vierten Kapitel kennengelernt haben. Da das Fototagebuch hingegen die Zellen dynamisch erzeugen soll, müssen Sie im Attributinspektor des Tableviews unter Content den Eintrag Dynamic Prototypes auswählen.

Die Methode dequeueReusableCellWithIdentifier: verhält sich unter iOS 5 etwas anders als in den Vorgängerversionen des Betriebssystems. Falls der Tableview noch eine passende Zelle hat, liefert sie diese Zelle wie bisher zurück. Andernfalls erzeugt sie eine neue Zelle aus dem Prototyp mit der angegebenen Kennung. Sie sollten aus diesem Grund dem Prototyp im Interface Builder unbedingt über das Feld Identifier im Attributinspektor eine Kennung zuweisen.

Durch diese Änderung können Sie in Listing 5.47 die if-Abfrage und den Initialisierungsblock weglassen. Die gesamte Implementierung der Methode tableView:cellForRowAtIndexPath: finden Sie in Listing 5.52. Dabei liefert die Methode entry-ForTableView:atIndexPath: das Modellobjekt des Tagebucheintrags zum Indexpfad.

- (UITableViewCell *)tableView:(UITableView *)inTableView 
    cellForRowAtIndexPath:(NSIndexPath *)inIndexPath {
    DiaryEntryCell *theCell = (DiaryEntryCell *)[self.tableView
        dequeueReusableCellWithIdentifier:@"dairyEntryCell"];
    DiaryEntry *theEntry = [self entryForTableView:inTableView
        atIndexPath:inIndexPath];

    theCell.imageControl.tag = inIndexPath.row;
    [self applyDiaryEntry:theEntry toCell:theCell];
    return theCell;
}

Listing 5.52 Erzeugung der Tabellenzellen im Fototagebuch

Abbildung 5.32 Tabellenzellen im Storyboard

Sie können Zellprototypen auch ohne Storyboard nutzen. Allerdings können Sie in der XIB-Datei des Tableviews die Zellen nicht einfach in den Tableview ziehen. Stattdessen müssen Sie für jeden Prototyp eine eigene XIB-Datei anlegen, die genau eine Tabellenzelle enthält. Diesen Prototyp können Sie dann über die Methode registerNib:forCellReuseIdentifier: zum Tableview hinzufügen, wobei der erste Parameter ein Objekt der Klasse UINib ist. Das machen Sie am besten in der Methode viewDidLoad des Viewcontrollers, wie Listing 5.53 beispielhaft zeigt.

- (void)viewDidLoad {
    [super viewDidLoad];
    UINib *theNib = [UINib nibWithNibName:@"Cell" bundle:nil];

    [self.tableView registerNib:theNib
        forCellReuseIdentifier:@"cellIdentifier"];
}

Listing 5.53 Registrierung eines Zellprototyps über ein NIB

Der Tableview registriert dabei den Prototyp unter der Kennung, die Sie bei der Registrierung als zweiten Parameter angeben. Die Kennung für den Prototyp in Listing 5.53 lautet also «cellIdentifier«.

Ab iOS 6 können Sie Prototypen auch über Klassen definieren. Dazu verwenden Sie die Methode registerClass:forCellReuseIdentifier:, der Sie die Klasse und die Kennung übergeben. Listing 5.54 legt einen Zellprototyp über diese Methode an.

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.tableView registerClass:[TableCell class]
        forCellReuseIdentifier:@"cellIdentifier"];
}

Listing 5.54 Prototypdefinition für Zellen über deren Klasse

Wenn der Tableview eine neue Zelle aus diesen Prototypen erzeugt, verwendet er im Gegensatz zur Prototypdefinition über das Storyboard und über NIBs nicht die Methoden initWithCoder: und awakeFromNib, sondern initWithFrame:; die Klasse muss also die Konfiguration der Zelle über diesen Initializer durchführen.

5.6.4 Buttons in Tabellenzellen

Wenn Sie das Bild in der Zelle antippen, öffnet der Controller einen Audioplayer-Controller, über den sich der Nutzer den Ton des Tagebucheintrags anhören kann. Dazu liegt das Bild in einem Control, dessen Touch-Up-Inside-Event die Actionmethode playSound: des Viewcontrollers aufruft.

Da die Controller von allen Zellen in der Tabelle die gleiche Actionmethode verwenden, muss sie herausbekommen, für welchen Tagebucheintrag Sie das Control gedrückt haben. Dazu können Sie den Indexpfad beispielsweise wie in Listing 5.49 bestimmen.

Falls Sie keine Abschnitte in Ihrer Tabelle haben, gibt es noch eine einfachere Möglichkeit. Sie können Tags für die Bestimmung der Zeilennummer verwenden, indem Sie dem Tag des Controls die Zeilennummer zuweisen. Den Tagwert müssen Sie in der Methode tableView:cellForRowAtIndexPath: wie in Listing 5.52 zuweisen.

- (IBAction)playSound:(id)inSender {
    NSIndexPath *theIndexPath = [NSIndexPath indexPathForRow:
        [inSender tag] inSection:0];
    UITableView *theTableView = 
        self.searchDisplayController.active ? 
            self.searchResultsTableView : self.tableView;
    DiaryEntry *theItem = [self entryForTableView:
        theTableView atIndexPath:theIndexPath];
    Medium *theMedium = [theItem mediumForType:kMediumTypeAudio];

    if(theMedium != nil) {
        self.audioPlayer.audioMedium = theMedium;
        [self.audioPlayer setVisible:YES animated:YES];
    }
}

Listing 5.55 Aufruf des Audioplayers aus dem Tableview

Die Methode bestimmt in der zweiten Anweisung den Tableview für die Bestimmung des Eintrags in der folgenden Zeile, da der Controller zwei Tableviews benutzt. Während der eine alle Einträge anzeigt, dient der zweite zur Anzeige von Suchergebnissen. Beide Tableviews verwenden dabei die gleiche Datenquelle und das gleiche Delegate. Die angezeigten Einträge und die Indexpfade zu den Einträgen sind bei beiden Tableviews hingegen unterschiedlich, sodass in den Methoden eine Fallunterscheidung notwendig ist. Auf die Einbindung der Suche gehen wir in Abschnitt 5.7.4 genauer ein.

5.6.5 Zellen löschen

Tableviews verfügen bereits über eine eingebaute Möglichkeit, Tabellenzellen zu löschen. Wenn Sie mit dem Finger von rechts nach links über eine Tabellenzelle wischen, erscheint ein roter Button, über den Sie die Zelle löschen können. Die Anzeige dieses Buttons durch Wischen schalten Sie im Tableview ein, indem Sie in seinem Delegate die Methode tableView:commitEditingStyle:forRowAtIndexPath: implementieren. Diese Methode verarbeitet außerdem das Drücken des Löschen-Buttons.

Wenn Sie den Löschen-Buttons in einer Zeile drücken, ruft der Tableview diese Methode auf. Sie müssen dann die entsprechenden Operationen zum Löschen der Zeile durchführen und die Anzeige in der Tabelle aktualisieren, was Sie im einfachsten Fall über einen Aufruf der Methode reloadData im Tableview erreichen. Durch diesen Aufruf baut der Tableview seine Zellen komplett neu auf.

Eine andere Möglichkeit besteht darin, dass der Tableview nur die Zeile entfernt, die Sie gelöscht haben. Dazu können Sie die Methode deleteRowsAtIndexPaths:withRowAnimation: verwenden. Der Photo-Diary-Controller löscht in der Delegate-Methode nur den Eintrag über Core Data. Die Aktualisierung des Tableviews erfolgt über Benachrichtigungen, was Abschnitt 5.7 beschreibt.

- (void)tableView:(UITableView *)inTableView
    commitEditingStyle:(UITableViewCellEditingStyle)inStyle
    forRowAtIndexPath:(NSIndexPath *)inIndexPath {
    if(inStyle == UITableViewCellEditingStyleDelete) {
        DiaryEntry *theItem = [self entryForTableView:
            inTableView atIndexPath:inIndexPath];
        NSError *theError = nil;

        [self.managedObjectContext rollback];
        [self.managedObjectContext deleteObject:theItem];
        if(![self.managedObjectContext save:&theError]) {
            NSLog("Unresolved error: %@", theError);
        }
    }
}

Listing 5.56 Löschen eines Tagebucheintrags

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.