iCodeJunkie.com

Gradients can help enhance your user interface if used correctly. Apple provides us with CAGradientLayer in the Quartz Core framework. Hopefully this post will help get CA greenhorn’s up and going. CALayer’s are scaleable interface elements with dozen’s of animatable properties. In this post will use CAGradientLayer to construct a UIButton subclass that resemble’s the App Store “Buy Now” button.

ZIStoreButton

In this post I would like to show you how to make a “Buy Now” button, very similar to Apple’s button on the App Store.

As you can see in the screen shot my ZIStoreButton has a nice gradient with a gloss, and and nice bevel around its edge. There are 2 major parts to this button class, first is achieving the look of both the normal and selected state of the button, and second is the animation from one state to the other.

Getting Setup

To get started following along with this tutorial you need to add a UIButton subclass to a existing project or start and new project and add a UIButton subclass to it. Also don’t forget to make sure you add the Quartz Core framework to your project and import it where ever you plan on using the Core Animation classes.

CAGradientLayer

The CAGradientLayer class is a subclass of CALayer and inherits most of the superclasses properties. CAGradientLayer has 2 very important properties that we need to be set. The first is the colors property, and the second is the locations property. I setup both of these properties to accomplish the shine effect. Lets set up the bevel first and then we will add a gloss layer on top. The first layer should be the same size as the frame of the button, and the second layer insets the first layer by 0.5 on all sides.

Next we need to setup and add the shine effect layer on top of what we have already built. This CAGradientLayer instance will require a little more patience to setup. The first step is to define the locations property with a NSArray object containing NSNumbers, where 0.0 is the start point and 1.0 is the end point.

Now lets set the colors property of the layer, and add the layers to the button’s layer.

Now if you build and go you should have a nice blue gradient with a gloss.

UIButton & UIControl

Our button a subclass of UIButton which means that we inherit from UIControl since UIButton is a subclass of it.  Our superclass calls setSelected: whenever it is touched or selected.

add the above method to your UIButton subclass.  When the button is touched its selected property changes to YES, and if this property is is being set, this is where we can catch it to animate between its physical states. So if self.selected is YES we need to animate to green and if not we animate to blue, its real simple.

And there you have it a slick looking 100 % scalable “BUY NOW” button

I still haven’t tried to make touches outside of the button recognizable so that it can fully behave like Apple’s button, but I’m pretty sure I know how to pull it off.

Here is a link to my git repository containing a demo project including the button http://github.com/zueos/ZIStoreButton