Button with gradient background + image + label in iOS

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.

Button with gradient and icon


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.
Button with gradient, icon and text

 

The values used as parameters in the CGRectMake method are calculated as shown in the next figure.

Measures

Share Button

3 Comments

  1. 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

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload the CAPTCHA.