Apply gradient across multiple UITableViewCells - ios

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?

Answer 1

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:

Answer 2

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;
}