Change UIButton gradient color - ios

Question

I use the following method to add some gradient effect to my IOS UIButton. I call it in viewController's viewDidLoad, works great, so far so good.
Now, I'd like to change the color of the button according to some user interaction. What I do is simply calling this method by different colors (fromColor, toColor) as input. The problem, the look of my button does not change. I tried to call setNeedsDisplay, but did not help.
Would you be so kind to help me? What I miss? There is should be some problem with layers, should be rested or something like that, but I could not find its proper way.
Update: By using setSubLayers instead of insertSubLayer color changes, but button title disappears.
+(void)setCustomButtonStyle:(UIButton *)button cornerRadius:(float) cornerRadius fromColor:(UIColor *)fromColor toColor:(UIColor *)toColor normalTitleColor:(UIColor *)normalTitleColor highlightedTitleColor:(UIColor *)highlightedTitleColor borderWidth:(float) borderWidth borderColor:(UIColor*)borderColor
{
[button setTitleColor:normalTitleColor forState:UIControlStateNormal];
[button setTitleColor:highlightedTitleColor forState:UIControlStateHighlighted];
CAGradientLayer *btnGradient = [CAGradientLayer layer];
btnGradient.frame = button.bounds;
btnGradient.colors = [NSArray arrayWithObjects:
(id)[fromColor CGColor],
(id)[toColor CGColor],
nil];
btnGradient.borderWidth = borderWidth;
btnGradient.borderColor = [borderColor CGColor];
[button.layer insertSublayer:btnGradient atIndex:0];
CALayer *btnLayer = [button layer];
[btnLayer setMasksToBounds:YES];
[btnLayer setCornerRadius:cornerRadius];
}

Answer 1

The problem you are having here is that 1. you are creating a new layer each time you are changing the colour and 2. you are then placing that new layer underneath everything else so you can't see it anyway. (Think of putting a playing card at the bottom of the deck).
What you need to do is keep hold of the gradient layer and then update then instead of creating a new one.
You are probably best doing this in a category on UIButton.
Something like... UIButton+GradientBackground or something.
In the .h file give it a single function...
// Use CGFloat not float. Also user NSInteger not int.
// Always.
// Also, I have used modern Obj-C syntax. Use this too.
- (void)setCornerRadius:(CGFloat)cornerRadius
fromColor:(UIColor *)fromColor
toColor:(UIColor *)toColor
normalTitleColor:(UIColor *)normalTitleColor
highlightedTitleColor:(UIColor *)highlightedTitleColor
borderWidth:(CGFloat)borderWidth
borderColor:(UIColor *)borderColor;
Then in the .m file you need to also give it a property...
#property (nonatomic, strong) CAGradientLayer *gradientLayer;
Now in the function...
- (void)setCornerRadius:(CGFloat)cornerRadius
fromColor:(UIColor *)fromColor
toColor:(UIColor *)toColor
normalTitleColor:(UIColor *)normalTitleColor
highlightedTitleColor:(UIColor *)highlightedTitleColor
borderWidth:(CGFloat)borderWidth
borderColor:(UIColor *)borderColor
{
[self setTitleColor:normalTitleColor forState:UIControlStateNormal];
[self setTitleColor:highlightedTitleColor forState:UIControlStateHighlighted];
if (!self.grandientLayer) {
// if it doesn't exist then create it and add it (only once)
self.gradientLayer = [CAGradientLayer layer];
[self.layer insertSublayer:self.gradientLayer atIndex:0];
}
self.gradientLayer.frame = self.bounds;
self.gradientLayer.colors = #[(id)fromColor.CGColor, (id)toColor.CGColor]; // use modern syntax
self.gradientLayer.borderWidth = borderWidth;
self.gradientLayer.borderColor = borderColor.CGColor;
[self.layer setMasksToBounds:YES];
[self.layer setCornerRadius:cornerRadius];
}
Notice that I have removed the button from the function name as this function will essentially be part of that UIButton's functions so self is the button you are changing.
You would call it like this...
[someButton setCornerRadius:5 fromColor:[UIColor redColor] toColor... and so on];
By doing this you only create that gradient layer once and you keep hold of it so that you can update it the next time round.

Answer 2

For first time add gradient layer, next time replace added gradient layer
Added Category as #Fogmeister thinks this can be used with category only
#interface UIButton (gradient)
+(void)setCustomButtonStyle:(UIButton *)button cornerRadius:(float) cornerRadius fromColor:(UIColor *)fromColor toColor:(UIColor *)toColor normalTitleColor:(UIColor *)normalTitleColor highlightedTitleColor:(UIColor *)highlightedTitleColor borderWidth:(float) borderWidth borderColor:(UIColor*)borderColor;
#end
#implementation UIButton (gradient)
+(void)setCustomButtonStyle:(UIButton *)button cornerRadius:(float) cornerRadius fromColor:(UIColor *)fromColor toColor:(UIColor *)toColor normalTitleColor:(UIColor *)normalTitleColor highlightedTitleColor:(UIColor *)highlightedTitleColor borderWidth:(float) borderWidth borderColor:(UIColor*)borderColor
{
//Set Title color as you want
[button setTitleColor:normalTitleColor forState:UIControlStateNormal];
[button setTitleColor:highlightedTitleColor forState:UIControlStateHighlighted];
//check gradientlayer exist
id layer = nil;
if (button.layer.sublayers.count > 0) {
layer = [button.layer.sublayers objectAtIndex:0];
}
//Find added gradient layer
CAGradientLayer *addedGradLayer = nil;
if (layer) {
if ([layer isKindOfClass:[CAGradientLayer class]]) {
addedGradLayer = (CAGradientLayer *)[button.layer.sublayers objectAtIndex:0];
}
}
//check gradient layer exists
if (!addedGradLayer) //first time
{
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = button.layer.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:
(id)fromColor.CGColor,
(id)toColor.CGColor,
nil];
gradientLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
gradientLayer.cornerRadius = button.layer.cornerRadius;
[button.layer insertSublayer:gradientLayer atIndex:0];
button.clipsToBounds = YES;
}
else //next time
{
CAGradientLayer *newGradientLayer = [CAGradientLayer layer];
newGradientLayer.frame = button.layer.bounds;
newGradientLayer.colors = [NSArray arrayWithObjects:
(id)fromColor.CGColor,
(id)toColor.CGColor,
nil];
newGradientLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
newGradientLayer.cornerRadius = button.layer.cornerRadius;
[button.layer replaceSublayer:addedGradLayer with:newGradientLayer];
}
}
#end