iOS Creating a Gradient in iOS7

[newtomac123]

I had a quick question about creating a gradient in iOS7 that would fill just the view screen (story board). I was looking for a darker blue at the bottom with a gradient going up to a lighter blue. The problem is I'm not sure exactly how to do it.

I've played around with the below code, but I'm unable to quiet get it fixed correctly. Using the below code There is white at the top that fades into dark blue..... I'm trying to basically flip it.... with darker blue at the bottom of the screen getting lighter to light blue/almost white... I found code something like this elsewhere and pretty much have been attempting to alter it to get the results I would like without much luck... Could anyone help me break it down, or at least tell me how to fix it? It works... just not the results i'm trying to achieve.

Thank you

    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    UIColor *lightGradientColor = [UIColor colorWithRed:0.8 green:0.8 blue:0.9 alpha:1.0];
    UIColor *darkGradientColor = [UIColor colorWithRed:0.0 green:0.1 blue:0.4 alpha:1.0];
    
    CGFloat locations[2] = {0.5, 1.0};
    CFArrayRef colors = (__bridge CFArrayRef) [NSArray arrayWithObjects:(id)lightGradientColor.CGColor,(id)darkGradientColor.CGColor,nil];
    
    CGColorSpaceRef colorSpc = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpc, colors, locations);
    
    CGContextDrawLinearGradient(ref, gradient, CGPointMake(0.5, 0.0), CGPointMake(1.0, 70.0), kCGGradientDrawsAfterEndLocation); //Adjust second point according to your view height
    
    CGColorSpaceRelease(colorSpc);
    CGGradientRelease(gradient);

 

[dejo]

I think a screenshot of what you have now and more explanation of what you want different would help. I'm not entirely sure what your starting point is or what you're wanting to see. Also, your description is confusing:

Using the below code There is white at the top that fades into dark blue..... I'm trying to basically flip it.... with darker blue at the bottom of the screen getting lighter to light blue/almost white...

"White at the top that fades to dark blue" sounds the same as "Dark blue at the bottom that fades to white".

 

[DennisBlah]

I am not actually using rgb colors like you are. But I'm use hue, saturation and brightness for chosing colors.

- (CAGradientLayer*) silverGradient {
    
    UIColor *colorOne = [UIColor colorWithHue:0 saturation:0.0 brightness:1.0 alpha:1.0]; //Greyish
    UIColor *colorTwo = [UIColor colorWithHue:0 saturation:0.0 brightness:0.88 alpha:1.0]; //Light grey
    UIColor *colorThree = [UIColor colorWithHue:0 saturation:0.0 brightness:0.88 alpha:1.0]; //Light grey
    UIColor *colorFour = [UIColor colorWithHue:0 saturation:0.0 brightness:1.0 alpha:1.0]; //Greyish
    
    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, colorThree.CGColor, colorFour.CGColor, nil];
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0]; //From top till 45%
    NSNumber *stopTwo = [NSNumber numberWithFloat:0.45]; //From 45% til 55%
    NSNumber *stopThree = [NSNumber numberWithFloat:0.55];
    NSNumber *stopFour = [NSNumber numberWithFloat:1.0]; //From 55% till bottom
    
    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, stopThree, stopFour, nil];
    
    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    headerLayer.locations = locations;
    
    return headerLayer;
    
}

With the locations I determine which colors comes at which point. (from 0 to 1) and using it like this to use an gradient from top to bottom on my background:

CAGradientLayer *bgLayer = [BackgroundLayer silverGradient];
    bgLayer.frame = self.view.bounds;
    [self.view.layer insertSublayer:bgLayer atIndex:0];

This works on all views Hopefully it'll help you a bit.

 

[xStep]

First, if you want a true vertical gradient, set both the X positions in CGContextDrawLinearGradient to 1.0. When they are different, you'll get a gradient that is rotated.

Your locations var defines where a color change starts and ends, within the rectangle in CGContextDrawLinearGradient. If the context is bigger than that rectangle, the top and bottom of the context take on the full value for the first and last color.

If you want most of the image to be light blue with a subtle dark blue at the bottom, set the locations var to something like 0.8, 1.0; Experiment; try 0.5, 0.5 and 0.3, 0.5. Notice where the colors you have are pure.

 

[newtomac123]

Gradient

Thank you so much for the help!

I think this is something I'm interested in creating: (image attached)

just a nice easy vertical gradient from blue to white... or something of that sort....

 

[dejo]

I think this is something I'm interested in creating: (image attached)

just a nice easy vertical gradient from blue to white... or something of that sort....

Thanks for the image. Do you have a screenshot of what your code is producing now?

 

[xStep]

Thank you so much for the help!

I think this is something I'm interested in creating: (image attached)

just a nice easy vertical gradient from blue to white... or something of that sort....

I've given you the information for getting a nice vertical gradient. Combine that with the right color values and you can get exactly what you showed us.

To get the color values, I copied your image into Pixelmator and inspected the light color at the top and the dark color at the bottom. The HEX values I got are #f9fafe and #257bc4. I then went to this site which allowed me to get the RGB values.

To use the RGB values you need to divide them by 255. You have to make sue your are using floats. One of your lines would like this.

UIColor *lightGradientColor = [UIColor colorWithRed:249.0/255.0 green:250.0/255.0 blue:254.0/255.0 alpha:1.0];

 

[newtomac123]

Testing the code

Thank you for all the help!

I've been playing around with the code, I apologize xStep, I'm not sure I understood exactly what you meant in the first post you had. I used your second post to get the a better gradient.

- (void)drawRect:(CGRect)rect
{
    
 
    

    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    UIColor *darkGradientColor = [UIColor colorWithRed:3.0/255.0 green:0.8/255.0 blue:40.0/255.0 alpha:1.0];
    //UIColor *darkGradientColor = [UIColor colorWithRed:0.0 green:0.1 blue:0.4 alpha:1.0];

    UIColor *lightGradientColor = [UIColor colorWithRed:249.0/255.0 green:250.0/255.0 blue:254.0/255.0 alpha:1.0];
    
    CGFloat locations[2] = {0.5, 1.0};
    CFArrayRef colors = (__bridge CFArrayRef) [NSArray arrayWithObjects:(id)lightGradientColor.CGColor,(id)darkGradientColor.CGColor,nil];
    
    CGColorSpaceRef colorSpc = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpc, colors, locations);
    
    CGContextDrawLinearGradient(ref, gradient, CGPointMake(1.0, 0.5), CGPointMake(1.0, 400.0), kCGGradientDrawsAfterEndLocation); //Adjust second point according to your view height
    
    CGColorSpaceRelease(colorSpc);
    CGGradientRelease(gradient);

}

I've been playing with the colors to try to get it close. Do I even need the two variables darkGradientColor and lightGradientColor?

Thank you again

 

[dejo]

Do I even need the two variables darkGradientColor and lightGradientColor?

Yes, since you reference them in the following line:

CFArrayRef colors = (__bridge CFArrayRef) [NSArray arrayWithObjects:(id)lightGradientColor.CGColor,(id)darkGradientColor.CGColor,nil];

 

[xStep]

Yes, you need a minimum of two values. The gradient represents a change from one value to another. You can have more than one but I'll leave that to your own experimentation.

These are the color values I setup and the result looks like your sample.

    UIColor *lightGradientColor = [UIColor colorWithRed:249.0/255.0 green:250.0/255.0 blue:254.0/255.0 alpha:1.0];
    UIColor *darkGradientColor = [UIColor colorWithRed:37.0/255.0 green:123.0/255.0 blue:196.0/255.0 alpha:1.0];

Your locations line should look like the following. This means to start the gradient immediately at the top and finish at the bottom. The values are relative given the points you set up in the CGContextDrawLinearGradient function. Try to use 0.5 in both positions to see the contrast.

    CGFloat locations[2] = {0.0, 1.0};

The draw line I have looks like the following. The two 1.0 values mean to draw the gradient vertically. As long as they are same value, the actual value does not matter. Your values differ slightly from what I have here. The Y values are start and end positions within the context. The locations var holds relative values within those Y values. It's a little more complicated than that but not in the requirement.

    CGContextDrawLinearGradient(ref, gradient, CGPointMake(1.0, 0.0), CGPointMake(1.0, 400.0), kCGGradientDrawsAfterEndLocation);

I've attached a sample of my result.

BTW, you should close your image context via UIGraphicsEndImageContext();