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.

---

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.