2009
07.21

In the next series of posts, we’ll build a simple iphone app from scratch which utilizes the tab bar and navigation bar together by using Interface Builder for the majority of the constructs.  I’m a big fan of the Interface Builder as it is more intuitive to build the interface visually as opposed to programmatically.  The demo app we’re building is a simple one where it greets the user by his name (if known).  There will be a settings button on the navigation bar to open up a settings view where we get the user’s name

Of course the program itself is not very interesting and is more complicated than it needs to be but we hope that  after you follow this series, you will be more familiar with the following concepts:

  • Creating/using the Tab bar in Interface Builder
  • Creating/using a navigation bar in Interface Builder with a tab bar and how to handle the views it controls
  • Passing information between views

In part 1, we’ll cover the following:

  1. Creating a new Tab Bar Application Project
  2. Creating a NIB file (MainView.xib)
  3. Creating a Class (MainViewController)
  4. Linking MainView.xib and MainViewController Class
  5. Adding MainViewController to the Navigation Controller and the Navigation Controller to the TabBarController

Admittedly, the first part may be straight forward for some readers until step 5.  If you already know how to do all of part 1 and still would like to follow, you can get the source code here

So without further adieu, here we go:

1.  Creating a new Tab Bar Application Project

  • Open up Xcode (I’m using version 3.1 for this demo)
  • File -> New Project
  • In the new project window, select the Tab Bar Application.  Click on “Choose”

new_project

  • The next window will ask for the name of the project.  I called my project TabBarNavBarDemo but you can call it whatever you want

new_project2

  • The Xcode main window will appear.  We’ll want to open up Interface builder to get a closer look.  Open up Interface Builder by double clicking on MainWindow.xib (You can find under Resources)

xcode_MainWindow_selected

  • In Interface Builder, set the View Mode to list view (icon with the horizontal lines).  The list view mode works best for Interface Builder because you can see the hierarchy.
  • Expand out the Tab Bar Controller and the view controllers inside the Tab Bar Controller.  It should look like the following:

MainWindow_NIB

By default, the View for the First View Controller is included in the MainWindow.xib.  Although this works fine, it’s better practice to have each View in their separate NIB file.  This is what we’ll do.

2.  Creating a NIB file (MainView.xib)

MainView.xib will be the view that replaces the FirstViewController’s View.  In the future step, we’ll create a MainViewController to control this MainView.

Main View will be created in Interface Builder which will contain the greeting label.  This view will eventually be assigned the view for the first tab of the tab bar.

  • File -> New…
  • Use View template, click “Choose”

IB_create_view

  • Add a UILabel object to the view, label it “Hello World!”
  • Include simulated Navigation Bar and Tab bar to the View
  • Save the view as “MainView.xib” and add to the project.  Your view should look similar to the following:

MainView_NIB

3.  Creating a Class (MainViewController)

We will create a MainViewController class which is a subclass of UIViewController and is used to control the Main View.

  • In Xcode, select the Classes folder in the Groups & Files pane
  • File -> New File…
  • Select UIViewController subclass, click “Next”

xcode_new_file

  • Set the filename to”MainViewController.m”, make sure to have “Also create MainViewController.h” checked.  Click “Finish”

xcode_new_file2

  • Open MainViewController.h and have the contents of the file like the following:

#import <UIKit/UIKit.h>


@interface MainViewController : UIViewController {

UILabel *greetingLabel;

}


@property (nonatomic, retain) IBOutlet UILabel *greetingLabel;

-(void) updateGreeting;


@end

  • Open MainViewController.m and include the following after the line “@implementation MainViewController”:

@synthesize greetingLabel;


-(void) updateGreeting {

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults];

greetingLabel.text = [prefs objectForKey:@"userName"];

}

4.  Linking MainView.xib and MainViewController Class

We now revisit MainView.xib in Interface Builder and configure it so that the objects are linked back to the MainViewController Class

  • Open MainView.xib, click on File’s Owner and open the identity inspector (cmd + 4)
  • Change the File’s Owner from UIViewController to MainViewController
  • Switch to the connections inspector (cmd + 2).  Set the view outlet to the view object. (ie. drag the view circle to the view object in Interface Builder)
  • Open the View and click on the Hello World label.  Open the connections inspector for the label (cmd + 2)
  • Set the Referencing output of the Hello World label to the greetingsLabel from MainViewController (ie. drag from the “referencing outlet” circle to the File’s Owner and select greetingsLabel from the popup menu)
  • Save MainView.xib.  The connection and identity settings of your File’s Owner should look like the following:

IB_MainView_connections IB_MainView_files_owner_identity

5.  Adding MainViewController to the Navigation Controller and the Navigation Controller to the TabBarController

  • In MainWindow.xib, open the attributes inspector (cmd + 1) for the Tab Bar Controller
  • For the first tab, change the view controller to navigation controller

IB_MainWindow_tbcontroller_attributes

  • Expand the “Selected Navigation Controller (First)”.  You’ll see “View Controller (Item)” as part of the Navigation Controller.  Change the identity of this to MainViewController.  Your MainWindow.xib should look like the following:

IB_MainWindow_TB_modified

  • If all goes well, when you Build and Go, you should see the following:

simulator_part1

Congratulations!  You’ve successfully created the MainViewController class plus its view, set it as the root view controller of the navigation controller and made the navigation controller the controller for the first tab of the tab bar controller!

And that concludes the first part!

Did you run into troubles?   You can Download Source Code to compare.

Stay tuned for part 2!

13 comments so far

Add Your Comment
  1. this was helpful to me. thanks so much!

    one thing – i think you skipped the step of telling your new nav controller to use your ‘mainview’ nib file.

    i would love to see the rest of this tutorial. it’s set up almost exactly like the project i’m trying to create, and i’m struggling!!!!!!!!!! LOL.

    anyway, thanks again, and if you finish the next part of the tutorial, please let me know, if you don’t mind.

  2. I’m glad that it was helpful! I’ve been busy developing our next app but I’ll try to get the 2nd part done.

  3. Can’t wait for part 2.

  4. make part3

  5. plz!
    post remaining parts!!!!!!!

  6. That was helpfull. thanks. Anyway visit FriendsTab.blogspot.com !!!

  7. Time saving tip: wben you determine how many steps you will eed and your stair width.
    Fix brackets in position, attahh risers and treads.
    The brushes onn carlet cleaners aare accurately named Dirt – Lifter
    brushes and they do exactly what the name suggests
    - lift dirt from the carpet and into the hot water solution, which is then sucked back up
    from tthe carpet.

  8. I do not even know how I ended up here, however I thought
    this publish was once good. I don’t realize who you might be but definitely you’re going to a
    well-known blogger in case you aren’t already.

    Cheers!

  9. As well as, regarding internal cleqning is concerned,
    our homme window cleaning companies cardiff (http://www.23hq.com/thecardiffwindowcleaner/photo/22943514) cleaners
    offer a goood scrub to all home windows utilizing the good
    old squeegee as well ass ladder (if necessary).

  10. Tremendous issues here. I’m very happy to look your article.
    Thanks so much and I’m looking ahead to contact you. Will you kindly drop me a
    mail?

  11. I am really loving the theme/design of your website.

    Do you ever run into any browser compatibility issues?
    A number of my blog audience have complained about my blog not operating correctly in Explorer but looks great
    in Safari. Do you have any recommendations to help fix
    this problem?