App design tip – Custom UINavigationBar

转自:http://ios-blog.co.uk/category/tutorials/app-design-tip-custom-uinavigationbar/

Always wondered how to change the default UINavigationBar for something cooler? Maybe something like Instagram or SyncListen?

There is quite an easy way to do that. All you need to do is to override one method. You can either create a category (which is what I’ll show) or subclass UINavigationBar. To create a category just insert this snippet right before the@implementation in your AppDelegate.m.

@interface UINavigationBar (MyCustomNavBar)
@end
@implementation UINavigationBar (MyCustomNavBar)
- (void) drawRect:(CGRect)rect {
    //matching the button color with the bar color
    [self setTintColor:[UIColor colorWithRed:0.85f green: 0 blue:0 alpha:1]];
    UIImage *barImage = [UIImage imageNamed:@"image.png"];
    [barImage drawInRect:rect];
}
@end

The image.png you see in the code is the image you want to use. This image has to be 320x44px (or 640x88px for Retina) and good UI manners tell you that it should somehow resemble default look of the navigation bar. Now all of yourUINavigationBars will have this image. If you want to add it only to specific ones (or you want to have different bars) you will need to subclass UINavigationBar instead.

Unfortunately there is one problem with this. The title will appear over you image. That is not a problem in case you want it to (like you can see in Instagram) but if the title is a part of your image you will have to set the title of the bar to a space (@” “)otherwise the back button won’t appear. This might be especially problematic in some situations (picking an image from Camera Roll is one I think) where the default title will always appear.

As usual the rule that “less is more” is true. Changing the default UINavigationBarcan add a special touch to your app but if you don’t do it carefully it will ruin the whole thing.