Changing the UINavigationBar background image

Question

I've been trying to change the background image of the UINavigationBar of my application. I tried several ways. First I added to my AppDelegate class the following code:

@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

But it wasn't working. My next try was to write a CustomizedNavigationBar Class which is overriding the drawRect method. It looked like that:

CustomizedNavigationBar.h

#import <UIKit/UIKit.h>

@interface CustomizedNavigationBar : UINavigationBar

@end

CustomizedNavigationBar.m

#import "CustomizedNavigationBar.h"

@implementation CustomizedNavigationBar

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

    NSLog(@"I got called!!!!!");
}

@end

In my .xib file where the NavigationBar is defined I changed the class to the new CustomizedNavigationBar. But still it is not working..

As another test I downloaded an example project where the background image should be changed. But even with that sample code it was not working.

What am I doing wrong? I am using IOS 5. Any suggestions or other ways I could define a background image?

Thanks for your answers!

Finally i've got a working solution
[http://stackoverflow.com/questions/9304817/uinavigationbar-setting-background-image][1] [1]: http://stackoverflow.com/questions/9304817/uinavigationbar-setting-background-image — Basem Saadawy, Oct 19 '12 at 22:15
Outdated duplicate of https://stackoverflow.com/questions/43602848/ — jn-se, Aug 05 '17 at 19:44

score 79 · Accepted Answer · edited Jan 02 '19 at 13:49

79

Starting in iOS 5 you should use the -setBackgroundImage:forBarMetrics: method:

[myNavbar setBackgroundImage:[UIImage imageNamed: @"UINavigationBarBackground.png"] 
               forBarMetrics:UIBarMetricsDefault];

And in Swift 4:

navigationBar.setBackgroundImage(UIImage(named: "UINavigationBarBackground.png"),
               for: .default)

edited Jan 02 '19 at 13:49

Michael

6,451
5
31
53

answered Oct 14 '11 at 08:41

Craz

8,193
2
23
16

1

How we can set Navigation Bar item to this image color pattern? – Ramz Jul 06 '12 at 08:09
For a better solution and different screen sizes see https://stackoverflow.com/questions/43602848/ – jn-se Aug 05 '17 at 19:41

score 8 · Answer 2 · answered May 22 '12 at 20:42

Considering all iOS versions, this seems to be accomplishing both Custom background image and Custom size of UINavigationBar:

@interface CustomNavigationBar : UINavigationBar
@end

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

    //for iOS5
    [self setBackgroundImage:[UIImage imageNamed: @"navigationBar"] forBarMetrics:UIBarMetricsDefault];
}

//for custom size of the UINavigationBar
- (CGSize)sizeThatFits:(CGSize)size {
    CGSize newSize = CGSizeMake(320,31);
    return newSize;
}

@end

I use such codes in a common place like a Utilities file.

Hope this helps.

score 1 · Answer 3 · edited Oct 10 '14 at 10:06

Just try with this code.. In your implmentation (.m) file.

#import "RootViewController.h"

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

@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;

    self.title=@"You are Done.";
}

This has worked in excellent way for me.

Above Code Worked for only IOS 4. if you use the IOS 5 then use.....

 [myNavbar setBackgroundImage:[UIImage imageNamed:
 @"UINavigationBarBackground.png"] 
                    forBarMetrics:UIBarMetricsDefault];

categories impelmenting the `drawRect:` method will no longer work in iOS 5 as that method is not called on the class anyway (framework uses other techniques). Only sublcasses can add a drawRect method. There is some binary compatibility to invoke categories but only when you compile with iOS 4 SDK — Martin Ullrich, Oct 14 '11 at 09:54
If this is gonna not work, then one can try with CustomToolbar. — Ajay Sharma, Oct 14 '11 at 10:23

score 0 · Answer 4 · edited Dec 30 '14 at 07:19

0

Well for iOS 4 there is a simple solution, like:

nvc.navigationBar.layer.contents = (id)img.CGImage;

edited Dec 30 '14 at 07:19

Kampai

22,848
21
95
95

answered May 22 '12 at 17:33

Pavel Sich

1,299
10
10

score 0 · Answer 5 · answered Jun 14 '13 at 09:26

You can also try this for Navigationbar Background.

UINavigationBar *navigationBar = self.navigationController.navigationBar;
UIImage *image = [UIImage imageNamed: @"NavBar-Wood.png"];
[navigationBar setBackgroundImage:image forBarMetrics: UIBarMetricsDefault];
self.navigationController.navigationBar.tintColor = [UIColor brownColor];

Thanks.

score 0 · Answer 6 · answered May 14 '14 at 08:05

Another way to set an image in navigation bar is,

UIImage* logo = [ UIImage imageNamed:@"Logo.png" ];
UIImageView* logoView = [[[UIImageView alloc] initWithImage:logo] autorelease];
self.navigationItem.titleView = logoView;

This will not change whole navigation bar background. But adds a background image centered on the navigation bar, which is sometime more intended (what I was looking for).

score 0 · Answer 7 · edited May 23 '17 at 12:18

0

You can add UIImageview to navigation bar as follows UINavigationBar navBar = [[UINavigationBar alloc]init]; [navBar addSubview: imageview]; [navBar release];

You can check the post : iPhone - NavigationBar Custom Background

edited May 23 '17 at 12:18

Community

1
1

answered Oct 14 '11 at 07:33

Minakshi

1,437
1
11
19

Changing the UINavigationBar background image

7 Answers7

Linked

Related