Designing Buttons in iOS 5

Designing Buttons in iOS 5

Design,Mobile | February 7th, 2012

By default Apple provides well styled interface elements to use when designing your application. Except for the UIButtons. To me using any other stock element is fine, but nothing screams amateur design like a default UIButton.

In my iOS apps I’ve tried a couple different methods of styling these buttons to get a more desirable look. While I know you can design buttons entirely in code, my Photoshop skills greatly exceed my programming skills. So my buttons are all designed in Photoshop, then imported as PNG files. Also iOS does such a good job with PNG optimization that I see it as the best choice.

Option 1: Using an Exactly Sized Image

 UIImage *buttonImage = [UIImage imageNamed:@"orangeButton.png"];
 UIImage *buttonImageHighlight = [UIImage imageNamed:@"orangeButtonHighlight.png"];

 // Set the background for any states you plan to use
 [saveButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
 [saveButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];

You can also do this in Interface Builder by setting the button Type to “Custom” and then add the image name to the background property.

 

Option 2: Using resizableImageWithCapInsets (iOS 5 Only)

This is my current preferred method (in most cases). It allows me to use the same images for most of the buttons across an application.

 UIImage *buttonImage = [[UIImage imageNamed:@"orangeButton.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];
 UIImage *buttonImageHighlight = [[UIImage imageNamed:@"orangeButtonHighlight.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(18, 18, 18, 18)];

 // Set the background for any states you plan to use
 [saveButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
 [saveButton setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];

Pretty straightforward. Here you can change the button dimensions without having to create a new image. In Interface Builder (or with code) you will need to set the titleLabel color as well as the shadow position and color.

Final Tips:

• Leave the text out of your images. This will scale better for the retina display and allow you to change it dynamically. No one wants to have to open Photoshop just to tweak some button text.
• Always include @2x versions of each image.
• If you prefer most of the customization (color, background, shadow) can be done in Interface Builder. Writing it in code is only required if you are using the second method (resizableImageWithCapInsets).

Whichever method you prefer, you can use some of my sample button styles to get started. Both methods still seem rough, so I would appreciate feedback and ways to better create buttons.

Download All the Button Files

Signup for my iOS Design Newsletter for more app design tips and articles.