Custom navigation bar

Question

I was crawling Dribble and found the attached design. I was wondering how to do a custom navigation bar like this. I mean how create the navigation bar once and reuse it implicitly for every view controllers.

I was thinking about having a kind of root view controller and inherit for other view controllers, but I don't know how to do this.

Any idea or link will be appreachated!

Cheers.

Cyril

Answer 1

Thanks to iOS5 you are now able to customise the appearance of a UINavigationBar without having to subclass or create a category.

The following code block (put it in your applicationDidFinishLoading: method) will change the UINavigationBar for the whole application to whatever image you give it.

Note, this will ONLY work in iOS5

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

However, you are also able to change the appearance of a single UINavigationBar depending on what view controller you're in by using the following code in viewDidLoad.

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

The above code is solely discussing the new ways to customise the UINavigationBar appearance thanks to iOS5. However, it does not discuss the way that the buttons have been implemented.

However, adding the buttons is a different game altogether. For this, I would recommend subclassing UINavigationBar, and then adding in the buttons where needed through that. You could probably even get away with just a standard UINavigationBar but custom UIBarButtonItems that run off a particular view.

For example:

UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease];
[rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]];

UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];
[rightButtonItem setAction:@selector(rightButtonAction:)];

I haven't tested that code so it isn't a copy/paste solution, but it gives you an idea of what needs to be done to accomplish "custom" looking UIBarButtonItems.

Good luck!

Answer 2

In older iOS versions you have to subclass UINavigationBar i.e.:

@interface CustomNavigationBar : UINavigationBar
@end

@implementation CustomNavigationBar

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        self.opaque = YES;
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"CustomBackground"]];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Skip standard bar drawing
}

@end

To use a custom navigation bar in your view controller, you should change a standard class name to CustomNavigationBar in XIB.

Also, you can set the custom navigation bar programmatically:

UIViewController *tempController = [[[UIViewController alloc] init] autorelease];
UINavigationController *navigationController = [[[UINavigationController alloc] initWithRootViewController:tempController] autorelease];

NSData *archive = [NSKeyedArchiver archivedDataWithRootObject:navigationController];
NSKeyedUnarchiver *unarchiver = [[[NSKeyedUnarchiver alloc] initForReadingWithData:archive] autorelease];
[unarchiver setClass:[CustomNavigationBar class] forClassName:@"UINavigationBar"];
UINavigationController *customNavigationController = [unarchiver decodeObjectForKey:@"root"];

UIViewController *contentController = [[[ContentViewController alloc] init] autorelease];
customNavigationController.viewControllers = [NSArray arrayWithObject:contentController];

Now customNavigationController has the custom navigation bar.