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:
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; */