iOS Series Part 1: Custom Design for UIBarButtonItem

For the past several months I have been working hard on developing iPhone and Android applications.   For my first blog post series, I will focus on iOS. I plan to write a new post monthly for a while before moving on to Android or Windows Phone 7. My hope is to help others solve many of the complex obstacles that trip many developers up when getting started with Objective C and iPhone application development.

First, let’s focus on creating a custom-designed button for UIBarButtonItem. This was something I struggled with because unfortunately the UIBarButtonItem class does not allow one to assign a UIImage to create a custom designed button. The workaround is simple. Simply create a custom UIButton and assign it to the initWithCustomView method of UIBarButtonItem.   This was great but I wanted to make this solution more modular. CustomToolbarButton is a class I created that extends UIButton with my custom designed button images.   Hopefully, this code is self explanatory.

Basically, you set a custom image for each state the button is in Ex: UIControlStateSelected and UIControlStateNormal. This class handles all of this, which decreases the amount of repetitive code you would otherwise have without it. I even added some extra methods for handling a button in the selected state and disabling the button. See the class and how to use it below.


@interface CustomToolbarButton : UIButton {
BOOL isSelected;

- (id) init;
- (BOOL) toggleSelected;
- (void) toggleEnabled;




// DefaultToolbarButton.m
// Timesheetr
// Created by Michael Ruschak on 2/28/11.
// Copyright 2011 Martino Flynn. All rights reserved.

#import "CustomToolbarButton.h"

@implementation CustomToolbarButton

- (id) init {

if (self == [super init]) {
isSelected = NO;

self.frame = CGRectMake(0, 0, 49, 30);

self.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
self.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

UIImage *normalStateImage = [UIImage imageNamed:@"inactive.png"];
UIImage *selectedStateImage = [UIImage imageNamed:@"start.png"];
UIImage *disabledStateImage = [UIImage imageNamed:@"active.png"];

UIImage *normalStateStretchImage = [normalStateImage stretchableImageWithLeftCapWidth:15 topCapHeight:0];
UIImage *selectedStateStretchImage = [selectedStateImage stretchableImageWithLeftCapWidth:15 topCapHeight:0];
self.backgroundColor = [UIColor clearColor];

[self setBackgroundImage:normalStateStretchImage forState:UIControlStateNormal];
[self setBackgroundImage:selectedStateStretchImage forState:UIControlStateSelected];
[self setBackgroundImage:disabledStateImage forState:UIControlStateDisabled];
[self setTitleColor:[UIColor grayColor] forState:UIControlStateDisabled];

self.titleLabel.font = [UIFont boldSystemFontOfSize:13.0f];


return self;

- (BOOL) toggleSelected {
if (isSelected == NO) {
isSelected = YES;
} else {
isSelected = NO;

[self setSelected:isSelected];

return isSelected;

- (void) toggleEnabled {
if (self.enabled == NO) {
self.enabled = YES;
} else {
self.enabled = NO;

- (void)dealloc {
[super dealloc];



Example of how to use this class:

CustomToolbarButton *addButton = [[CustomToolbarButton alloc] init];
[addButton setTitle:@"Add" forState:UIControlStateNormal];
[addButton addTarget:self action:@selector(addButtonClick:) forControlEvents:UIControlEventTouchUpInside];

UIBarButtonItem *addButtonItem = [[UIBarButtonItem alloc] initWithCustomView:addButton];


[addButton release];
[addButtonItem release];

At this point you can assign this UIBarButtonItem to a UIToolbar or UINavigationBar.

Leave a Reply

Your email address will not be published. Required fields are marked *