« December 2010 | Main | May 2011 »

January 4, 2011

Create Glass Buttons in iOS for iPhone

If you're building an iPhone app, and need a glassy button that looks just like other iPhone apps, here's the way I do it.

UIGlassButton is a class that Apple uses for developing apps, but it's not a published class so is not allowed per the developer agreement that one enters into with Apple when signing up (although there are stories of apps that use UIGlassButton being accepted by Apple).

There are a few methods out on the web for generating an official-looking glass button. My technique is to temporarily use the UIGlassButton class, run the app in the simulator, grab the button in different states (enabled/disabled) with a screen capture, and plunk that image into the background of a standard UIButton.

In the header file of the class add a class definition, indicating that UIGlassButton will be used:

@class UIGlassButton;

Then in your @implementation the glass button is generated as follows (the frame here centers the button at the bottom of the screen:

Class $UIGlassButton = objc_getClass("UIGlassButton");
UIGlassButton *glassButton = [[$UIGlassButton alloc] initWithFrame:CGRectMake(30, 371, 274, 42)];
[glassButton setTintColor: [UIColor orangeColor]];
[glassButton setTitle:@"Create a Group" forState:UIControlStateNormal];
[self.view addSubview:glassButton];

I actually keep a native Photoshop file for each app button set with a bunch of layers. It has some tweaks to the shadows, and a layer for each button so I can easily regenerate buttons if I need to make a change.

Posted by mike at 3:18 PM