Changing background of navigation item and adding image

Question

I have a Root View controller, I need to know about changing its blue background to an image or changing its color and also want to add an image to its right side. For example in the below image i need to change the background of text Root View Controller to another image or change its color and add a small icon on right side of the Root View Controller text. How should I go about it? I have gone through Change Navigation bar Background image on each navigation but still having trouble implementing it.

AppDelegate.h

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end

Viewcontroller.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

This is my storyboard

Did you try this? [[UINavigationBar appearance]setBackgroundImage: @"navImage" forBarMetrics:UIBarMetricsDefault]; — karthika, Aug 27 '13 at 08:14

Master Stroke · Accepted Answer · 2013-08-27T08:47:50.813

2

Try putting any of these codes into ViewWillAppear/ViewDidAppear/didFinishLaunchingWithOptions(in case of appDelegate).

1)navigationItem.titleView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"urtitlebar.png"]];

OR

2)

UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];
UIImageView *image = [[UIImageView alloc]initWithImage:[UIImage     imageNamed:@"urtitlebar.png"]];
[image setFrame:CGRectMake(0, 0, 44, 44)];
[myView addSubview:image];
[self.navigationController.navigationBar addSubview:myView];

OR

3)

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

EDIT:(in case you're using old version of SDK say 3.2.5)

Create the subview of UINavigationBarand override the method called -drawRect:(CGRect)rect with,

@implementation UINavigationBar (BackgroundImage)

- (void)drawRect:(CGRect)rect 
{
    UIImage *navBarImage;


        image = [UIImage imageNamed: @"urNavigationBar.png"];
    }
    [navBarImage drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}

@end

edited Aug 27 '13 at 08:47

answered Aug 27 '13 at 08:28

Master Stroke

5,108
2
26
57

Thanks for your reply, I'm almost close to the solution with help of your code, but have some little trouble, in your 2nd answer is it possible to load the setFrame from right side? And in your 3rd answer I am getting this error "receiver type UINavigationBar for instance message doesn't declare a method setBackgroundImage" – Francis F Aug 27 '13 at 09:20
[image setFrame:CGRectMake(276, 0, 44, 44)]; – Master Stroke Aug 27 '13 at 09:24
ya, I have already adjust that too [image setFrame:CGRectMake(275, 0, 44, 44)], jst wanted to know if its possible to load it from right side, its fine. Any idea about the error, do I have to import any other class? – Francis F Aug 27 '13 at 09:34
yes, I am getting this error "receiver type UINavigationBar for instance message doesn't declare a method setBackgroundImage" – Francis F Aug 27 '13 at 09:43
use [navBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; this instead..(for ARC) – Master Stroke Aug 27 '13 at 09:52
http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/ ==> looks awesome...just now i found this...good luck... – Master Stroke Aug 27 '13 at 10:33

score 0 · Answer 2 · answered Aug 27 '13 at 08:15

Try This code in didFinishLaunchingWithOptions of AppDelegate.m for custom image on navigation bar.

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

You can also add custom button as bar button.

 // create a custom button in viewDidLoad of your ViewController in which you want to place a custom bar button
 UIButton *customBackBtn =[[UIButton alloc] init];
[customBackBtn setBackgroundImage:[UIImage imageNamed:@"yourImage.png"] forState:UIControlStateNormal];
customBackBtn.frame = CGRectMake(100, 100, 52, 31);

// set this customized button as BarButton
UIBarButtonItem *backBtn =[[UIBarButtonItem alloc] initWithCustomView:customBackBtn];
[customBackBtn addTarget:self action:@selector(goBack) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = backBtn;

Thats It.

thanks for your reply, in your first statement is it possible to position the image, for eg Now the image display from top to 75% but I need to display only the center part. And for second part, I know to add custom button, I'm trying to add an UIimage on right side instead of bar button, is it possible? — Francis F, Aug 27 '13 at 08:28

Changing background of navigation item and adding image

2 Answers2