Subclassing UINavigationBar … how do I use it in UINavigationController?

Question

I wanted to subclass UINavigationBar (to set a custom background image & text color) and use that for all the navigation bars in my app. Looking at the API docs for UINavigationController, it looks like navigationBar is read-only:

@property(nonatomic, readonly) UINavigationBar *navigationBar

Is there a way to actually use a custom UINavigationBar in my UIViewControllers? I know that other apps have done custom navigation bars, like flickr:

http://img.skitch.com/20100520-bpxjaca11h5xne5yakjdc2m6xx.png

Here is my UINavigationBar subclass:

#import <UIKit/UIKit.h>

@interface MyNavigationBar : UINavigationBar <UINavigationBarDelegate> {

}

@end

the implementation

#import "MyNavigationBar.h"

@implementation MyNavigationBar

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // override the standard background with our own custom one
    UIImage *image = [[UIImage imageNamed:@"navigation_bar_bgd.png"] retain];
    [image drawInRect:rect];
    [image release];
}

#pragma mark -
#pragma mark UINavigationDelegate Methods

- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
    // use the title of the passed in view controller
    NSString *title = [viewController title];

    // create our own UILabel with custom color, text, etc
    UILabel *titleView = [[UILabel alloc] init];
    [titleView setFont:[UIFont boldSystemFontOfSize:18]];
    [titleView setTextColor:[UIColor blackColor]];
    titleView.text = title;
    titleView.backgroundColor = [UIColor clearColor];
    [titleView sizeToFit];

    viewController.navigationItem.titleView = titleView;
    [titleView release];

    viewController.navigationController.navigationBar.tintColor = [UIColor colorWithRed:0.1 green:0.2 blue:0.3 alpha:0.8];
}
- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
}


- (void)dealloc {
    [super dealloc];
}

@end

I know that I can use a category to change the background image, but i still want to be able to set the text color of the navigation bar title

@implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed: @"navigation_bar_bgd.png"];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

any suggestions or other solutions? I basically want to create a light background and dark text like Flickr's app navigation bars

Answer 1

I dunno if you got this figured out. But for others that might have this problem...

What you need to do is to specify the class in your XIB to your class name (in this case MyNavigationBar.

Check session 123 in WWDC 2011.

Answer 2

Set the UINavigationBar "tint" property to the color you want.

Answer 3

Try creating a [UIColor colorWithPatternImage:(UIImage*)image] and setting it to the NavBar's backgroundColor property. I haven't tried this yet, but I will do it right now.