Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 735
fulvio Avatar asked Apr 18 '11 06:04

fulvio


2 Answers

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).

like image 131
Stuart Avatar answered Sep 27 '22 23:09

Stuart


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

like image 39
Magic Bullet Dave Avatar answered Sep 27 '22 23:09

Magic Bullet Dave