tapptics-thumb

Buttons are one, if not the, most primary controls used to trigger an action in iOS. Being able to style a UIButton can add great detail to your application. When broken down, a programmer has a lot of built-in control over the visual appearance of a button.

2.0 Visual Enhancements

Changing the look of a UITableView gives your application “that extra touch”. By visually altering the appearance, you are open to extend your creativity and better brand your application.

2.1 Smart Background Images

When creating an image to be used for the background of a button, you may initially wonder how you’re going to be able to reuse the image for different sized buttons. Creating a background image that can be reused for buttons of variable size will save quite a bit of time on the design side. Luckily, UIKit provides a convenient method of solving this problem.

To create an image that is capable of being stretched, there are a two rules of thumb that you must follow:

  • 1) The image must be the minimum width that will be needed.
  • 2) The image must have a section of pixels in the middle that can be repeated.
custom ios buttons

As seen in the above image this button’s background image adheres to both of these rules.

Once we have a background image that is capable of being stretched, incorporating it into the application is very simple. At this time, Interface Builder does not support stretching background images so this must be implemented in code.

Figure 2.1.2 demonstrates how easy it is to use our image for variable width buttons.


1
2
3
4
5
6
7
- (void)viewDidLoad {
    UIImage *buttonBackgroundImage = [UIImage imageNamed:@"green-button.png"];
    UIImage *stretchedBackground = [buttonBackgroundImage stretchableImageWithLeftCapWidth:33 topCapHeight:0];

//sendButton is declared as an instance variable UIButton in the interface
    [sendButton setBackgroundImage:stretchedBackground forState:UIControlStateNormal];
}

All we have to do is specify an image to be stretched, a left width cap, and a top cap height and we are good to go!

The left width cap is the amount of pixels you want to be used as your left cap. The right cap width is automatically the same as the left width. Since we are just stretching our image horizontally there’s no need to specify a top cap height.

Above is the result of using a stretched image versus just directly setting the background image of the button. The difference is very noticeable and it’s clear which one looks better.

If you want to take it a step further, and add more style to your buttons, you can use multiple background images for different control states. In our example, we set the background image for the control state UIControlStateNormal. Modifying the background image for this state will not only change the background image for the normal state but also for when a user presses the button.

The background image will automatically get a darker tint to it when it is tapped. Cocoa provides many control states to modify. If you’re more interested in customizing other states, take a look at the documentation for UIControl.

2.2 Styling the Label

Since iOS 3.0, the UIButton class has directly exposed the label that overlays the buttons. Being able to access the UILabel that is on our button, we have free reign to customize it. A common visual enhancement designers like to use on buttons is giving the title label a drop shadow. This creates an embossed look that adds depth to the button making it look more realistic.


1
2
3
4
5
- (void)viewDidLoad {
    UILabel *sendButtonLabel = [sendButton titleLabel];
    [sendButtonLabel setShadowColor:[UIColor blackColor]];
    [sendButtonLabel setShadowOffset:CGSizeMake(0.0f, -1.0f)];
}

Figure 2.2.1 shows how to add a drop shadow to a button’s title label.

While visual changes to the title label on a UIButton can be made through Interface Builder, being able to make the changes in code can allow for your application to make visual changes at runtime.

Another common modification to button labels is the font that’s used.


1
2
3
4
5
- (void)viewDidLoad {
    UILabel *sendButtonLabel = [sendButton titleLabel];
    [sendButtonLabel setFont:[UIFont fontWithName:@"Verdana" size:12.0f]];
    [sendButtonLabel setTextColor:[UIColor blackColor]];
}

Figure 2.2.2 displays how easy it is to change the font and text color of a button in code.

And there we have it! Download the Xcode project for this tutorial by signing up to the tapptics.com website

Enjoyed this post?

Subscribe to our RSS Feed or Follow us on twitter to keep up to date with the latest from iOS-Blog. Remember, Sharing is caring so please click one of the following options: