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

Read More

Could not instantiate class named NSLayoutConstraint solution

When running my iOS application from XCode I got the following exception:

Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Could not instantiate class named NSLayoutConstraint'

This exception means that the new NSLayoutConstraint class is not supported. When creating XIBs from Xcode, the option to use this class is enabled by default. The solution is to select your XIB and uncheck the box in the Interface Builder that says “Use Autolayout”.

Read More

Screenshot on iPhone Simulator

To take a normal screenshot on a Mac computer, press Shift + Cmd + 4 on your keyboard. When the cursor changes, you can select the area of the screen to be captured.

To directly capture the iPhone simulator screen, press Ctrl + Cmd + c on your keyboard. Open Preview (or any similar application) and select the option “New from Clipboard”.

Read More