Skip to content
February 28, 2011 / Daniel Freeman

[iPhone] Combining a Tab Bar with a Navigation Controller

It’s often required to combine a Tab Bar navigation with a Navigation Controller. Internet and book tutorials I’ve seen tend to make a lot of song and dance about how to accomplish this. They often propose unnecessarily complicated solutions.  (Or possibly previous versions of XCode necessitated more complicated solutions?)  Anyway, combining a Tab Bar with list Navigation is actually pretty simple.

Our project will be arranged so that the navigation controller will exist inside one of the tab options.  But using the same principle, there’s nothing to stop you making different navigation controllers, and different UITable lists for each tab.

STEP 1.  Create a Tab Bar Application.  (The navigation controller will exist inside a tab).

STEP 2.  Create a new class.  (MyTableViewController).  A UITableViewController subclass.  (plus Nib file.)

STEP 3: Edit MyTableViewController.h, and add the <UITableViewDelegate> protocol.

@interface MyTableViewController : UITableViewController <strong><UITableViewDelegate></strong> {}

STEP 4: Edit MyTableViewController.h, and add the following <UITableViewDelegate> methods:-

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
   return <strong>1</strong>;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger) section {
   return <strong>10</strong>;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
   cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:CellIdentifier] autorelease];
}

//Configure the cell... (This is the text to appear in the list).

[[cell textLabel] setText:[NSString stringWithFormat:@"Cell %i",[indexPath row]]];

return cell;
}

STEP 5: Save everything in XCoder, and open MainWindow.xib in interface builder.

STEP 6:  Drag a new Table View Controller onto the Tab Bar Controller.

STEP 7: Change the class of the Tab Bar Controller to MyTableViewController

STEP 8: If you like, you can change the label of the Tab Bar Item to something more descriptive.  (You may also add an icon if desired).

STEP 9: That’s it!  Save Interface Builder, switch back to XCode, build and run.

Advertisements

2 Comments

Leave a Comment
  1. Anil / Aug 27 2011 11:53 pm

    How do I do the “STEP 6” you mentioned above. When I try to drag a table view into my main window.xib file of the tab bar application it does not stick. I am also not able to drag a navigation controller onto by tab bar nib file. If you could post some screenshots on how you accomplished the above that would be great.

    • Daniel Freeman / Aug 28 2011 12:18 am

      This blog post did originally have screen shots. But there seems to be a bug with wordpress, and my pictures were removed. I’ve now restored the pictures.

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

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

%d bloggers like this: