Skip to main content

UINavigationBar: How to customize Navigation Bar

Image
By
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 (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];
Labels:

Comments

Post a Comment

Popular posts from this blog

WPF-MVVM: RelayCommand Implementation

By
In WPF if we are implementing MVVM pattern then we need to play with Command rather than Events. You can use ICommand interface to create each command class. Implementation of ICommand in a class gives you CanExecute(), Execute() methods which take part in the action performed by Command.   Rather than making Command Class for each Command we can implement a generic Relay Command to get Command. Below is a RelayCommand class that we will implement.   ///   <summary>      ///  To register commands in MMVM pattern      ///   </summary>      class   RelayCommands  :  ICommand     {          readonly   Action < object > _execute;          readonly   Predicate < object > _canExecute;  ...
Post a Comment
Read more

.Net List with Changed event

By
Sometimes we need a List which can notify user when an item is added. Here is the way that you can implement a generic ArrayList which notifies user at the time of an element is added.   using  System; using  System.Collections; namespace  ArchiveData.Logging {    // A delegate type for hooking up change notifications.    public   delegate   void   ChangedEventHandler ( object  sender,  EventArgs  e);    public   class   ListWithChangedEvent  :  ArrayList   {      // An event that clients can use to be notified whenever the      // elements of the list change.      public   event   ChangedEventHandler  Changed;      public   object  NewlyAddedItem {...
Post a Comment
Read more

What is DispatcherTimer in wpf?

By
DispatcherTimer When you want to set a timer working with GUI, you always come across threading problem. The problem is that if you want to send some changes to UI that is constantly/continuously changing then that will make your UI unresponsive or in other words it will hang your UI.   To overcome from this situation, WPF gives us DispatcherTimer threading functionality that will take care of such continuously changing processing on UI thread and that will not hang your UI. We can accomplish same scenario in Win Form , through System.Windows.Forms.Timer and in WPF it is System.Windows.Threading.DispatcherTimer .   Difference between DispatcherTimer and Regular timer (System.Timers.Timer) DispatcherTimer is the regular timer. It fires its Tick event on the UI thread, you can do anything you want with the UI. System.Timers.Timer is an asynchronous timer, its Elapsed event runs on a thread pool thread. You have to be very careful in your event handler...
Post a Comment
Read more