iOS5: How to style NavigationBar and NavigationToolBar? (background and size)

Question

I'd like to do something that I presumed would be quit simple but turned out to be quite hard! I want to style the navigationbar and toolbar of my navigationcontroller. I want them both to have:

1. A custom background image, I know I can use appearance proxies but this will not meet the requirements of the following point.
2. The navigationbar and toolbar should be of the same height of the background images that I set for them. I've tried setting the frame height but it didn't work.
3. Lastly I'd then like to add some buttons (with specific height and widths, not something fixed/standard) to the navigationbar and toolbar, but I hope the toolbar/navigation will just behave like an UIView.

How do I achieve these three points? Thanks!

Answer 1

I'd like to add a better solution (in my opinion): add a category for UINavigationBar and UIToolbar, for example:

UINavigationBar+myNavBar.m

#import "UINavigationBar+myNavBar.h"

@implementation UINavigationBar (myNavBar)
- (CGSize)sizeThatFits:(CGSize)size {
    UIImage *header = [UIImage imageNamed:@"Images/backgrounds/header"];
    CGSize newSize = CGSizeMake(header.size.width,header.size.height);
    return newSize;
}
- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"Images/backgrounds/header"];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

UINavigationBar+myNavBar.h

#import <UIKit/UIKit.h>

@interface UINavigationBar (myNavBar)
- (CGSize)sizeThatFits:(CGSize)size;
@end

The solution for UIToolbar is almost exactly the same.

Answer 2

What I did for this was to create images that looked exactly like the built in navigation bar. I also created a back button which was very close to the default one. You could of course do whatever you like. This did take a fair bit of time but once you've done that, you can just load them into your app as a UIImageView and a UIButton. Easy as pie. And totally customizable.

- (void) viewDidLoad {

    UIView *navBarView = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,44)];

    UIImageView *navBarImg = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,320,44)];
    [navBarImg setImage:[UIImage imageNamed:@"navigationBarImage"]]; // the name of the .png file you made
    [navBarView addSubview:navBarImg];

    UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [backButton setBackgroundImage:[UIImage imageNamed:@"backButtonNormal"] forState:UIControlStateNormal];
    [backButton setBackgroundImage:[UIImage imageNamed:@"backButtonHighlighted"] forState:UIControlStateHighlighted];
    [backButton setFrame:CGRectMake(5,5,40,35)]; //Depends on how you do your button
    [backButton addTarget:self action:@selector(backButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
    [navBarView addSubview:backButton];

    //Repeat for any other buttons you wish to add. 

    [self.view addSubview:navBarView];
}

- (IBAction) backButtonPressed:(id)sender {
   [self.navigationController popViewControllerAnimated:YES];
}


//Pushing VC's
// I usually make a declared property for the VC and then:
- (IBAction) visitNextVC {
   NextVC *_nextVC = [[NextVC alloc] initWithNibName:@"NextVC" bundle:nil];
   [self setNextVC:_nextVC];
   [self.navigationController pushViewController:nextVC animated:YES];
}