To create a button with a gradient background, read the previous post “Gradient Background in iOS without images“.
In this post I want to add an image into a button with a gradient background (gradient using the CAGradientLayer class).
1. The first step is to create the gradient background and insert it as a sublayer of the button.
// Gradient background CAGradientLayer *gradient = [GradientLayers blackBackground]; gradient.frame = mybutton.bounds; // Insert background [mybutton.layer insertSublayer:gradient atIndex:0];
The GradientLayers object contains static methods to create and return all the gradients needed in my application. The “blackBackground” method is defined as follows.
+ (CAGradientLayer*) blackBackground { // Create colors UIColor *darkOp = [UIColor colorWithRed:0.121f green:0.121f blue:0.121f alpha:1.0]; UIColor *lightOp = [UIColor colorWithRed:0.262f green:0.262f blue:0.262f 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; }
2. Create the image view object and insert it as a subview of the button.
// Create image UIImageView *imageView = [[UIImageView alloc] initWithFrame: CGRectMake(0, 0, mybutton.bounds.size.width, mybutton.bounds.size.height)]; // Image is hard-coded for simplicity [imageView setImage:[UIImage imageNamed:@"conf.png"]]; // Add the image [mybutton addSubview:imageView];
This code creates this first button.
3. If the button contains some text, reduce the icon size and fit its position to show both elements.
UIImageView *imageView = [[UIImageView alloc] initWithFrame: CGRectMake(mybutton.bounds.size.width/4, 5, mybutton.bounds.size.width/2, mybutton.bounds.size.height/2)];
In order not to hide the button text, it is necessary to change the layer in which the gradient background was inserted.
[mybutton.layer insertSublayer:gradient below:mybutton.titleLabel.layer];
This code creates this second button.
The values used as parameters in the CGRectMake method are calculated as shown in the next figure.
I found that my problem was that my button was a UIButtonTypeRoundedRect instead of a UIButtonTypeCustom! It works now!
I’m glad you solved it!
Hi, I’m trying to duplicate your example, but the gradient doesn’t appear.. I can see only white buttons.. have you an example code to download? Maybe I’m missing something..
Thanks
Selee