Question

I have a UITableViewCell Subclass that I add an overlay gradient like this:

-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {

        // add a layer that overlays the cell adding a subtle gradient effect
        _gradientLayer = [CAGradientLayer layer];
        _gradientLayer.frame = self.bounds;
        _gradientLayer.colors = @[(id)[[UIColor colorWithWhite:1.0f alpha:0.2f] CGColor],
                                  (id)[[UIColor colorWithWhite:1.0f alpha:0.1f] CGColor],
                                  (id)[[UIColor clearColor] CGColor],
                                  (id)[[UIColor colorWithWhite:0.0f alpha:0.1f] CGColor]];
        _gradientLayer.locations = @[@0.00f, @0.01f, @0.95f, @1.00f];
        [self.layer insertSublayer:_gradientLayer atIndex:0];
    }
    return self;
}
-(void) layoutSubviews {
    [super layoutSubviews];
    // ensure the gradient layers occupies the full bounds
    _gradientLayer.frame = self.contentView.frame;
}

The problem is, the gradient doesn’t cover the space my Accessory View takes up:

and you can also see in the top left corner that it doesn’t curve either.

How can I get the gradient to take up the full cell space?

EDIT—–

As suggested below, i’ve added:

+(Class)layerClass
{
    return [CAGradientLayer class];
}

and changed the cell’s init method to:

-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        _gradientLayer = (CAGradientLayer*)self.layer;
        _gradientLayer.colors = @[(id)[[UIColor colorWithWhite:1.0f alpha:0.2f] CGColor],
                                  (id)[[UIColor colorWithWhite:1.0f alpha:0.1f] CGColor],
                                  (id)[[UIColor clearColor] CGColor],
                                  (id)[[UIColor colorWithWhite:0.0f alpha:0.1f] CGColor]];
        _gradientLayer.locations = @[@0.00f, @0.01f, @0.95f, @1.00f];
    }
    return self;
}

However, now the gradients show like this:

EDIT 2 ———
Tarks suggestion below, using a gradient in a UIView then assigning to the cell’s background gives this result!

Answer 1

This might work as solution in your case:

Use a asset/dynamicaly created gradient-Image and use [UIColor colorWithPatternImage:gradientImage] for setting the backgroundColor property of your cell.

If you want to use your layer solution, you have to set a mask to your gradientlayer, but the shape of the mask depends on the position of the cell in the section and so on…

You Should avoid using transparency/alpha in your gradient, at least in your example you do not need it.