iOS - change gradient background of UIButton or custom UIButton - ios

Question

I created my own class derived from UIButton with .h file:
#interface MenuButton : UIButton
- (void)changeBackground;
#end
In implementation I tried to add some methods for changing background but without success so far:
#import "MenuButton.h"
#import "GradientLayers.h"
#implementation MenuButton
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self commonInit];
}
return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder;
{
self = [super initWithCoder:aDecoder];
if (self) {
[self commonInit];
}
return self;
}
- (void)commonInit;
{
// Gradient background
CAGradientLayer *gradient = [GradientLayers darkBlueBackground];
gradient.frame = [self layer].bounds;
// Insert background
[[self layer] insertSublayer:gradient atIndex:0];
[[self layer] setCornerRadius:10.0f];
[[self layer] setMasksToBounds:YES];
[[self layer] setBorderWidth:2];
[[self layer] setBorderColor:[[UIColor blackColor] CGColor]];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
// handle touch
[super touchesEnded:touches withEvent:event];
if ([self state] != UIControlStateSelected)
{
CAGradientLayer *gradient = [GradientLayers blackBackground];
gradient.frame = [self layer].bounds;
[[self layer] insertSublayer:gradient atIndex:0];
}
else
{
CAGradientLayer *gradient = [GradientLayers darkBlueBackground];
gradient.frame = [self layer].bounds;
[[self layer] insertSublayer:gradient atIndex:0];
}
}
- (void)changeBackground
{
CAGradientLayer *gradient = [[[self layer] sublayers] firstObject];
gradient = [GradientLayers blackBackground];
[[self layer] insertSublayer:gradient atIndex:0];
[self setNeedsDisplay];
}
#end
Part of GradientLayer.m file:
#import "GradientLayers.h"
#implementation GradientLayers
+ (CAGradientLayer*) blackBackground {
// similar to darkBlueBackground
}
+ (CAGradientLayer*) darkBlueBackground {
// Create colors
UIColor *darkOp = [UIColor colorWithRed:0.039f green:0.106f blue:0.278f alpha:1.0];
UIColor *lightOp = [UIColor colorWithRed:0.133f green:0.267f blue:0.65f alpha:1.0];
// Create gradient
CAGradientLayer *gradient = [CAGradientLayer layer];
// Set colors
gradient.colors = [NSArray arrayWithObjects:
(id)lightOp.CGColor,
(id)darkOp.CGColor,
nil];
// Shadow
gradient.shadowOffset = CGSizeMake(3.0f, 3.0f);
gradient.shadowColor = [UIColor blackColor].CGColor;
gradient.shadowOpacity = 0.6;
gradient.shadowRadius = 10;
// Other options
gradient.borderWidth = 0.5f;
gradient.borderColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:1.0].CGColor;
gradient.cornerRadius = 10;
return gradient;
}
#end
I have my buttons with darkBlueBackground as set in commonInit. It's not a problem. But I want to change it after user taps on button and so far without luck. If I set breakpoint I am in touchesEnded or changeBackground but after execution the button has same background as before. So how can I change background to another gradient background? Thanks

Answer 1

Because the [self layer].sublayers array is listed in back to front order (https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/sublayers), by inserting your replacement layer at index 0, you're always putting it behind the old gradient.
You should remove the old gradient layer and then add the new one.
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
// handle touch
[super touchesEnded:touches withEvent:event];
// Remove old gradient here
[[[[self layer] sublayers] objectAtIndex:0] removeFromSuperlayer];
if ([self state] != UIControlStateSelected)
{
CAGradientLayer *gradient = [GradientLayers blackBackground];
gradient.frame = [self layer].bounds;
[[self layer] insertSublayer:gradient atIndex:0];
}
else
{
CAGradientLayer *gradient = [GradientLayers darkBlueBackground];
gradient.frame = [self layer].bounds;
[[self layer] insertSublayer:gradient atIndex:0];
}
}
- (void)changeBackground
{
// Remove old gradient here
[[[[self layer] sublayers] objectAtIndex:0] removeFromSuperlayer];
CAGradientLayer *gradient = [[[self layer] sublayers] firstObject];
gradient = [GradientLayers blackBackground];
[[self layer] insertSublayer:gradient atIndex:0];
[self setNeedsDisplay];
}
You really should keep track of the gradient better, so you're not constantly removing and replacing it with the same gradient. Perhaps maybe just showing and hiding the selected state, which would always just sit above the unhighlighted version.