How to Add Bevel to UITableViewCell

Question

I need to add a bevel to my UITableViewCell's (white line on top, dark line on bottom). I already have a CAGradientLayer added as a subview of my cell.layer. Unfortunately I can't use a UIImageView as a background for my cells, so this will need to be done in code. Any suggestions? Thanks!

This is the code I have now for my cell background.

CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
gradientLayer.frame = cell.frame;  
gradientLayer.colors = [NSArray arrayWithObjects:
    (id)[[UIColor colorWithRed:0.988 green:0.988 blue:0.988 alpha:1.0] CGColor],
    (id)[[UIColor colorWithRed:0.9294 green:0.9294 blue:0.949 alpha:1.0] CGColor],
    nil];  
[cell.layer insertSublayer:gradientLayer atIndex:0];

This looks fine, but I would like to have a 1 pixel dark line on the bottom and a 1 pixel white line on the top to finish the look.

Answer 1

You can, and probably should use a UIImageView as the cell background. What you are currently doing is actually quite wrong.

A UITableViewCell consist of quite a few views in a hiarchy, it is important to know where you are supposed to hook in your views. This hierarchy is as follows:

• UITableViewCell - Never touch this
  • backgroundView - Replace set your custom background for all rows.
  • selectedBackgroundView - Replace to set a custom background for selected/highlighted rows.
  • contentView - Do not set this but feel free do add as many subviews as you like.
    • titleLabel
    • detailTitleLabel
    • imageView
    • Your own views
  • accessoryView

It is not obvious from the start how to replace the backgroundView and the selectedBackgroundView. The UITableView itself will set these automatically after you have returned the cell from the -[tableView:cellForRowWithIndexPath:] datasource method. Meaning anything you set there will always be overridden.

The trick is to implement the -[tableView:willDisplayCell:forRowAtIndexPath:] delegate method, and set your custom background here.

All this is quite well explained in the Table View Programming Guide.

Answer 2

Have a look at this link. You can ignore the gloss effect, but otherwise I think it's what you want.