4

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.

Tom Hamming
  • 10,577
  • 11
  • 71
  • 145

1 Answers1

17

+[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.

Mats
  • 8,528
  • 1
  • 29
  • 35