iPhone devsugar: Create shiny buttons easily

iPhone developer Jonathan "Schwa" Wight offers a great little trick for creating pixel perfect glassy buttons: using the unofficial UIGlassButton class in the simulator to build your art. In his code paste, he shows how to build a button and render it to a PNG, which you can then save to your desktop.

It's a great little trick, and one worth adding to your development arsenal. Be aware that UIGlassButton is a private class, and one that has long since been relegated away from the official SDK development path. Although it continues to work on the Simulator, it's not for use on the iPhone itself or in App Store projects.

Continue reading on to find the code. Don't forget to substitute your own user folder into the code (in my case, "ericasadun") for Jonathan's ("schwa").

// Code to create a "Glass" button and render it to a png on your desktop.

// Run this from the SIMULATOR and change my username to yours.

// Update: This uses a private iPhone SDK. Do not use this code in your shipping app. 

// Use it merely to generate the PNG file for you to use in a fake button.



Class theClass = NSClassFromString(@"UIGlassButton");

UIButton *theButton = [[[theClass alloc] initWithFrame:

CGRectMake(10, 10, 120, 44)] autorelease];

[theButton setValue:[UIColor colorWithHue:0.267 

saturation:1.000 brightness:0.667 alpha:1.000] 

forKey:@"tintColor"];

[self.view addSubview:theButton];



UIGraphicsBeginImageContext(theButton.frame.size);



CGContextRef theContext = UIGraphicsGetCurrentContext();

[theButton.layer renderInContext:theContext];

UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();

NSData *theData = UIImagePNGRepresentation(theImage);

[theData writeToFile:@"/Users/schwa/Desktop/test.png" atomically:NO];



UIGraphicsEndImageContext();

View Tags

Source: http://twitter.com/schwa/status/9288691077

iPhone developer Jonathan "Schwa" Wight offers a great little trick for creating pixel perfect glassy buttons: using the unofficial...

Add a Comment

Sign in »

10 Comments

Filter by:

Edward Patel

Ah, yes. I did also create a small app to tweak the button class. Wasn't that hard...but, I really wanted the images to be opened in Preview so I set out to solve that. I did it with the help of a small system log monitor script. Have a look here http://memention.com/blog/2010/02/22/Make-it-work.html and the sources are here http://github.com/epatel/ButtonCreator

February 21 2010 at 7:16 PM Report abuse Permalink rate up rate down Reply

Rod

I've created a little app that will run on your device or in the simulator that uses this that you can download. Read about it at http://www.infinitenil.com/blog/2010/02/19/custom-iphone-button-creator/

February 19 2010 at 12:33 PM Report abuse Permalink rate up rate down Reply

Scott Little

Erica,

I have put an Xcode project on github that makes this into an iPhone app to run in the simulator that allows you to dynamically tweak the values.

See here: http://github.com/lksoft/ButtonMaker

Also, Matthew, that doesn't really work since the code is running in the simulator, the ~ expands to something like /Users/scott/Library/Application Support/iPhone Simulator/User/Applications/[UUID]/

February 19 2010 at 12:17 PM Report abuse Permalink rate up rate down Reply

matthew.tonkin

Rather than worry about the account name, just do...

[theData writeToFile:[@"~/Desktop/test.png" stringByExpandingTildeInPath] atomically:NO];

February 19 2010 at 12:01 PM Report abuse Permalink rate up rate down Reply

Can anyone tell me how to convert the hue value [0,360] from the colorpicker in interfacebuilder to a float value [0,1] for use in this code?

February 19 2010 at 11:40 AM Report abuse Permalink rate up rate down Reply

1 reply to mk's comment

Erich

Just use (180.0/360.0) for 180 degrees, or whatever you need.

[theButton setValue:[UIColor colorWithHue:(180.0/360.0) saturation:1.0 brightness:1.0 alpha:1.000] forKey:@"tintColor"];

February 19 2010 at 11:51 AM Report abuse Permalink rate up rate down Reply

Erich

Not quite for dummies, but I posted some notes on how to use this at http://bratton.com/index.php/2010/02/19/tips-on-using-uiglassbutton-to-make-shiny-glass-iphone-buttons/

February 19 2010 at 10:40 AM Report abuse Permalink rate up rate down Reply

Any chance someone can post a how to use this for dummies? not sure where SIMULATOR is or how to use it.

February 19 2010 at 10:03 AM Report abuse Permalink rate up rate down Reply

jtb

This will probably be handy and flexible for iPad development also.

February 19 2010 at 9:59 AM Report abuse Permalink rate up rate down Reply

Alan

Haha, I could have used that a few days ago instead of playing with about 5 different files in Photoshop to recreate the effect :P

February 19 2010 at 9:24 AM Report abuse Permalink rate up rate down Reply