UITableViewCell has square corner with image

Question

I have a grouped UITableView that contains several cells (just standard UITableViewCells), all of which are of UITableViewCellStyleSubtitle style. Bueno. However, when I insert images into them (using the provided imageView property), the corners on the left side become square.

The code being used to assign the values into the cell is:

cell.textLabel.text = currentArticle.descriptorAndTypeAndDifferentiator;
cell.detailTextLabel.text = currentArticle.stateAndDaysWorn;
cell.imageView.image = currentArticle.picture;

and currentArticle.picture is a UIImage (also the pictures, as you can see, display just fine with the exception of the square corners).

It displays the same on my iPhone 3G, in the iPhone 4 simulator and in the iPad simulator.

What I'm going for is something similar to the UITableViewCells that Apple uses in its iTunes app.

Any ideas about what I'm doing wrong?

Thanks,
-Aaron

Answer 1

cell.imageView.layer.cornerRadius = 16; // 16 is just a guess
cell.imageView.clipsToBounds = YES;

This will round the UIImageView so it does not draw over the cell. It will also round all the corners of all your images, but that may be OK.

Otherwise, you will have to add your own image view that will just round the one corner. You can do that by setting up a clip region in drawRect: before calling super. Or just add your own image view that is not so close to the left edge.