Question

So I’ve been all over the web, trying to figure out a definitive way to do this, and I can’t seem to get it. Each of my table view cells has 3 dynamically-loaded images that I need to add rounded corners to. Right now I’m using Quartz and the layer.cornerRadius property of the ImageViews to round the corners, but of course it kills the scrolling performance of the table view.

Browsing online, I can’t seem to find an answer to the performance problems. Most threads either end in suggesting the use of pre-rendered static images (not an option for me since the images are loaded dynamically, from the web) or some drawing trick that Loren Brichter came up with for Tweetie- however, the example project he posted on his blog is now a dead link, and I can’t find it anywhere.

So basically, my question is how exactly should I go about accomplishing the rounded corners on elements inside a table view cell, without sacrificing performance? Thanks for any help!

Answer 1

Looking at the other answers it looks like you are using a lot of alpha transparency that is going to cost you a lot performance wise. You may consider revisiting that to get additional frames. One idea you may try doing is rendering the rounded image in a graphics context and using that as your cell image instead of the QuartzCore rounding.

1. Load the image in the imageview
2. Round the corners
3. Render the image into a graphics context
4. Set the imageview with the new image
5. Turn rounding off

Do all of this in the cellForRowAtIndexPath: method. There may be more efficiencies to be had (like caching the rendered image), but this is a way to at least test out the performance of a pre-rendered rounded image.