Resolved Creating a Gradient in iOS7

Discussion in 'iOS Programming' started by newtomac123, Feb 12, 2014.

  1. newtomac123, Feb 12, 2014
    Last edited: Feb 24, 2014

    newtomac123 macrumors newbie

    Joined:
    Jan 8, 2014
    #1
    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
    Code:
    
        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);
    
     
  2. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #2
    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:

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

    DennisBlah

    Joined:
    Dec 5, 2013
    Location:
    The Netherlands
    #3
    I am not actually using rgb colors like you are. But I'm use hue, saturation and brightness for chosing colors.


    Code:
    - (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:
    Code:
    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.
     
  4. xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #4
    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.
     
  5. newtomac123 thread starter macrumors newbie

    Joined:
    Jan 8, 2014
    #5
    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....
     

    Attached Files:

  6. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #6
    Thanks for the image. Do you have a screenshot of what your code is producing now?
     
  7. xStep, Feb 14, 2014
    Last edited: Feb 14, 2014

    xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #7
    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.
    Code:
    UIColor *lightGradientColor = [UIColor colorWithRed:249.0/255.0 green:250.0/255.0 blue:254.0/255.0 alpha:1.0];
     
  8. newtomac123 thread starter macrumors newbie

    Joined:
    Jan 8, 2014
    #8
    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.

    Code:
    - (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
     
  9. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #9
    Yes, since you reference them in the following line:
    Code:
    CFArrayRef colors = (__bridge CFArrayRef) [NSArray arrayWithObjects:(id)lightGradientColor.CGColor,(id)darkGradientColor.CGColor,nil];
     
  10. xStep, Feb 18, 2014
    Last edited: Feb 18, 2014

    xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #10
    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.
    Code:
        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.
    Code:
        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.
    Code:
        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();
     

    Attached Files:

Share This Page