How to make custom cell height effective? - ios

Question

Lately I have faced a problem with effeciency caused by heightForRowAtIndexPath:. Each time you have to draw cell you nerd to create it and calculate it size - it's so long!
One would say, why not use estimatedHeightForRowAtIndexPath: but when you pass estimation here you just loose accurancy so when you scroll to top some cells aren't visible at all...
I want to widen my knowledge in this matter. How do guys from Twitter, Facebook or Instagram did it?

Answer 1

I suppose you mean a situation when the height of a cell is determined by the content of the cell.
In general, the height of a cell in that case is calculated during layout process. There is no other way to calculate that height without performing layout at least once.
For example, you have a cell with a description label. You have a requirement to display the whole description as multiline text without truncating it. So, you have to make the description label of variable height.
When tableview asks you about cell’s height you have to calculate the number of lines required for the description text. This is exactly the same work you perform during layout of cell contents.
In a common case the layout process is a number of lightweight calculations. The idea is to extract that calculations code out of the cell class and access them directly as needed.
In the example below:
CellLayoutParams contains the initial information that should be taken into account when calculating layout. Here goes the data that should be shown by the cell and the cell width.
#interface CellLayoutParams : NSObject {
#property (nonatomic, copy) NSString* title;
#property (nonatomic, copy) NSString* description;
#property (nonatomic, assign) CGFloat width;
- (BOOL)isEqualToLayoutParams:(CellLayoutParams*)params;
#end
CellStyle is an object that describes the style attributes of the cell. E.g. the font of the description label, various cell paddings, margins and insets.
#interface CellStyle : NSObject
#property(nonatomic, strong) UIFont* titleFont;
#property(nonatomic, strong) UIFont* descriptionFont;
- (struct CellLayoutInfo)layoutInfoForParams:(CellLayoutParams*)params;
#end
#implementation CellStyle
- (struct CellLayoutInfo)layoutInfoForParams:(CellLayoutParams*)params {
CellLayoutInfo layoutInfo;
const CGPoint contentOffset = CGPointMake(kLeftMargin, kTopMargin);
const CGFloat contentWidth = params.width - kAccessoryWidth - kLeftMargin;
NSString* descriptionValue = params.description;
CGSize descriptionSize = [descriptionValue sizeWithFont: [self descriptionFont]
constrainedToSize: CGSizeMake(contentWidth, CGFLOAT_MAX)];
layoutInfo.descriptionFrame.size = descriptionSize;
layoutInfo.descriptionFrame.origin = CGPointMake(contentOffset.x, layoutInfo.titleFrame.origin.y + layoutInfo.titleFrame.size.height + kVerticalInset);
layoutInfo.preferredHeight = layoutInfo.descriptionFrame.origin.y + descriptionSize.height + kBottomMargin;
return layoutInfo
}
#end
CellLayoutInfo is a structure with calculated layout information: calculated frames and preferred height value.
typedef struct CellLayoutInfo {
CGRect titleFrame;
CGRect descriptionFrame;
CGFloat preferredHeight;
} CellLayoutInfo;
You just need to perform layout calculations to get the preferred height:
- (CGFloat)tableView:(UITableView *)table heightForRowAtIndexPath:(NSIndexPath*)indexPath {
MyData* dataItem = [self.data objectAtIndex:indexPath.row];
CellLayoutParams* layoutParams = [CellLayoutParams new];
layoutParams.description = dataItem.description;
layoutParams.width = table.bounds.size.width;
CellStyle* cellStyle = [CellStyle new];
CellLayoutInfo layoutInfo = [cellStyle layoutInfoForParams:layoutParams];
return layoutInfo.preferredHeight;
}
In cell's layoutSubviews you access the same calculated layout values:
- (void) layoutSubviews {
[super layoutSubviews];
CellLayoutParams* layoutParams = [CellLayoutParams new];
layoutParams.description = self.descriptionLabel.text;
layoutParams.width = self.bounds.size.width;
CellStyle* cellStyle = [CellStyle new];
CellLayoutInfo layoutInfo = [cellStyle layoutInfoForParams:layoutParams];
self.titleLabel.frame = layoutInfo.titleFrame;
self.descriptionLabel.frame = layoutInfo.descriptionFrame;
}
Few things to note:
You don't need to create multiple style objects. The style object is immutable and is the same for all cells.
The code of layout is not duplicated. The table view delegate and the cell are using the same layouting code.
You may perform few additional optimizations:
Cache CellLayoutInfo objects in the controller and reuse them. This is useful when there is much scrolling through the table.
Keep a copy of CellLayoutInfo and corresponding CellLayoutParams in the cell and when the cell is being reused just check if params where changed and if a new CellLayoutInfo should be calculated. This is useful when the table view is being reloaded frequently.
The only drawback is that you have to define all the styling and layout in the code.