More and more developers are creating custom user elements these days to give ‘Branded’ feel to the application. While doing so, we have to keep in mind Human Interface guidelines Apple has provided us. The easiest way to create your own custom element is to subclass Apple’s existing UI elements. Here is a quick tip on how to create custom UINavigationBar, so that simple properties like background, text color & tint can be customized.

In this Article, i will show you how to subclass UINavigationBar to get the desired look and feel.

Step 1. Subclassing UINavigationBar

Subclassing is easiest way to implement custom drawing code or add methods to already existing elements. To start, create a new class file. I will name it “CustomNavigationBar”. Your header file should look like this when you are done :

#import
@interface CustomNavigationBar : UINavigationBar<UINavigationControllerDelegate> {
 
}
@end

This class “CustomNavigationBar”, since inherits from UINavigation has exactly same behavior of UINavigationBar.If you were to create a new “CustomNavigationBar” object or set a Navigation Barʼs class to “CustomNavigationBar” in Interface Builder you would be presented with a standard navigation bar object. However. By over- riding UINavigationBar methods in our classes .m file, we can change the behavior of our navigation bar instance.

Step 2. Drawing the Custom Bar background

Drawing a custom background for a UI element can be as simple as over-writing the drawRect method for most UI view inherent elements.for this example we will fill out navigations bar background with a simple 3 x 45 pixel background image. It will stretch automatically, so don’t worry about that.Modify drawRect: method in implementation file, to look like this :

- (void)drawRect:(CGRect)rect {
	// Drawing code
	UIImage *image = [[UIImage imageNamed:@"navBar.png"] retain];
	[image drawInRect:rect];
	[image release];
}

PS: if you have to change just the background image, it will work now. But it you want to customize titleView you have to implement UINavigationControllerDelegate also.

Step 3. Implement UINavigationControllerDelegate

UINavigationControllerDelegate object will be notified when a new viewController is about to be pushed into navigation stack OR after being pushed  into navigation stack. Since, we have modify titleView property we are more interested when a new viewController is about to be pushed. Add following lines to the implementation file :

#pragma mark -
#pragma mark UINavigationDelegate Methods
 
- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
	NSString *title = [viewController title];
	UILabel *myTitleView = [[UILabel alloc] init];
	[myTitleView setFont:[UIFont boldSystemFontOfSize:18]];
	[myTitleView setTextColor:[UIColor yellowColor]];
	myTitleView.text = title;
	myTitleView.backgroundColor = [UIColor clearColor];
	[myTitleView sizeToFit];
	viewController.navigationItem.titleView = myTitleView;
	[myTitleView release];
 
	viewController.navigationController.navigationBar.tintColor = [UIColor colorWithRed:0.16f green:0.36f blue:0.46 alpha:0.8];
}
 
- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
}

Step 4. Build proper connections in Interface builder

If you are programmatically creating navigation Controller then you don’t have to anything in interface builder, you just have to set delegate properly. The sample application with this article is done via Interface builder, hence this step is necessary :

Once delegate is set, your application is good to go. Launch it and a look around. You can also download sample Application and play with it.

Sample Application : NavigationColor.zip

Thats it. This is all you need for a simple Custom UINavigationBar. Its very simple but at the same time very efficient trick. If you want you can modify titleView to show any image you want, you can add gradient to the text now since effectively it a view now. You can do anything you want with it.

Hope this helps somebody. If you face any problem implementing this, leave a comment here and i will try to help you out.

Good Luck. Happy Programming. :)

Related posts:

1. iPhone Development Tip : Debugging Memory release I was struggling with a bug in my latest iPhone...
2. iPhone Development Tip : How to Dynamically Initialize Class in Objective-C While working on an iPhone project i wanted a way...
3. iPhone Dev Tip: How to find out Available/Free Memory The iPhone has limited memory,and as developer its our responsibility...
4. Core Graphics Tutorial : How to create a sleek Weather View In this tutorial i will show you how to create...