How to add Bevel to UITableViewCell

Question

I need to add a bevel to my UITableViewCell (white line at the top, dark line at the bottom). I already have a CAGradientLayer that is added as a subheading of my cell.layer. Unfortunately, I cannot use UIImageView as a background for my cells, so this needs to be done in code. Any suggestions? Thanks!

This is the code that I have for the background of my cell.

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 great, but I would like to have 1 pixel dark line at the bottom and 1 pixel white line at the top to complete the look.

Answer 1

You can and probably should use UIImageView as the background of the cell. What you are doing now is actually completely wrong.

A UITableViewCell consists of several views in the hyarchite, it is important to know where you should hook your views. This hierarchy is as follows:

• UITableViewCell - Never Touch This
  • backgroundView - Replace a set of custom backgrounds for all rows.
  • selectedBackgroundView - Replace to set your own background for selected / selected rows.
  • contentView - Don't install this, but feel free to add as many sub-sections as you want.
    • titleLabel
    • detailTitleLabel
    • imageView
    • Your own views
  • accessoryView

From the very beginning it is not clear how to replace backgroundView and selectedBackgroundView . UITableView itself will install them automatically after you return the cell from the data source method -[tableView:cellForRowWithIndexPath:] . The value of everything you set there will always be overridden.

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

All of this is well explained in the Table Programming Guide .

Answer 2

Check out this link . You can ignore the glitter effect, but otherwise I think you want.