UINavigationBar: How to customize Navigation Bar

By customization we can change look and feel of Navigation Bar. Below is sample code which demonstrates how to customize Navigation Bar.

We can achieve this by using Categories in Objective-C:
Code Sample:

/*********************************************************/

@interface UINavigationBar (CustomNavBarImage)

– (void) setNavBackgroundImage:(UIImage*)bgImage;

– (void) removeNavBackgroundImage ;

@end

/************************************************************/

//.m file (Implementaion file)

#import “UINavigationBar+CustomNavBarImage.h”

@implementation UINavigationBar (CustomNavBarImage)

– (void) setNavBackgroundImage:(UIImage*)bgImage

{

if (bgImage == NULL)

return;

UIImageView *myImageView= [[UIImageView alloc] initWithImage:bgImage];

myImageView.frame = CGRectMake(0,0,320,44);

[self addSubview:myImageView];

[myImageView release];

// If you want to add some buttons and title go through that

//[myImageView release];

UIButton *addButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];//UIButtonTypeCustom

addButton .frame = CGRectMake(10, 0, 100, 44);

[addButton setTitle:@”Add” forState:UIControlStateNormal];

[addButton addTarget:self action:@selector(clickOnAddButton:) forControlEvents:UIControlEventTouchUpInside];

//Font size of title

addButton.titleLabel.font = [UIFont boldSystemFontOfSize:14];

[myImageView addSubview:addButton];

myImageView.userInteractionEnable = YES;

}

– (void) removeNavBackgroundImage

{

NSArray *subviewsArray = [self subviews];

for (int i=0; i<[subviewsArray count]; i++)

{

if ([[subviewsArray objectAtIndex:i]  isMemberOfClass:[UIImageView class]])

{

[[subviewsArray objectAtIndex:i] removeFromSuperview];

}

}

}

@end

// Calling

// Set Navigation Bar Image

[[self.navigationController navigationBar] performSelectorInBackground:@selector(setNavBackgroundImage:) withObject:bgImage];

// Remove Image

[[self.navigationController navigationBar] performSelector:@selector(removeNavBackgroundImage) withObject:nil];

// Second Simple Way : (Without Categories)

// Set  first this : self.NavigationController.navigationBarHidden = YES;

-(void) setCustomNavBar

{

UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake (0,0,320,44)];

// set your background image name like NavBarImage.png

myImage.image = [UIImage imageNamed:@”yourBGImage”];

myImage.backgroundColor = [UIColor clearColor];

[self.view addSubview: myImage];

UIButton *addButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];//UIButtonTypeCustom

addButton .frame = CGRectMake(10, 0, 100, 44);

[addButton setTitle:@”Add” forState:UIControlStateNormal];

[addButton addTarget:self action:@selector(clickOnAddButton:) forControlEvents:UIControlEventTouchUpInside];

//Font size of title

addButton.titleLabel.font = [UIFont boldSystemFontOfSize:14];

[myImage addSubview:addButton];

myImage.userInteractionEnable = YES;

}

//Called this function on viewdidload or loadView or viewWillAppear (according to your preference).

[self performSelector:@selector(setCustomNavBar)];

Other Methods are :

 

Until iOS 5 came out, we used drawRect override in AppDelegate to customize UINavigationBar.
Now iOS 5 give us some new method for styling (and old doesn’t work).
How to build app that will work on iOS 4 and iOS 5 with stylized UINavigationBar?
You must to do both!
In AppDelegate use this code:

@implementation UINavigationBar (UINavigationBarCategory)
– (void)drawRect:(CGRect)rect {
UIImage *img = [UIImage imageNamed:@”navbar.png”];
[img drawInRect:rect];
}
@end

and in

viewDidLoad method for iOS5 and above (in your view implementation):

if ([self.navigationController.navigationBar respondsToSelector:@selector( setBackgroundImage:forBarMetrics:)]){
[self.navigationController.navigationBar setBackgroundImage:[UIImage  imageNamed:@”navbar.png”] forBarMetrics:UIBarMetricsDefault];
}

If you see, here we are asking if navbar will respondToSelector to avoid crash on iOS4!
If you use this for iOS5:

if([[UINavigationBar appearance] respondsToSelector:@selector( setBackgroundImage:forBarMetrics:)]){
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@”navbar_bg.png”] forBarMetrics:UIBarMetricsDefault];
}


Your app will not work on iOS4 because can’t found [UINavigationBar appearance].
But, if you want to target only iOS5 this snippet will work for whole app. You can put it just in didFinishLaunchingWithOptions method in AppDelegate:

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@”navbar_bg.png”] forBarMetrics:UIBarMetricsDefault];

Set the image using method setBackgroundImage:forBarMetrics. (ios 5 and above)

[[UINavigationBarappearance] setBackgroundImage: portrait

forBarMetrics:UIBarMetricsDefault];

[[UINavigationBarappearance] setBackgroundImage: landscape

forBarMetrics:UIBarMetricsLandscapePhone];

Create resizable images

UIImage *portrait = [[UIImageimageNamed:@”image1″]

resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

UIImage *landscape = [[UIImage imageNamed:@”image2″]

resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0,0)];

Set the attributes of Naviagtion Bar (to set the title font, color, shadow offset)

[[UINavigationBarappearance] setTitleTextAttributes:

[NSDictionarydictionaryWithObjectsAndKeys:

[UIColorcolorWithRed:255.0/255.0green:255.0/255.0blue:255.0/255.0alpha:1.0],

UITextAttributeTextColor,

[UIColorcolorWithRed:0.0green:0.0blue:0.0alpha:0.8],

UITextAttributeTextShadowColor,

[NSValuevalueWithUIOffset:UIOffsetMake(0, -1)],

UITextAttributeTextShadowOffset,

[UIFontfontWithName:@”Arial-Bold”size:0.0],

UITextAttributeFont,

nil]];

Similary, we can set the background image of UISegmentedControl and UITabBar, UIBarButtonItem etc.

Advertisements

One thought on “UINavigationBar: How to customize Navigation Bar

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s