CODEWITHSUNDEEP
iosiphonecocoa-touchbackgrounduinavigationbar
Mc.Lover
Mc.Lover

Reputation: 4994

How to add background image on iphone Navigation bar?

I want to add an image background to my navigation bar.

Is it right?

//set custom background image
UIImageView *backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"NavigationBackground.png"]];
[self.navigationBar insertSubview:backgroundView atIndex:0];
[backgroundView release];

Upvotes: 32

Views: 53534

Answers (12)

Babul Prabhakar
Babul Prabhakar

Reputation: 2403

Swift version : 

let navBar = UINavigationBar.appearance();
navBar.setBackgroundImage(UIImage(named: "yourImageName"), forBarMetrics: .Default)

Updated Swift 3.2 : 

let navBar = UINavigationBar.appearance();
        navBar.setBackgroundImage(UIImage(named: "yourImageName"), for: .default)

Upvotes: 1

luvieere
luvieere

Reputation: 37494

Your code alone won't do it, you'll have to write a category in order for it to work. There are two approaches regarding the way you should do it: the first one involves making the image a subview of your UINavigationBar and re-bringing it to front in each of your UIViewController's viewDidAppear method. This however has been reported having some issues with covering the right UIBarButtonItem. The other method involves overriding

- (void)drawRect:(CGRect)rect

and drawing the image there. Both of these are extensively covered in this blog discussion..

Upvotes: 32

Shahzaib Maqbool
Shahzaib Maqbool

Reputation: 1487

Try this code in your AppDelegate Class to show image at navigation bar. It will help you alot. 

[[UINavigationBar appearance] setBackgroundImage:[[UIImage imageNamed:@"headerImg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)] forBarMetrics:UIBarMetricsDefault];

Upvotes: 0

Aamir
Aamir

Reputation: 16957

While adding Navigation Bar background image, you should be very careful about its dimensions. Please make sure you have following dimensions for different screen sizes.

1) background.png => 320x44
2) [email protected] => 640x88 // used for iPhone5 and for retina devices
3) [email protected] => 1334x183 // used for iPhone6

Use following code to add background image and to avoid any tiling in Navigation Bar's background image.

[self.navigationController.navigationBar setBackgroundImage:[[UIImage imageNamed:@"background"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeStretch] forBarMetrics:UIBarMetricsDefault];

Upvotes: 0

Gurumoorthy Arumugam
Gurumoorthy Arumugam

Reputation: 2128

This one working fine in iOS 6 and 7 

UINavigationBar *navBar = [[self navigationController] navigationBar];
  UIImage *backgroundImage = [UIImage imageNamed:@"nav-bar-background-normal"];
  [navBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];

Upvotes: 2

Alcides Eduardo Zelaya
Alcides Eduardo Zelaya

Reputation: 86

what i did was just created an UIImage with the image i wanted and added to the navigation bar like this. 

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

[[UINavigationBar appearance] setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

Upvotes: 0

jianpx
jianpx

Reputation: 3330

in ios5 , I set the navigation bar background image(for all the navigation bar image) in AppDelegate.m:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [application setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
    UIImage *navBarBackgroundImage = [UIImage imageNamed:@"nav_bg"];
    [[UINavigationBar appearance] setBackgroundImage:navBarBackgroundImage forBarMetrics:UIBarMetricsDefault];
    return YES;
}

Upvotes: 8

Isuru Jayathissa
Isuru Jayathissa

Reputation: 488

When iphone 5 come we have to set both device type. So use this

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];
}

For more info go to this link

Upvotes: 2

Blazer
Blazer

Reputation: 14277

I would do this in the appdelegate something like

+ (void)Generalstyle {
    //navigationbar
    UINavigationBar *navigationBar = [UINavigationBar appearance];
    [navigationBar setBackgroundImage:[UIImage imageNamed:@"navigation.png"] forBarMetrics:UIBarMetricsDefault];

}

And in 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

    [[self class] Generalstyle];

}

.h file:

+ (void) Generalstyle;

Upvotes: 8

drunknbass
drunknbass

Reputation: 1672

The easiest way is just set the UINavigationBar layer contents.

NSString *barBgPath = [[NSBundle mainBundle] pathForResource:@"mybgimage" ofType:@"png"];
[nBar.layer setContents: (id)[UIImage imageWithContentsOfFile: barBgPath].CGImage];

The downside is the buttons are not generated off the proper tint but you can set the navbar color to whatever is closest to your bg image and the tint should be taken care of.

Upvotes: 9

iwat
iwat

Reputation: 3831

Here's the code from the link @luvieere mentioned. Paste this code into to the rootview controller just above @implementation rootviewController

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

As of iOS 5, there is an official way to do this. (see iOS Developer Library)

// someplace where you create the UINavigationController
if ([navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
    UIImage *image = [UIImage imageNamed:@"NavigationBar.png"];
    [navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}

But still, retain the old code for backward compatibility unless you really want to ditch iOS 4 and below.

Upvotes: 98

nduplessis
nduplessis

Reputation: 12436

You could also add a category that extends the UINavigationBar class and override the drawRect: method in the category.

Upvotes: 0

Related Questions