Sluggish scrolling experience when using QuartzCore to round corners on UIImageView's within a UITableViewCell

Question

I use QuartzCore to add rounded corners to my UIImageView's within the cells of my UITableView

This is the code that I use:

fooImageView.layer.cornerRadius = 9.0;
fooImageView.layer.masksToBounds = YES;
fooImageView.layer.borderWidth = 1.0;

The problem is that when I add this code. The table cells movement is slowed down dramatically. I'm just wondering whether there are other alternatives to make the user experience much faster and to increase performance when scrolling a table view cell using this technique?

I see a lot of applications (most Twitter apps) that have no performance decrease when having rounded corners applied to images within their cells. Just wondering how they overcome the "sluggishness"?

Thanks for your help.

Answer 1

there are 3 main techniques for improving UITableView performance that I use:

1. Always reuse cells, use the dequeuereusablecellwithidentifier when creating new cells. This prevents the overhead of the OS creating and destroying lots of objects when scrolling fast.

2. Collapse the view hierarchy of the cell. Instead of having lots of views and subviews, create a custom view and do all your cell drawing in the drawRect. Apps like Twitter use this approach for super fast cell drawing.

3. Ensure your images are opaque. You can do this by ensuring all image assets don't have alpha channels baked into them and by setting the layer's opaque property to YES.

Examples:

In the cellForRowAtIndexPath (the table identifier string simply creates a reference to cells that are the same type and can be anything you like):

static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: SimpleTableIdentifier];
// Create a new cell if necessary
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:SimpleTableIdentifier] autorelease];
}

Check out the following link for examples of improving performance of UITableViews: http://developer.apple.com/library/ios/#samplecode/TableViewSuite/Introduction/Intro.html%23//apple_ref/doc/uid/DTS40007318-Intro-DontLinkElementID_2

Hope this helps,

Dave

Answer 2

The first thing I would try doing is setting:

fooImageView.layer.shouldRasterize = YES;

This renders the rounded corner effect as a bitmap. I had some similar issues when using CALayer effects on views in a UIScrollView a while back, and this setting drastically improved performance.

Don't forget to set

fooImageView.layer.rasterizationScale = [[UIScreen mainScreen] scale];

to prevent pixelation (rasterization at the wrong resolution for the device).

Answer 3

You could do some masking. Overlaying the images with a mask-image that has a rounded corners square cut out from it and it will work like a charm.

Also be sure to use reuseCellIdentifier otherwise the table will lag if it gets even a little complex.

Answer 4

Short answer: set cells opaque and draw them yourself.

Follow the advice by StuDave and Magic Bullet, and see also Fast Scrolling in Tweetie with UITableView by the author of the official Twitter client ot learn how to do cell drawing. It's a simple and clear example project.

Beyond solving this specific issue, you should read UITableView construction, drawing and management (revisited) by Matt Gallagher to learn how to write custom table controllers and cells. This not only improves the performance of your code, it lets you do things which are not possible with the standard classes from Apple. Basically you will create an UIViewController that replicates key methods of the UITableViewController.

Answer 5

In my case it added endless subviews and the table view slowed down dramatically exactly as you said. I added this logic in willDisplayCell to fix the problem:

if cell.contentView.subviews.count < 3 /* elements in cell + subviews */  { 

        cell.contentView.addSubview(subView)
        cell.contentView.sendSubviewToBack(subView)

 }