Gradient layer on tableview cell prevention selection colour from appearing - objective-c

Question

I tried to spruce my application up a bit by adding a CGGradientLayer to my tableview cells, and the code works great.
Only problem is that, now, whenever I select a tableview cell, it does not change colour to the selection style, whether blue or grey.
The code I am using for my gradient is
UIView *view = [[UIView alloc] initWithFrame:cell.frame];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0.3 green:0.3 blue:0.3 alpha:1.0] CGColor], (id)[[UIColor colorWithRed:0.28 green:0.28 blue:0.28 alpha:1.0] CGColor], nil];
[cell.layer insertSublayer:gradient atIndex:0];
I do know that my cell is being selected as the text in my cells changes colour to white, which is the default selection colour.
So what I am trying to fix is the selection colour on my cells. I don't mind if I can't use the selection colours provided, but in that case can I maybe add my own transparent rect over the cell on selection?

Answer 1

When a UITableViewCell is selected, it inserts the selection background at index 0. That ends up being under your gradient. The view hierarchy looks like this:
<MyTableViewCell: 0xd26fb80; baseClass = UITableViewCell; frame = (0 44; 320 44); autoresize = W; layer = <CALayer: 0xd26fc90>>
| <UITableViewCellSelectedBackground: 0x6880810; frame = (0 0; 320 43); layer = <CALayer: 0x68855c0>>
| <CAGradientLayer: 0xd26ecb0> (layer)
| <UITableViewCellContentView: 0xd26fcc0; frame = (0 0; 320 43); opaque = NO; layer = <CALayer: 0xd26fd00>>
| <UIView: 0xd26e8e0; frame = (0 43; 320 1); autoresize = W+TM; layer = <CALayer: 0xd26f1a0>>
Notice that the CAGradientLayer, which I inserted at index zero when the cell was created, is after UITableViewCellSelectedBackground, so the gradient layer overlays the selected background layer visually.
To fix it, make your own subclass of UITableViewCell. Make the gradient layer a property or ivar of your subclass:
#implementation MyTableViewCell
{
CAGradientLayer *_gradient;
}
- (void)initGradient
{
_gradient = [CAGradientLayer layer];
_gradient.opaque = YES;
_gradient.frame = self.bounds;
_gradient.colors = [NSArray arrayWithObjects:(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor, nil];
[self.layer insertSublayer:_gradient atIndex:0];
}
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
[self initGradient];
}
return self;
}
- (void)awakeFromNib
{
[self initGradient];
}
Override setSelected:animated: in your subclass to show or hide the gradient layer based on whether the cell is selected:
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
_gradient.hidden = selected;
}

Answer 2

I came upon this same problem, and since - (void)setSelected:animated: was not always called (such as when the user holds down on the cell, etc.) I found this method to work much better.
Essentially, just put your gradient in the cell.backgroundView.
UIView *cellBackgroundView = [[UIView alloc] initWithFrame:cell.bounds];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = cellBackgroundView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0.3 green:0.3 blue:0.3 alpha:1.0] CGColor], (id)[[UIColor colorWithRed:0.28 green:0.28 blue:0.28 alpha:1.0] CGColor], nil];
[cellBackgroundView.layer addSublayer:gradient];
cell.backgroundView = cellBackgroundView;
And then set your selectedBackgroundView to however you want. this way, the cell's backgroundView is sure to be completely hidden, layers and all. This also works with subclassing, replace cell. with self..