How do I programmatically provide a glossy look to UIButtons?

Question

I would like to add 3D or glossy look to some iPhone UIButtons, but do so without the use of PNGs or stretchable images. I have a lot of buttons of varying shapes and sizes with lots of colors which are generated on the fly, so prerendered images are not feasible in my case.

How would you go about drawing the gloss on these buttons programmatically?

Answer 1

In this answer, I provide some code for drawing a gloss gradient over a UIView, but Mirko's answer to that same question shows a more performant way of doing this.

I created a more elaborate 3-D button style, with gloss and shadowing, as an example for my course. The code for that 3-D button is part of the package that can be downloaded here (look for the MATCGlossyButton UIButton subclass). I describe the drawing of this element in the video for the Quartz 2D class from the spring semester of my iPhone development course on iTunes U.

Answer 2

One way to do this programatically is to modify properties of a UIButton's layer. For example, you can add an instance of CAGradientLayer as a sublayer, set the layer's corner radius, modify it's border, etc. Matt Long has written a great article about this:

http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/

Answer 3

UIButton *button1                 =   [[UIButton alloc] initWithFrame:CGRectMake(10, 10, 200, 40)];
button1.backgroundColor           =   [UIColor blackColor];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = button1.bounds;
gradient.colors = [NSArray arrayWithObjects: (id)[[UIColor grayColor] CGColor],(id)[[UIColor blackColor] CGColor], nil];
[button1.layer insertSublayer:gradient atIndex:0];