Background image for navigation view

Question

I am having problems with properly displaying background image of navigation view. Here is the pic:

Here is the code:

- (id)initWithStyle:(UITableViewStyle)style {
    if (self = [super initWithStyle:style]) {

        UIImage *image = [UIImage imageNamed: @"bg_table_active.png"];
        UIImageView *imageview = [[UIImageView alloc] initWithImage: image];
        UIBarButtonItem *addButton = [[UIBarButtonItem alloc]
                                       initWithTitle:NSLocalizedString(@"Settings", @"")
                                       style:UIBarButtonItemStyleDone
                                       target:self
                                       action:@selector(GoToSettings)];
        self.navigationItem.titleView = imageview;
        self.navigationItem.rightBarButtonItem = addButton;
        self.navigationItem.hidesBackButton = TRUE;
    }
    return self;
}

How can I make the picture stretch to the whole navigation view?

Answer 1

I do exactly this in my app. Within AppDelegate I have this code:

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

Answer 2

I modified Mike Rundle's version so that the a custom image can be set if necessary. I also merged in 40lb-suit-of-bees suggested changes. initImageDictionary needs to be called during initialisation:

//UINavigationBar+CustomImage.h
#import <Foundation/Foundation.h>

@interface UINavigationBar(CustomImage)
+ (void) initImageDictionary;
- (void) drawRect:(CGRect)rect;
- (void) setImage:(UIImage*)image;
@end


//UINavigationBar+CustomImage.m    
#import "UINavigationBar+CustomImage.h"
//Global dictionary for recording background image
static NSMutableDictionary *navigationBarImages = NULL;

@implementation UINavigationBar(CustomImage)
//Overrider to draw a custom image

+ (void)initImageDictionary
{
    if(navigationBarImages==NULL){
        navigationBarImages=[[NSMutableDictionary alloc] init];
    }   
}

- (void)drawRect:(CGRect)rect
{
    NSString *imageName=[navigationBarImages objectForKey:[NSValue valueWithNonretainedObject: self]];
    if (imageName==nil) {
        imageName=@"header_bg.png";
    }
    UIImage *image = [UIImage imageNamed: imageName];
    [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

//Allow the setting of an image for the navigation bar
- (void)setImage:(UIImage*)image
{
    [navigationBarImages setObject:image forKey:[NSValue valueWithNonretainedObject: self]];
}
@end

Answer 3

You can use this also

if([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
        //iOS 5 new UINavigationBar custom background
        [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"navbg_ForiPhone5_Imagename.png"] forBarMetrics: UIBarMetricsDefault];
    } else {
        [self.navigationController.navigationBar insertSubview:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"navbg_ForOtherIphone_Imagename.png"]] atIndex:0];
    }

`

Answer 4

Mike Rundle and Casebash's code is great. I used [NSValue valueWithNonretainedObject:self] to avoid the copyWithZone error. Wrapping self in an NSValue object allows it to be copied into the navigationBarImages dictionary.

- (void)drawRect:(CGRect)rect
{
    NSString *imageName=[navigationBarImages objectForKey:[NSValue valueWithNonretainedObject:self]];
...}

- (void)setImage:(NSString*)image
{
    [navigationBarImages setObject:image forKey:[NSValue valueWithNonretainedObject:self]];
}

Answer 5

http://foobarpig.com/iphone/uinavigationbar-with-solid-color-or-image-background.html

Hope it helps..

Answer 6

http://developer.apple.com/iphone/library/featuredarticles/ViewControllerPGforiPhoneOS/UsingNavigationControllers/UsingNavigationControllers.html#//apple_ref/doc/uid/TP40007457-CH7

Looking at Figure 1 in that link - would it be better to set the backgroundImage on your navigationbar not your navigationitem?

Answer 7

 UIImage *image = [UIImage imageNamed: @"navigator.png"];

[_homeNavigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

Answer 8

Unfortunately, there is no support for using custom background images in a navigation bar in iPhone OS 3.0 or any previous versions. The only way to customize the appearance is to set the style and tint color. Not perfect, I know.

In your code you are trying to stretch the title view of the navigation bar to "go under" the right button. But this is impossible since the three views of a navigation bar (back button, title, and right button) are supposed to be in the same layer and are adjusted to not overlap. This is a feature.

I know there are a number of third-party apps that change the background image but they are "hacking" the system and are using unsupported private API:s or assumptions of the internal data structures of the navigation bar. These programs will most likely fail (crash or display incorrectly) in future versions of iPhone OS.

You most likely don't want to mess with this. Accept the fact that that you cannot (yet) have a custom background image in navigation bars. It hurts, I know. But if you hack the system and your app fails in a future versions of the OS, Apple will pull the app from the app store and you will lose all revenue until you have changed the app. It's your call...