iOS: Pre-Calculation of Row Heights for a UITableView

Question

I have been struggling with this for months in my project.

Here's the deal: I have a UITableView with just 1 section, but the heights of the UITableViewCells differ. Each UITableViewCell represents an object, and new objects are constantly becoming available, and inserted into the UITableView. The only way to effectively discover the height of a new object which will be displayed in the table is to draw it once (run the code that draws the UITableViewCell and look at what the resulting height is).

Ah, but there's the problem! The UITableView delegate method tableView:heightForRowAtIndexPath: is called BEFORE the cell is drawn for the first time! This makes sense: the table wants to position the cells before drawing them.

I've been experimenting LOTS and can find only 2 options, both of which have major downsides:

1. If the new object to be shown in the table has not been seen before, simply "guess" the height and resize the cell later (after the cell is drawn) as needed. This causes problems withs scrolling though, since when the user stops scrolling it might be the case that one or more cells need to be resized to the correct height, which creates a bad user experience as the table shifts around and re-organizes itself.
2. Pre-Calculate the object height by "testing" the object before inserting it into the UITableView. When the new object becomes available, create a "dummy" UITableViewCell and draw it off-screen, thus calculating the height of the object and saving it for later. The problem with this is that, of course, we can only do the height testing on the main thread (since we need to draw), which causes major lag in the application.

My solution thus far has been to use #2, but to try to alleviate the problem by making it so that the height-tests only happen every 1/4 of a second, which helps to "space out" the testing, so that the main thread is not locked too much. But, the solution is inelegant and still causes lag problems, especially on older devices. The lag is bad enough that I really need a better solution.

Answer 1

For calculating the height, this and this answer suggest you could draw off-screen in a background thread using CGLayer. Link to iOS documentation to CGLayer.

And to cache the height depending on some data id that is being displayed in a cell you could use code like this:

-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath
{
    NSString* objectId = [self getObjectIdForPath:indexPath];
    if (![self->idToCellHeight objectForKey: objectId])
    {
        CGFloat height = [object calculateHeightForId:objectId];
        [self->idToCellHeight setObject:[NSNumber numberWithFloat:height] forKey: objectId];
    }

    return [[self->idToCellHeight objectForKey:objectId] floatValue];
}

Of course the first draw will still have to be done without knowing the exact height, but if you can't calculate the height based on the data displayed then there is no workaround.

Answer 2

Thought I would pitch in on this. Pre-calculation of row heights for a UITableView is entirely possible and works very well for optimisation.

As an alternative to off screen drawing, it's perfectly fine to use the sizeThatFits methods of classes such as UILabel to determine heights.

The caveat is that almost all UIView related methods must be performed on the main thread.

I'll explain my approach, which is to create a sizing view that I use for height calculation.

The sizing view can be created off the main thread:

UILabel *mySizingLabel = [[UILabel alloc] init];

However, when determining the size, that must be done on the main thread. Be careful not to use a dispatch_async or [[NSOperationQueue] mainQueue]. This for example will not work:

__block CGSize size;
dispatch_async(dispatch_get_main_queue(), ^{
    size = [mySizingLabel sizeThatFits:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX)];
}];

CGFloat myCellHeight = size.height;

That's because the line that assigns myCellHeight will execute before the sizeThatFits, thereby giving a nonsense value.

Instead, it's necessary to wait on the main thread until sizeThatFits returns. That can be done using performSelectorOnMainThread with the wait set to YES. Parameters can be passed in and out of that method using an NSMutableArray.

This approach has a big benefit in that you can take advantage of the inherent sizing methods offered by UIView classes, without the need to draw offscreen using a custom graphics context.

One other thing, don't be tempted to use the UIKit addition sizeWithFont. Apart from the issues highlighted by Mike Weller in "You're Doing It Wrong #2: Sizing labels with -[NSString sizeWithFont:...]", the same caveat applies that this method must also be executed on main:

NSString UIKit Additions Reference

The methods described in this class extension must be used from your app’s main thread.

Answer 3

I'll try to explain briefly.

Like Max MacLeod indicates, when you have your dataset ready calculate row height asynchronously using

-(void)calculateAsyncRowHeights {
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

        UITableView *tableView=[self tableView];

        for(ManagedObject *o in _tableData) {
            CGFloat height=[self calculateRowHeight:tableView withObject:o]; //this is the method that calculates row heights. This is a seperate method because when necessary I call it in - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
            [o setRowHeight:height]; //I set rowHeight property of my model object
        }

        dispatch_async(dispatch_get_main_queue(), ^{

        });
    });
}

In - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath check if the model object has the row height already calculated. If yes, return it, if no, calculate it by [self calculateRowHeight:tableView withObject:o]; method and return its return value.

It works like a charm and solved all of my performance problems.

Answer 4

It sounds to me that you should create an NSMutableArray that contains NSNumber items that correspond to the calculated heights of the cells that exist in the table. When you get a new cell that needs to be added to the table, calculate the height of the item and then insert the height into the mutable array at the proper position, or in other words, at the same position that it will be occupying in the table, and then reload the table data.

That way, you do not have to recalculate any heights, you would just reference the object at the index of your index path row.