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

Answer 1

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 2

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 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];