HowTo: Add a Custom UINavigationItem to a UINavigationController with delegation

Posted by James Brindle on May 20, 2011.

As a footnote, now that i’ve figured it out, it does make sense as you stay within the whole Model, View, Controller pattern, it just seems like a lot of extra code to implement something that you could do with a table and some javascript in a web project but really it’s not and iPhone and iPad development is as far away from HTML and Javascript as England is to Australia in my opinion.

Here’s a brief walkthrough of how you do this, all these notes are for constructing in Xcode 4 which you should all be on by now anyway.

You’ll need to create a project using the Navigation Based application template, call it whatever you like and save it somewhere you can find it later. Once it opens it, change the device to “iPad” and then say YES to the prompt that will show up about transitioning to an iPad target.

(Note: While this technique will work on iPhone as well, you just don’t have the screen space available to add lots of things and the correct approach there is generally a utility based application with a flip-view for the search controls)

The Navigation Based Template will create an AppDelegate.h/.m pair, MainWindow.xib (which houses the Navigation Controller) and a RootViewController.h/.m/.xib – the .xib by default has a UITableViewController as this is often the required result for this type of application so while we’ll fill in the blanks that it needs, we’ll not discuss the table view controller here.

Create a new Cocoa Touch UIViewController Class which is targetted for iPad with a nib, call the file “CustomNavBar”, the .h/.m files brief contents you’ll need are shown below:

CustomNavBar.h:

[objc gutter="false"]
#import <UIKit/UIKit.h>

@interface CustomNavBar : UIViewController {
// we’ll connect this in the nib file
IBOutlet UISearchBar *searchWhat;
// we use this to store who the delegate will be
id delegate;
}

// declare the properties so they can be read/written to externally
@property (nonatomic, retain) IBOutlet UISearchBar *searchWhat;
@property (nonatomic, readonly) id delegate;

// this is our custom init method – you’d be silly to pass nil though
- (id)initWithDelegate:(id)delegateOrNil;

@end

// we define a protocol to adopt in our view controller
@protocol CustomNavBarDelegate <NSObject>
@optional
- (void)customNavBarIsReadyToBeConfigured:(CustomNavBar *)navBar;
@end
[/objc]

CustomNavBar.m:

[objc gutter="false"]
@implementation CustomNavBar
@synthesize searchWhat, delegate;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;

}

- (id)initWithDelegate:(id)delegateOrNil {
delegate = delegateOrNil;
return [self initWithNibName:@"customNavBar" bundle:nil];
}

- (void)viewDidLoad {
[super viewDidLoad];
if (self.delegate != nil) {
if ([self.delegate respondsToSelector:@selector(customNavBarIsReadyToBeConfigured:)]) {
[self.delegate customNavBarIsReadyToBeConfigured:self];
}
}
}

- (void)dealloc {
delegate = nil;
searchWhat = nil;
[super dealloc];
}

@end
[/objc]

Edit the nib in interface builder – this is the bit that is important to get right otherwise you’ll end up with an empty navigation bar and confusion.

First, select the view object and then in the property inspector on the right, set the status bar to “none” and background to “Clear Colour”. This does two things – it allows you to set a custom size for the view (otherwise it’s constrained to the iPad’s orientation as it thinks you’re building a full screen view) and makes the view’s background transparrent which means the iPad’s nice bar at the top will preserve it’s gradient.

Next, still with the view object, select the measurements tab and set it to 150px wide and 44px high – 44 is the height of the navigation bar and thankfully, the default height of the search bar and 150 is a nice width to use, get it working and experiment with the widths until it seems right.

Now, add a Search Bar object to the view, this should auto size to the current view, but make sure it lands at the top left and is 150 wide and 44 high.

Refer to the properties in the example nib for more info.

Hook the search bar up to the “searchWhat” outlet (if you don’t know how to do this then please read up on using interface builder). Do not hook up the delegate of the search bar, otherwise tapping the text field will cause a crash as we’re not implementing it’s protocol in this tutorial – but, all the methods of the search bar delegate are optional so it’s safe to omit this step.

That should be enough to let you get a message back to your view controller – wasn’t that much really was it?

On the next page we’ll make use of this in our view controller.

Pages: 1 2 3

About the Author

James Brindle is a freelance technology consultant based in Blackburn, Lancashire with over 20 years of experience in the IT, Media and Telecommunications industries with specialties in Web and Mobile Application development, Voice over IP (VoIP) deployment and integration, media storage and distribution systems and wide area solutions. He has a passion for retro gaming and volunteers as a presenter and acts as vice-chairman of Blackburn's Hospital Radio service.

Share Our Posts

  • Delicious
  • Digg
  • Newsvine
  • RSS
  • StumbleUpon
  • Technorati

Comments

There are no comments on this entry.

Trackbacks

  1. iOS: Setting text in nib subview from view in UITabBar/UINavigationController application - Programmers Goodies

Add a Comment

You must be logged in to post a comment.