Eines der wichtigsten Komponenten der mobilen App Entwicklung sind zweifelsohne die Tabellen.
Unter iOS wird uns hierfür die bemerkenswert vielfältige Klasse namens UITableView zur Verfügung gestellt. Deren hilfreiche Delegate Methode tableView:heightForRowAtIndexPath: möchten wir hier ein wenig näher beleuchten und mit einem Beispiel belegen.

Durch auffallend wenige Zeilen Code sind wir in der Lage die Höhe jeder einzelnen Zelle, bezugnehmend auf den darzustellenden Content, variabel zu gestalten.

Ein Xcode Projekt dieses Beispiels können Sie hier herunterladen.

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    static UIFont *labelFont;
    static CGRect textFrame;
    static CGFloat extraHeight;
    if(!labelFont){
        // verwendete Zelle auswählen
        myCell *cell = [tableView dequeueReusableCellWithIdentifier:@"myCell"];

        // verwendete Schriftart auswählen
        labelFont = cell.cellLabel.font;

        // frame der Zelle
        CGRect cellFrame = cell.frame;

        // frame des labels
        textFrame = cell.cellLabel.frame;

        // extra Puffer
        extraHeight = cellFrame.size.height-textFrame.size.height;
    }

    // der anzuzeigende Text
    NSString* text = [tableItems objectAtIndex:indexPath.row];

    // NSAttributedString erstellen
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];

    // LineBreakMode auf "BreakByWordWrapping" setzen
    NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
    [paragraphStyle setLineBreakMode:NSLineBreakByWordWrapping];
    [attributedString setAttributes:@{NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(0, attributedString.length)];

    // Schriftart auswählen
    [attributedString setAttributes:@{NSFontAttributeName:labelFont} range:NSMakeRange(0, attributedString.length)];

    // Hier wird die Höhe berechnet - mit max. Höhe 300
    CGSize expectedSize = [attributedString boundingRectWithSize:CGSizeMake(textFrame.size.width, 300) options:NSStringDrawingUsesLineFragmentOrigin context:nil].size;

    return expectedSize.height+extraHeight;
}

 

Die wesentlichen Schritte noch einmal hier im Detail:

Den darzustellenden Text auswählen

Hierbei wird der darzustellende String aus der exakt selben Datenquelle bzw. Position entnommen, die auch beispielsweise in tableView:cellForRowAtIndexPath: verwendet wird:

NSString* text = [tableItems objectAtIndex:indexPath.row];

Schriftart des darzustellenden Labels festlegen

Hierbei wird die verwendete Schriftart des UILabels angegeben:

[attributedString setAttributes:@{NSFontAttributeName:labelFont} range:NSMakeRange(0, attributedString.length)];

Höhe berechnen

Nun berechnen wir die Höhe.  Hierbei legen wir einen Maximalwert von 300 Bildpunkten fest um ungewollte, seitenlange, Zellen zu verhindern:

CGSize expectedSize = [attributedString boundingRectWithSize:CGSizeMake(textFrame.size.width, 300) options:NSStringDrawingUsesLineFragmentOrigin context:nil].size;

 

…und fertig! 🙂

Durch ein paar Angaben wird nun die Höhe jeder einzelnen Tabellenzelle abhängig vom darzustellenden Text, dynamisch zur Laufzeit berechnet.

dynamicTableCell Screenshot

Gerne unterstützen wir auch Sie bei Ihrem nächsten Projekt und lassen dabei, unter Anderem, unsere Erfahrung im Bereich der UITableView Klasse mit einfließen.

Für Fragen und weitere Informationen stehen wir Ihnen jederzeit und gerne zur Verfügung.

(1) Apple Developer UITableView Class Reference
(2) Apple Developer UITableViewDelegate Methode heightForRowAtIndexPath Reference
(3) Beispiel Xcode Projekt dynamicTableCell auf GitHub