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ählenmyCell *cell = [tableView dequeueReusableCellWithIdentifier:@"myCell"];// verwendete Schriftart auswählenlabelFont = cell.cellLabel.font;// frame der ZelleCGRect cellFrame = cell.frame;// frame des labelstextFrame = cell.cellLabel.frame;// extra PufferextraHeight = cellFrame.size.height-textFrame.size.height;}// der anzuzeigende TextNSString* text = [tableItems objectAtIndex:indexPath.row];// NSAttributedString erstellenNSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];// LineBreakMode auf "BreakByWordWrapping" setzenNSMutableParagraphStyle *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 300CGSize 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.
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
