Gradient Mask is applied multiple times in reused prototype cell

Question

I have a tableview, with a customer UITableViewCell class - this is created as a prototype cell in Storyboard/Builder.

Because my cell is linked to the Storyboard prototype, I reference it as follows (cellIdentifier matches the ID on the prototype cell):

EventsListTableViewCell *cell = (EventsListTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

As such, the cell is always initialised and ready (I can't use "if (cell == nil{...} ")

This is fine, however I want to add a gradient layer to my cell, which I'm doing within cellForRowAtIndex:

gradientMask = [CAGradientLayer layer];
gradientMask.frame = cell.eventImage.layer.bounds;

gradientMask.startPoint = CGPointMake(0.5, 0.2);
gradientMask.endPoint = CGPointMake(0.5, 1.0);
gradientMask.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                       (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
[cell.eventImage.layer insertSublayer:gradientMask atIndex:0];

The issue here, is that the gradientMask gets applied for each re-use of the cell, so when I scroll down it gets darker and darker

I realise I need to only apply this gradientMask once, when the cell is first created, however I'm not sure where to call this code, as I never 'init' the cell (this is handled by the storyboard)

I do have a custom class for this cell, but it only contains properties and no methods?

Answer 1

There are various ways of achieving this:

1- Property in UITableViewCell subclass

Create a property in the EventsListTableViewCell class which will hold a reference to the gradientMask:

@interface EventsListTableViewCell : UITableViewCell

@property (weak, nonatomic) CAGradientLayer *gradientMask;

@end

And then in the cellForRowAtIndexPath: method:

if (!cell.gradientMask) {
    gradientMask = [CAGradientLayer layer];
    gradientMask.frame = cell.eventImage.layer.bounds;

    gradientMask.startPoint = CGPointMake(0.5, 0.2);
    gradientMask.endPoint = CGPointMake(0.5, 1.0);
    gradientMask.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
    [cell.eventImage.layer insertSublayer:gradientMask atIndex:0];
    cell.gradientMask = gradientMask;
}

This will make sure that the gradientMask is initialized only once.

2- name property of CALayer

This way, you don't need to create a property and everything can be handled in the cellForRowAtIndexPath: method itself.

BOOL gradientFound = NO;

for (CALayer *layer in cell.eventImage.layer.sublayers)
{
    if ([layer.name isEqualToString:@"gradientLayer"])
    {
        gradientFound = YES;
        break;
    }
}

if (!gradientFound)
{
    gradientMask = [CAGradientLayer layer];
    gradientMask.frame = cell.eventImage.layer.bounds;
    gradientMask.name = @"gradientLayer";               //Set the name
    gradientMask.startPoint = CGPointMake(0.5, 0.2);
    gradientMask.endPoint = CGPointMake(0.5, 1.0);
    gradientMask.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
    [cell.eventImage.layer insertSublayer:gradientMask atIndex:0];

}

3- Declaring the gradienLayer in the UITableViewCell subclass itself

This is the cleanest way as it also isolates the code related to the cell within it's class. You can initialize the cell in the awakeFromNib method.

@implementation EventsListTableViewCell
{
    CAGradientLayer *gradientMask;
}

-(void)awakeFromNib
{
    gradientMask = [CAGradientLayer layer];
    gradientMask.frame = cell.eventImage.layer.bounds;

    gradientMask.startPoint = CGPointMake(0.5, 0.2);
    gradientMask.endPoint = CGPointMake(0.5, 1.0);
    gradientMask.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
    [self.eventImage.layer insertSublayer:gradientMask atIndex:0];
}

@end