Apply gradient across multiple UITableViewCells

Question

I have a UITableView with a white background, I would like to apply a linear gradient across the tableview cells so that the gradient is one single gradient from the start to end of the tableview see an example below from Adobe Illustrator. Is there a way this can be achieved using Core Graphics?

Here you can see the gradient is being applied across all the objects in Adobe Illustrator

score 2 · Accepted Answer · edited May 23 '17 at 12:30

I actually managed to figure it out, to some extent from this question and help from matt

- (NSArray *)generateCellGradients
{
    NSMutableArray *gradientColors = [[NSMutableArray alloc] init];

    NSUInteger numberOfIntervals = self.datasource.count;

    CGFloat startColorR =  81.0 / 255.0;
    CGFloat startColorG = 118.0 / 255.0;
    CGFloat startColorB = 214.0 / 255.0;

    UIColor *startColor = [UIColor colorWithRed:startColorR
                                          green:startColorG
                                           blue:startColorB
                                          alpha:1.0];

    [gradientColors addObject:startColor];

    CGFloat endColorR = 0;
    CGFloat endColorG = 191.0 / 255.0;
    CGFloat endColorB = 120.0 / 255.0;

    UIColor *endColor = [UIColor colorWithRed:endColorR
                                        green:endColorG
                                         blue:endColorB
                                        alpha:1.0];

    CGFloat intervalR = (endColorR - startColorR) / numberOfIntervals;
    CGFloat intervalG = (endColorG - startColorG) / numberOfIntervals;
    CGFloat intervalB = (endColorB - startColorB) / numberOfIntervals;

    for (NSUInteger i = 0; i < numberOfIntervals; i++) {
        startColorR += intervalR;
        startColorG += intervalG;
        startColorB += intervalB;

        UIColor *intervalColor = [UIColor colorWithRed:startColorR green:startColorG blue:startColorB alpha:1.0];

        [gradientColors addObject:intervalColor];
    }

    [gradientColors addObject:endColor];

    NSMutableArray *cellGradients = [[NSMutableArray alloc] init];

    for (NSUInteger i = 0; i < gradientColors.count; i++) {
        UIColor *startGradientColor = gradientColors[i];
        UIColor *endGradientColor;

        if (i == gradientColors.count - 1) {
            endGradientColor = gradientColors[i];
        } else {
            endGradientColor = gradientColors[i + 1];
        }

        NSArray *colors = @[(id)startGradientColor.CGColor, (id)endGradientColor.CGColor];
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.colors = colors;

        [cellGradients addObject:gradientLayer];
    }

    return cellGradients;
}

This is how to add it to a subview:

    CAGradientLayer *backgroundLayer = self.gradients[indexPath.row];
    backgroundLayer.frame = view.bounds;
    [view.layer insertSublayer:backgroundLayer atIndex:0];

Here is the result below:

enter image description here

But with just a tiny bit of modification of your code, they would be gradients. So close! — matt, May 21 '15 at 15:17
You have the color for each cell. Pretend now that that is the _starting_ color for each cell, and that the color of the _next_ cell is the _ending_ color for each cell. Now just make gradients instead of solid colors and you're there. (You can can even factor in the spacing if you want to!) — matt, May 21 '15 at 15:23
Note that you are allowed (after a couple of days) to accept your own answer. You don't magically get points for that, but it does mark the question as answered, in good order. — matt, May 21 '15 at 18:10

score 1 · Answer 2 · answered May 21 '15 at 13:15

Find below the code to create gradient layer by provide two required colours. You can add this layer to any view. Add this framework #import <QuartzCore/QuartzCore.h> in order to achieve this result.

 typedef enum {
        GradientType_Linear,
        GradientType_Reflected,
    }GradientType;



+(CAGradientLayer*) gradientLayerFromColor:(UIColor *)firstColor
                               secondColor:(UIColor *)secondColor
                              gradientType:(GradientType)gradientType
{
    UIColor *colorStart = firstColor;
    UIColor *colorEnd = secondColor;

    NSArray *colors;
    NSArray *locations;

    switch (gradientType) {
        case GradientType_Linear:
        {
            colors = [NSArray arrayWithObjects:(id)colorStart.CGColor, colorEnd.CGColor, nil];
            NSNumber *start1 = [NSNumber numberWithFloat:0.0];
            NSNumber *stop1 = [NSNumber numberWithFloat:1.0];
            locations = [NSArray arrayWithObjects:start1, stop1, nil];
        }
            break;

        case GradientType_Reflected:
        {
            colors = [NSArray arrayWithObjects:(id)colorStart.CGColor, colorEnd.CGColor, colorEnd.CGColor, colorStart.CGColor, nil];
            NSNumber *start1 = [NSNumber numberWithFloat:0.0];
            NSNumber *stop1 = [NSNumber numberWithFloat:0.5];
            NSNumber *start2 = [NSNumber numberWithFloat:0.5];
            NSNumber *stop2 = [NSNumber numberWithFloat:1.0];
            locations = [NSArray arrayWithObjects:start1, stop1, start2, stop2, nil];
        }
            break;

        default:
        {
            colors = [NSArray arrayWithObjects:(id)colorStart.CGColor, colorEnd.CGColor, nil];
            NSNumber *start1 = [NSNumber numberWithFloat:0.0];
            NSNumber *stop1 = [NSNumber numberWithFloat:1.0];

            locations = [NSArray arrayWithObjects:start1, stop1, nil];
        }
            break;
    }

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = colors;
    gradientLayer.locations = locations;

    return gradientLayer;
}

Apply gradient across multiple UITableViewCells

2 Answers2