Adding image to navigation bar

Question

I'd like an image to take up all of a navigation bar. This is the navigation that comes with a navigation based app. It appears on the RootViewController with the accompanying UITableView. I've seen some examples of how this might work.

Set navigation bar title:

UIImage *image = [UIImage imageNamed:@"TableviewCellLightBlue.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.navigationController.navigationBar.topItem setTitleView:imageView];

The problem there is it only covers the title rather than the entire navigation bar.

There is also this thread: http://discussions.apple.com/message.jspa?messageID=9254241#9254241. Towards the end, the solution looks to use a tab bar, which I'm not using. It is that complicated to set a navigation bar background? Is there some other simpler technique?

I'd like to have a background for the navigation and still be able to use title text.

Solution 1

In your case, this solution found in another answer would work well.

With the "CustomImage" category added to UINavigationBar, you can then just call:

UINavigationBar *navBar = self.navigationController.navigationBar;
UIImage *image = [UIImage imageNamed:@"yourNavBarBackground.png"];
[navBar setBackgroundImage:image];

This code should go in the method

- (void)viewWillAppear:(BOOL)animated

of the view controller where you want to have the custom image. And, in that case you should better call:

[navBar clearBackgroundImage]; // Clear any previously added background image

before setBackgroundImage (otherwise it will be added multiple times...)

Solution 2

its changed for ios6, to make it work in ios 6 use:

UINavigationBar *navBar = self.navigationController.navigationBar;
UIImage *image = [UIImage imageNamed:@"image.png"];
[navBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

Solution 3

UIImage *image = [UIImage imageNamed:@"YourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

[self.navigationController.navigationBar addSubview:imageView];

Solution 4

There is actually a much easier way to add a background image to any UIView class or subclass. It requires no class categorization or extension (subclassing), and you can do this on an "as needed" basis. For example, to add a background image to a view controller's navigation bar, do the following:

self.navigationController.navigationBar.layer.contents = (id)[UIImage 
    imageNamed:@"background.png"].CGImage;

You'll need to remember to add the Quartz Core framework to your project and add #import <QuartzCore/QuartzCore.h> wherever you need to do this. This is a much cleaner, simpler way to alter the drawing layer of anything that inherits from UIView. Of course, if you want to accomplish a similar effect for all navigation bars or tab bars, then subclassing makes sense.

Solution 5

Just add this line .

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

Bam! One line and done.

View more solutions