how to put background image for navigation bar? - iphone

Question

I want to put background image for navigation bar. I tried the following code but it hides the title for navigation.
self.title = #"My title";
UINavigationBar *navBar = self.navigationController.navigationBar;
UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"top.png"]];
[navBar addSubview:image];
[navBar sendSubviewToBack:image];
Any buddy know why is it so?

Answer 1

This should go where your navigation controller is initialized, i.e. MainViewController.m
// Set the background image of the navigation bar
UIImage *image = [UIImage imageNamed:#"banner-with-logo.png"];
[self.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

Answer 2

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"background.png"] forBarMetrics:UIBarMetricsDefault];

Answer 3

You can done by override the drawRect method
#implementation UINavigationBar (TENavigationBar)
- (void) drawRect:(CGRect)rect
{
UIImage *image = [UIImage imageNamed:#"navigation_background"];
[image drawInRect:CGRectMake(0,
0,
self.frame.size.width,
self.frame.size.height)];
}
#end

Answer 4

Solution by WaiLam will work but if you are playing movies in your app the player navigation bar will also get change. Here is a better approach -
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
if([self isMemberOfClass:[UINavigationBar class]])
{
UIImage *image;
image=[UIImage imageNamed:#"hor_bar"];
CGContextClip(ctx);
CGContextTranslateCTM(ctx, 0, image.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextDrawImage(ctx,
CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}
else
{
[super drawLayer:layer inContext:ctx];
}
}
#end

Answer 5

This will add an image, with the correct sizing, to the NavigationBar, centered.
/* custom navbar logo, centered with same height as navbar */
UIImageView *logo = [[UIImageView alloc] initWithFrame:
CGRectMake(self.navigationController.navigationBar.frame.size.width/2-75,0,150,
self.navigationController.navigationBar.frame.size.height-1)];
[logo setImage:[UIImage imageNamed:#"text_logo.png"]];
[self.navigationController.navigationBar addSubview:logo];
[self.navigationController.navigationBar sendSubviewToBack:logo];

Answer 6

If you want to add the image so that it is always the same throughout the application than use this:
- (void)drawRect:(CGRect)rect {
// Drawing code
UIImage *img = [UIImage imageNamed: #"background-image.png"];
[img drawInRect:CGRectMake(0,
0,
self.frame.size.width,
self.frame.size.height)];
}
otherwise if you want to set the image at a particular screen only than it is bit tricky like:
- (void) viewWillAppear{
...
...
[self addNavigationBarImage:YES];
}
- (void) viewWillDisappear{
...
...
[self addTheNavigationBarImage:NO];
}
- (void) addTheNavigationBarImage:(BOOL)add{
UIImageView *imgView = (UIImageView *)[[self.navigationController navigationBar] viewWithTag:TAG];
if(add){
if(imgView == nil){
imgView = [[[UIImageView alloc] initWithImage:IMAGE] autorelease];
[self.navigationController.navigationBar insertSubview:imgView atIndex:0];
}
//EDIT:
else{
[self.navigationController.navigationBar sendSubviewToBack:imgView];
}
}
else{
if(imgView)
[imgView removeFromSuperview];
}
}
Hope this helps.