This was one a little more difficult, but shows the tip of the iceberg on what can be achieved with Core Animation.
The requirement was to have a button on the view, of which the user could choose the icon, and then the colour of the icon.
To make it more complicated, the designer decided that it would be good UI to have a gradient applied to the icon colour.

The button must be clickable, as clicking the button takes you to the screen where you can choose your icon and colour.

Icon provided by the designer was a plain white symbol with transparency, in .png format.

Method of approach will be to:

  • Create a button
  • Create a gradient
  • Add this gradient to the buttons’ layer
  • Create an imageView
  • Add the image to the imageView
  • Add the imageView as a subView to the button
  • Add a few tweaks to the button like rounded corners & shadows/li>

Firstly I created a button with interface builder, and made it the size of the image I wanted.  The whole button will be covered by the image and gradient.
Next I created a gradient:

    CAGradientLayer *gradient = [CAGradientLayer layer];
    //imageButton is the handle on the button defined in interface builder - set the size to the image bounds
    gradient.frame = self.imageButton.bounds;
    //CGColor built using UIColor methods.  I was actually given hex colours, but converted them with
    //http://www.javascripter.net/faq/hextorgb.htm
    //Colors are hard coded in here for simplicity of this tutorial
    struct CGColor *topColor = [UIColor colorWithRed:210.0/255 green:15.0/255 blue:10.0/255 alpha:1.0].CGColor;
    struct CGColor *bottomColor = [UIColor colorWithRed:150.0/255 green:5.0/255 blue:5.0/255 alpha:1.0].CGColor;
    //We need to use this fancy __bridge object in order to get the array we want.
    gradient.colors = [NSArray arrayWithObjects:(__bridge id)topColor, (__bridge id)bottomColor, nil];

Now we add this layer to the button:

   [imageButton.layer insertSublayer:gradient atIndex:0];

Now create the imageView, add the image and set that to buttons’ subView:

   UIIMageView *imageView = [[UIImageView alloc] initWithFrame:self.imageButton.bounds];
   // Image is hard coded in here for simplicity of this tutorial
   [imageView setImage:[UIImage imageNamed:@"star.png"]];
   [imageButton addSubview:imageView];

Now the gradient is set on the button, and the image is set on top. Edges looks a bit square though…

   //Clip the sublayers at the bounds of layer
   imageButton.layer.masksToBounds = YES;
   //Adding a radius, border width and colour
   imageButton.layer.cornerRadius = 10.0;
   imageButton.layer.borderWidth = 2.0;
   imageButton.layer.borderColor = [[UIColor grayColor] CGColor];
   //Make sure we have no text on the button during normal or highlighted states
   [imageButton setTitle:nil forState:UIControlStateNormal];
   [imageButton setTitle: nil forState: UIControlStateHighlighted];
/*
   We can also add shadows if we like:
   imageView.layer.shadowOffset = CGSizeMake(0,-1);
   imageView.layer.shadowColor = [[UIColor grayColor] CGColor];
   imageView.layer.shadowOpacity = 1.0f;
*/