Adding a background image to UINavigationBar covers the title

Question

I have successfully added a background image to my UINavigationBar with the following code:

    UIImageView *barView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"subHeader_lg.png"]];
    [calculatorBar addSubview:barView];

    [barView release];

However, with this method, the title of the view is covered by the image.

enter image description here

If I navigate further into the app, and then back, the title appears on top of the background image like so:

enter image description here

Any ideas how I can get the title to appear on top from the beginning?

I have tried pushing the barView to the back, but that makes it hidden behind everything else.

EDIT:

It seems that the custom draw function is the accepted answer, but I am unable to get the draw function to be called. I have this code at the bottom of my appdelegate.m file

@implementation UINavigationBar (UINavigationBarCustomDraw)

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

@end

Looks like this guy had a similar problem, but the answer was a bit more involved than the one you have. http://stackoverflow.com/questions/979750/background-image-for-navigation-view-iphone/2046393#2046393 — Pixelmixer, Nov 07 '11 at 20:32

Christian Schlensker · Answer 1 · 2011-11-07T20:58:05.917

1

When you call "addSubview" it adds it above any view that have already been added, thus covering the title.

What you want is

[calculatorBar insertSubview:barView atIndex:0];

However, this won't make it "stick" on subsequent pushes, so use the methods described at http://www.developers-life.com/custom-uinavigationbar-with-image-and-back-button.html for a better solution.

Also in iOS 5, Apple has added a built in way to customize the nav bar see http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAppearance_Protocol/Reference/Reference.html#//apple_ref/doc/uid/TP40010906

edited Nov 07 '11 at 20:58

answered Nov 07 '11 at 20:50

Christian Schlensker

21,708
19
73
121

Is the iOS5 solution backwards compatible? – Dan F Nov 07 '11 at 21:11
No but here's another post that shows how to combine the two http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/ – Christian Schlensker Nov 07 '11 at 22:07
When I try the custom draw function, it is never even called. – Dan F Nov 09 '11 at 21:34
Do you have any advice for why the custom draw function wouldn't be working? – Dan F Nov 15 '11 at 20:55

score 1 · Answer 2 · answered Nov 18 '11 at 19:40

1

To set the background image on your navigation bar, use the following.

On iOS 5.x, use [calculatorBar setBackgroundImage: barView.image forBarMetrics: 0];

On iOS 4.x use calculatorBar.layer.contents = (id)barView.image.CGImage;

answered Nov 18 '11 at 19:40

greenhorn

1,097
6
10

I'm trying to support all iOS versions, what about prior to iOS 4.0 – Dan F Nov 18 '11 at 20:04
The following should work on iOS 3.x too. calculatorBar.layer.contents = (id)barView.image.CGImage; – greenhorn Nov 19 '11 at 06:00
For some reason my compiler is not recognizing the contents property on the CALayer object – Dan F Nov 21 '11 at 14:42
Try to add #import – Nov 21 '11 at 17:05

Adding a background image to UINavigationBar covers the title

2 Answers2