Changing Gradient Background layer color for UiView IOS using CAGradientLayer classe

Question

i want to change the color of my gradient background when i trigger an action. I tryed by many way with no succes.

BackgroundLayer.h

    #import <Foundation/Foundation.h>
    #import <QuartzCore/QuartzCore.h>

    @interface BackgroundLayer : NSObject

    +(CAGradientLayer*) greyGradient;
    +(CAGradientLayer*) blueGradient;

    @end

BackgroundLayer.m

@implementation BackgroundLayer

//Metallic grey gradient background
+ (CAGradientLayer*) greyGradient {

    UIColor *colorOne = [UIColor colorWithWhite:0.9 alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithHue:0.625 saturation:0.0 brightness:0.85 alpha:1.0];
    UIColor *colorThree     = [UIColor colorWithHue:0.625 saturation:0.0 brightness:0.7 alpha:1.0];
    UIColor *colorFour = [UIColor colorWithHue:0.625 saturation:0.0 brightness:0.4 alpha:1.0];

    NSArray *colors =  [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, colorThree.CGColor, colorFour.CGColor, nil];

    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:0.02];
    NSNumber *stopThree     = [NSNumber numberWithFloat:0.99];
    NSNumber *stopFour = [NSNumber numberWithFloat:1.0];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, stopThree, stopFour, nil];
    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    headerLayer.locations = locations;

    return headerLayer;

}

//Blue gradient background
+ (CAGradientLayer*) blueGradient {

    UIColor *colorOne = [UIColor colorWithRed:(120/255.0) green:(135/255.0) blue:(150/255.0) alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithRed:(57/255.0)  green:(79/255.0)  blue:(96/255.0)  alpha:1.0];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];

    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    headerLayer.locations = locations;

    return headerLayer;

}

@end

In my view controller i have a switch on proximity (i work with ibeacon). the switch have 4 cases. i want Case 1(Far) with blue gradient. Case 2(Near) with grey gradient. I initialise with the layer in "(void)viewWillAppear:(BOOL)animated" and then i tryed that in the did range delegate :

case CLProximityFar:
{

[[[self.view.layer sublayers] objectAtIndex:0] removeFromSuperlayer];
self.bgLayer = [BackgroundLayer blueGradient];
self.bgLayer.frame = self.view.bounds;
[self.view.layer insertSublayer:self.bgLayer atIndex:0];
....

not working. i also tryed like this

case CLProximityNear:
{

[[[self.view.layer sublayers] objectAtIndex:0] removeFromSuperlayer];
CAGradientLayer *gradient = [[self.view.layer sublayers] firstObject];
gradient = [BackgroundLayer blueGradient];
[self.view.layer insertSublayer:gradient atIndex:0];
[self.view.layer setNeedsDisplay];
....

Not working.

Anyone can help me ? i need a solution for changing background color when i m on "near" and rechange it back when i m on "far".

Thanks in advance for your help.

What does "not working" mean? The gradient doesn't switch? Is the correct case statement being executed? — rdelmar
yes the correct case is executed but the color not change. Or when i remove the layer i have errors. The elements in my view diseapears and color not change. Sorry for my poor english, i m a french guy. — mad_mask
If your layer is itself drawing anything at all, your sublayer will be drawn on top of it. This is similar to the behaviour seen when adding a subview to a view: no matter which index you insert it at, it always covers the superview. What you probably want to do is add a subview to your self.view where you hold all your content and then just change the layer of self.view to the gradient. — Ian MacDonald
Larme, no i dont have a black screen, i see the color but it dont change. Or with an other solution i have missing content. — mad_mask

rdelmar rdelmar · Accepted Answer · 2015-02-04T20:24:59

I'm not using iBeacon, so in this test, I used a segmented control to switch between the layers. It should be easy enough to adapt this to your app.

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CAGradientLayer *bg = [BackgroundLayer greyGradient];
    bg.frame = self.view.bounds;
    [self.view.layer insertSublayer:bg atIndex:0];
}

-(IBAction)changeGradient:(UISegmentedControl *)sender {

    CAGradientLayer *layerToRemove;
    for (CALayer *aLayer in self.view.layer.sublayers) {
        if ([aLayer isKindOfClass:[CAGradientLayer class]]) {
            layerToRemove = (CAGradientLayer *)aLayer;
        }
    }
    [layerToRemove removeFromSuperlayer];

    CAGradientLayer *bg;
    if (sender.selectedSegmentIndex == 0) {
        bg = [BackgroundLayer greyGradient];
    }else{
        bg = [BackgroundLayer blueGradient];
    }

    bg.frame = self.view.bounds;
    [self.view.layer insertSublayer:bg atIndex:0];
}

Changing Gradient Background layer color for UiView IOS using CAGradientLayer classe

1 Answers