7

Is there a way to get rounded edges on UITableViewCell's in a manner that:

  1. allows cell background color to be user selected/customised at run time (cells may not all have the same background color)
  2. not using the UITableView "GROUPED" mode

So I'm assuming this means I can't use the normal image approach here to get rounded edges, as in this case it would not allow for requirement 1 above

Greg
  • 31,898
  • 75
  • 232
  • 424
  • 1
    Is there any particular reason not to use the grouped mode? – sosborn Oct 11 '11 at 02:55
  • just that I'm having the following problems with margin change animation in group mode which I can't seem to solve, so hoping non-grouped might be better? http://stackoverflow.com/questions/7661054/how-to-fix-the-margin-adjustment-code-attached-for-a-grouped-uitableview – Greg Oct 11 '11 at 05:03

1 Answers1

55

Well, it sounds like you should give using CALayer a try. Since a UITableViewCell is a UIView subclass, you can manipulate its CALayer property.

So, first, make sure to #import <QuartzCore/QuartzCore.h>

Then do something like, for example,

[cell.layer setCornerRadius:7.0f];
[cell.layer setMasksToBounds:YES];
[cell.layer setBorderWidth:2.0f];

when you create the cell. (If you are trying to create an effect like in a grouped table, I suppose you will want to manipulate only the first and last cells.) This should give the cell rounded corners. By manipulating the CALayer, you might be able to create the effect you want.

Also, check out this answer for how to do this to only some of the corners.

Community
  • 1
  • 1
Matthew Gillingham
  • 3,444
  • 1
  • 19
  • 26
  • thanks Matt - let me have a look and try this out (by the way - you don't have any good ideas re this separate/related issue I don't suppose - http://stackoverflow.com/questions/7661054/how-to-fix-the-margin-adjustment-code-attached-for-a-grouped-uitableview) – Greg Oct 11 '11 at 05:04
  • Matthew is correct, yet simply setting the layer's cornerRadius and maskToBounds is enough. borderWidth will give you a border around the image, which you don't seem to want. Just use: [cell.layer setCornerRadius:10.0f]; [cell.layer setMasksToBounds:YES]; – Almog C Sep 28 '12 at 09:04
  • It slows down tableview scrolling – Tom Mar 24 '13 at 21:22
  • That's true. If performance becomes an issue, it may be necessary to optimize the drawing code by, for example, doing all of the drawing inside of drawRect: instead. – Matthew Gillingham Mar 25 '13 at 01:53