UIButton gradient not working - iphone

Question

I found this code from tutorial and tried to use it:
CAGradientLayer *btnGradient = [CAGradientLayer layer];
btnGradient.frame = button.bounds;
btnGradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:102.0f / 255.0f green:102.0f / 255.0f blue:102.0f / 255.0f alpha:1.0f] CGColor],
(id)[[UIColor colorWithRed:51.0f / 255.0f green:51.0f / 255.0f blue:51.0f / 255.0f alpha:1.0f] CGColor],
nil];
[button.layer insertSublayer:btnGradient atIndex:0];
The code is in viewDidLoad method.
button is defined like this in .h file: #property (nonatomic, strong) IBOutlet UIButton *button;
and it's #synthesized in .m file and it's connected in interface builder
I am able to do other customization to the button like changing its background color (solid color) and changing the color of text. But when I try to use gradient color the background is just transparent.
I appreciate your help!

Answer 1

You need to set the gradient layer's frame to cover the entire button. Chance is that at viewDidLoad the button's size is zero, which makes the gradient layer's frame zero... And later when the button's size changes, the gradient layer's frame doesn't changed accordingly.
Subclassing UIButton and overriding layoutSubviews is a good idea
#interface MyButton : UIButton {
}
#implementation MyButton {
CAGradientLayer* _gradient;
}
-(id)init {
self = [super init];
_gradient = [CAGradientLayer layer];
_gradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:102.0f / 255.0f green:102.0f / 255.0f blue:102.0f / 255.0f alpha:1.0f] CGColor],
(id)[[UIColor colorWithRed:51.0f / 255.0f green:51.0f / 255.0f blue:51.0f / 255.0f alpha:1.0f] CGColor],
nil];
[self.layer insertSublayer:_gradient atIndex:0];
}
-(void)layoutSubviews {
[super layoutSubviews];
_gradient.frame = self.bounds;
}
#end
Another option is to use observeValueForKeyPath... to detect changes in the button's frame, and resize the layer accordingly. Not a very reusable solution thought.

Answer 2

I had this problem where the gradient wasn't appearing. Like #khanhnguyen said the problem was I setting it in viewDidLoad and because of that the button's bounds was unknown so nothing was appearing.
When I moved the code to viewDidLayoutSubviews it appeared. Here is the answer in Swift:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let purpleColor = UIColor(red: 129/255, green: 52/255, blue: 175/255, alpha: 1)
let pinkColor = UIColor(red: 221/255, green: 42/255, blue: 123/255, alpha: 1)
let yellowColor = UIColor(red: 254/255, green: 218/255, blue: 119/255, alpha: 1)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = yourButton.bounds
gradientLayer.colors = [purpleColor.cgColor, pinkColor.cgColor, yellowColor.cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
yourButton.layer.insertSublayer(gradientLayer, at: 0)
}
If using a collection view cell add it to:
override func layoutSubviews() {
super.layoutSubviews()
}

Answer 3

Probably first you need to set the frame button. Try this.
+ (UIButton*) buttonWithGradient:(CGSize)size beginColor:(UIColor*)beginColor endColor:(UIColor*)endColor
{
CGRect frame = { CGPointZero, size };
UIButton* button = [[UIButton alloc] initWithFrame:frame];
CAGradientLayer* gradient = [CAGradientLayer layer];
gradient.frame = frame;
gradient.colors = #[(id)beginColor.CGColor, (id)endColor.CGColor];
[button.layer insertSublayer:gradient atIndex:0];
return [button autorelease];
}