31

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.

9 Answers 9

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...)

4
  • 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, 2009 at 14:26
  • I've also tried [navBar setBackgroundColor: [UIColor blueColor]];
    – 4thSpace
    Oct 12, 2009 at 14:28
  • There is the tintColor property: try navBar.tintColor = [UIColor blueColor]; Oct 12, 2009 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, 2009 at 15: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];
9
UIImage *image = [UIImage imageNamed:@"YourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

[self.navigationController.navigationBar addSubview:imageView];
8

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.

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

Just add this line .

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

Bam! One line and done.

0
3

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

`

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

}
5
  • 2
    How does this improve on other answers here?
    – mmmmmm
    May 13, 2014 at 13:43
  • @yogesh You know the answer, but i think the code is looks pretty with some comments/steps.
    – V.J.
    May 13, 2014 at 13:55
  • @Mark you can add this in super view didload and May 15, 2014 at 5: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, 2014 at 12:08
  • @Mark this code only show the navigation title on the image icon what i explain? May 15, 2014 at 13:00
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.