How to Define Custom backBarButtonItem

When you push a UIViewController into navigation stack, there is a default "back" button with the title of previous view. Sometimes the title is too long or text is not quite right. Then you need to define your own.

Fortunately it's easy. The problem is where to do it.

Changing Name of "Edit" UIBarButtonItem

If you use default UIToolbar "Edit" button provided by Interface Builder, you cannot change the name from code. You have to change UIBarButtonItem identifier to "Custom" and title as "Edit". Then add this delegate code:

- (IBAction)setEditing:(BOOL)editing animated:(BOOL)animated
{
    [self.myController.myView setEditing: !self.myController.myView.editing animated:YES];
    if (self.myController.myView.editing)
    {
        self.editButton.title = @"Done";
        self.editButton.style = UIBarButtonItemStyleDone;
    }
    else
    {
        self.editButton.title = @"Edit";
        self.editButton.style = UIBarButtonItemStyleBordered;
    }
}

Don't forget to hardcode button width at 43 pixels, otherwise change of button title will shift position of following items on toolbar. That 43 pixels is the default width of standard Edit button and wide enough to show longer "Done" text string.

How to Do Totally Custom Titlebar

iPhone SDK does not support a "titlebar" with custom background image, fully visible title text and titlebar buttons.

You can create semi-transparent UINavigationBar or UIToolbar (style Black Translucent) to see custom background (UIView just below), but your image is still dimmed. You can tune Alpha value between 1 and 0, but at the same time your title text and buttons visibility change, too.

Another solution is to create a custom setup, which just looks like a titlebar:




Inherit your own MyToolbar class from UIToolbar. Place on it 3 UIBarButtonItems: one for left side button, one Flexible Space UIButton in middle and one for right side button. The middle flexible sized button should push your other button to correct locations. If not, change it to fixed size and reside as you wish. Your number of button can also differ, naturally. I used 5.

Here's the full source code for your class:

#import 
@interface MyToolbar : UIToolbar {
}
@end

#import "MyToolbar.h"
@implementation MyToolbar

- (void)drawRect:(CGRect)rect 
{
    // Warning: Hardcoded for portrait size
    UIImage *image = [[UIImage imageNamed:@"sample.png"] retain];
    [image drawInRect:rect];
    [image release];    
}
@end

Place a UILabel on top of your toolbar, resize to fit the available space between other buttons. Change font e.g. Helvetica Bold size 18, color red, , shadow black and background transparent (opacity 0%).