How to Create Custom Background for UINavigationBar

Needed a custom background for UINavigationBar (pre-iOS5). First tried placing an UIImageView under "Black Translucent" UINavigationBar, but there were some problems:

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%).