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

My approach is to create a PNG background image and use stretchableImageWithLeftCapWidth:topCapHeight to stretch it over your UIButtons. That was how I customize the look of UIAlertView.

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

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.