Adding image to navigation bar

Question

I'd like an image to take up all of a navigation bar. This is the navigation that comes with a navigation based app. It appears on the RootViewController with the accompanying UITableView. I've seen some examples of how this might work.

Set navigation bar title:

UIImage *image = [UIImage imageNamed:@"TableviewCellLightBlue.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.navigationController.navigationBar.topItem setTitleView:imageView];

The problem there is it only covers the title rather than the entire navigation bar.

There is also this thread: http://discussions.apple.com/message.jspa?messageID=9254241#9254241. Towards the end, the solution looks to use a tab bar, which I'm not using. It is that complicated to set a navigation bar background? Is there some other simpler technique?

I'd like to have a background for the navigation and still be able to use title text.

score 36 · Accepted Answer · edited May 23 '17 at 11:46

36

In your case, this solution found in another answer would work well.

With the "CustomImage" category added to UINavigationBar, you can then just call:

UINavigationBar *navBar = self.navigationController.navigationBar;
UIImage *image = [UIImage imageNamed:@"yourNavBarBackground.png"];
[navBar setBackgroundImage:image];

This code should go in the method

- (void)viewWillAppear:(BOOL)animated

of the view controller where you want to have the custom image. And, in that case you should better call:

[navBar clearBackgroundImage]; // Clear any previously added background image

before setBackgroundImage (otherwise it will be added multiple times...)

edited May 23 '17 at 11:46

Community

1
1

answered Oct 12 '09 at 08:27

Jean Regisser

6,636
4
32
32

Perfect. Thanks. In addition, do you know how I can set the title bar color? I've tried this but it isn't working: [self.navigationController.navigationBar.titleView setBackgroundColor:[UIColor blueColor]]; – 4thSpace Oct 12 '09 at 14:26
I've also tried [navBar setBackgroundColor: [UIColor blueColor]]; – 4thSpace Oct 12 '09 at 14:28
There is the tintColor property: try navBar.tintColor = [UIColor blueColor]; – Jean Regisser Oct 12 '09 at 15:19
If I leave off the setBackgroundImage part, the title text color still doesn't change with tintColor or BackgroundColor. I'm guessing we are in the wrong layer for changing that particular text. – 4thSpace Oct 12 '09 at 15:38

score 23 · Answer 2 · answered Sep 27 '12 at 08:38

23

its changed for ios6, to make it work in ios 6 use:

UINavigationBar *navBar = self.navigationController.navigationBar;
UIImage *image = [UIImage imageNamed:@"image.png"];
[navBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];

answered Sep 27 '12 at 08:38

user513790

1,225
1
13
22

score 9 · Answer 3 · edited Jan 20 '12 at 17:15

9

UIImage *image = [UIImage imageNamed:@"YourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

[self.navigationController.navigationBar addSubview:imageView];

edited Jan 20 '12 at 17:15

Hiren

12,720
7
52
72

answered Jan 11 '11 at 05:47

Chandramani

871
1
12
11

CIFilter · Answer 4 · 2011-09-21T10:43:00.250

There is actually a much easier way to add a background image to any UIView class or subclass. It requires no class categorization or extension (subclassing), and you can do this on an "as needed" basis. For example, to add a background image to a view controller's navigation bar, do the following:

self.navigationController.navigationBar.layer.contents = (id)[UIImage 
    imageNamed:@"background.png"].CGImage;

You'll need to remember to add the Quartz Core framework to your project and add #import <QuartzCore/QuartzCore.h> wherever you need to do this. This is a much cleaner, simpler way to alter the drawing layer of anything that inherits from UIView. Of course, if you want to accomplish a similar effect for all navigation bars or tab bars, then subclassing makes sense.

score 4 · Answer 5 · answered May 04 '12 at 21:25

UIImage *logo = [UIImage imageNamed:@"my_logo"];
UIImageView *logoView = [[UIImageView alloc]initWithImage:logo];
logoView.frame = CGRectMake(0, 0, 320, 37);

UINavigationController *searchNavCtrl = [[UINavigationController alloc] initWithRootViewController:searchViewController];
searchNavCtrl.navigationBar.barStyle = UIBarStyleBlack;


//searchNavCtrl.navigationItem.titleView = logoView;
//[searchNavCtrl.navigationController.navigationBar.topItem setTitleView:logoView];
[searchNavCtrl.navigationBar addSubview:logoView];

[logoView release];

score 4 · Answer 6 · edited Mar 26 '14 at 06:09

4

Just add this line .

 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"NavBar.png"] forBarMetrics:UIBarMetricsDefault];

Bam! One line and done.

edited Mar 26 '14 at 06:09

Darshan Kunjadiya

3,323
1
29
31

answered Jun 26 '13 at 16:59

Chris Klingler

5,258
2
37
43

score 3 · Answer 7 · answered Apr 30 '11 at 15:34

I used cmp's solution and added some logic to remove it as I only wanted a custom background image on home screen within on view appear.

HomeViewController.m

UIImage *image = [UIImage imageNamed:@"HomeTitleBG.png"]; 
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.tag = 10;

UIImageView *testImgView = (UIImageView *)[self.navigationController.navigationBar viewWithTag:10];

if ( testImgView != nil )
{
    NSLog(@"%s yes there is a bg image so remove it then add it so it doesn't double it", __FUNCTION__);
    [testImgView removeFromSuperview];

} else {
    NSLog(@"%s no there isn't a bg image so add it ", __FUNCTION__);
}

[self.navigationController.navigationBar addSubview:imageView];


[imageView release];

I also tried to use the suggested clearBackgroundImage method but couldn't get it to work so I gave the image a tag and then removed it in the other viewcontrollers on view will appear.

OtherViewController.m

UIImageView *testImgView = (UIImageView *)[self.navigationController.navigationBar viewWithTag:10];

if ( testImgView != nil )
{
    NSLog(@"%s yes there is a bg image so remove it", __FUNCTION__);
    [testImgView removeFromSuperview];  
}

`

yogesh yadav · Answer 8 · 2014-05-15T06:04:08.093

0

just go the view controller and paste in super viewdidload and replace your image in mainlogo and then set the navigation title in set your image logo

  - (void)viewDidLoad
{
   [super viewDidLoad];

   //set your image frame
    UIImageView *image=[[UIImageView alloc]initWithFrame:CGRectMake(0,0,70,45)] ;

  //set your image logo replace to the main-logo
   [image setImage:[UIImage imageNamed:@"main-logo"]];

   [self.navigationController.navigationBar.topItem setTitleView:image];

}

edited May 15 '14 at 06:04

answered May 13 '14 at 13:23

yogesh yadav

111
1
3

2

How does this improve on other answers here? – mmmmmm May 13 '14 at 13:43
@yogesh You know the answer, but i think the code is looks pretty with some comments/steps. – V.J. May 13 '14 at 13:55
@Mark you can add this in super view didload and – yogesh yadav May 15 '14 at 05:37
@yogeshyadav That comment adds nothing i.e. the comment repeats the code and does not explain it - also why and how does it differ from other answers are they wrong or less efficient? – mmmmmm May 15 '14 at 12:08
@Mark this code only show the navigation title on the image icon what i explain? – yogesh yadav May 15 '14 at 13:00

score 0 · Answer 9 · edited Feb 15 '18 at 06:41

Add code in appdelegate did finish with launching method

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

if([[[UIDevice currentDevice] systemVersion] floatValue] < 7.0)
{
    [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigation_or.png"] forBarMetrics:UIBarMetricsDefault];
    [[UINavigationBar appearance] setTitleVerticalPositionAdjustment:0.0 forBarMetrics:UIBarMetricsDefault];
}
else
{
    [[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

    [[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

    // Uncomment to assign a custom backgroung image
    [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigation_or.png"] forBarMetrics:UIBarMetricsDefault];

    // Uncomment to change the back indicator image
    [[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];

    [[UINavigationBar appearance] setBackgroundColor:[UIColor whiteColor]];
    [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@""]];

    // Uncomment to change the font style of the title

    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
    shadow.shadowOffset = CGSizeMake(0, 0);

    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,shadow, NSShadowAttributeName,[UIFont fontWithName:@"HelveticaNeue-Bold" size:17], NSFontAttributeName, nil]];

    [[UINavigationBar appearance] setTitleVerticalPositionAdjustment:0.0 forBarMetrics:UIBarMetricsDefault];
}

Adding image to navigation bar

9 Answers9

Linked