using image or tint color on uinavigationbar in ip

Question

how do i show a background image on a navigation bar or give tint color to the navigation bar in a native iphone application??

Answer 1

This's how I did on iOS4:

#import <QuartzCore/QuartzCore.h> // For .layer 

self.navigationController.navigationBar.layer.contents = (id)[UIImage imageNamed:@"navigationBarBackgroundImage"].CGImage;
self.navigationController.navigationBar.tintColor = [UIColor orangeColor];

No need to switch subviews between z-orders (-exchangeSubviewAtIndex:withSubviewAtIndex:), both background image and tintColor set in one line of code, and works with @2x image too.

Answer 2

a background image is going to take a bit more work (you might want to try setting a titleView that's the same size as the bar itself; I haven't tried this myself) or adding a view behind existing subviews. Tint color is easy: navBar.tintColor = [UIColor orangeColor];

Answer 3

For the iOS5 and iOS6 I've used this solutions and it worked perfectly, Making a Universal UINavigationBar Background Image.

iPhone Retina Portrait 640px x 88px / iPhone Non-Retina Portrait 320px x 44px

Inside AppDelegate.m

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

Place this code

// Set the status bar to black color.
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];

// Change @"menubar.png" to the file name of your image.
UIImage *navBar = [UIImage imageNamed:@"menubar.png"];

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

Don't forget to change the image name (menubar.png)

Check out this link for the full answer http://www.lwxted.com/blog/2012/add-custom-background-image-uinavigationbar-ios-5/

Answer 4

If you use the CGImage solution, you may have a problem with image size:

CGRect layer=self.navigationController.navigationBar.frame;
layer.size.height=57.0;
layer.origin.y=0;
self.navigationController.navigationBar.frame=layer;
CGImageRef imageRef         = [UIImage imageNamed:@"myImg.png"].CGImage;
self.navigationController.navigationBar.layer.contents = (id)imageRef;

It seems to me that the image is streched down, since the layer seems to have a height of 44.0 pixel, but a background image for the UINavigationBar should be at least 57.0.

If you try to move the layer's frame, all the buttons will move within it.

Answer 5

You can override UINavigationBar drawRect. The code can be placed to appDelegate.m I've tested it and it's working on 3x and 4x iOS.

@implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect {
    UIColor *color = [UIColor blackColor]; //tint color
    UIImage *img = [UIImage imageNamed: @"navBarBg.png"]; // your image
    [img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    self.tintColor = color;
 }@end

Answer 6

For iOS5 use the following lines of code:

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

For backward compatibility do a check to see if the navigation bar responds to setBackgroundImage:forBarMetrics:

More information on: http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/