Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Draw transparent-to-white gradient over white in iOS

I have an iOS app with text on the main screen that scrolls. I want the text to fade out at the bottom of the screen. So I make a custom view and do something like this in drawRect:

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = UIGraphicsGetCurrentContext();

CGFloat gradLocs[] = {0, 1};
CGColor *color1 = [UIColor clearColor].CGColor;
CGColor *color2 = [UIColor whiteColor].CGColor;
CFArrayRef arr = (CFArrayRef)@[(id)color1, (id)color2];
CGGradientRef grad = CGGradientCreateWithColors(colorSpace, arr, gradLocs);

CGContextSaveGState(context);
CGContextDrawLinearGradient(context, grad, CGPointMake(0, 0), CGPointMake(0, rect.size.height), 0);
CGContextRestoreGState(context);

Basically, draw a linear gradient from clear to white over the view. I've also tried doing it with a CAGradientLayer:

CAGradientLayer *layer = [CAGradientLayer layer];
layer.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor whiteColor].CGColor];
layer.locations = @[@(0), @(1)];
layer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
[self.layer insertSublayer:layer atIndex:0];

Either way, if this gets drawn over top of white, I get gray. PaintCode shows the same thing:

PaintCode screenshot

Why is this? It seems like the gradient shouldn't be visible at all over top of just white.

like image 222
Tom Hamming Avatar asked Dec 05 '22 04:12

Tom Hamming


1 Answers

+[UIColor clearColor] is in fact transparent black. Since you want transparent white you should use:

color1 = [[UIColor whiteColor] colorWithAlphaComponent:0.0].CGColor;

Reading the documentation carefully to +[UIColor clearColor] it says that it will return a color with grayscale and alpha values 0.0. So the middle in your gradient from white to transparent is [UIColor initWithWhite:0.5 alpha:0.5], i.e. transparent gray.

like image 154
Mats Avatar answered Dec 29 '22 11:12

Mats