Skip to content

December 18, 2011

1

Multi view iPhone application – tab views and navigation bar

by noise

The basic of iPhone application development starts with multi view, so in this tutorial we will learn to create a multi view iPhone app.
We will create a simple app which will contain 2 tabs. The first tab will also use a navigation bar.

Creating the project and tab views

Create a new project for iPhone using the template Empty Application and name it MultiView.
We will add one view controller for each tab screen: add to the project one new file for each tab using the UIViewController subclass, name them FirstViewController and SecondViewController and select the checkbox With XIB for user interface.
Draw using the Interface Builder some interface on each of the 2 screens of our multi view iPhone app.

Multi view iPhone app - first view
First tab view of our multi view iPhone app

Multi view iPhone app - second view
Second tab view of our multi view iPhone app

Adding tab bars and navigation bars programmatically

Next we will add the tab bars and navigation bar to the app delegate programmatically.
Add a UITabBarController property to AppDelegate.h file:

@property (strong, nonatomic) UITabBarController *tabBarController;

Add a synthesize command to AppDelegate.m:

@synthesize tabBarController = _tabBarController;

Then in application:didFinishLaunchingWithOptions we will create one instance for each of the 2 view controllers:

    UIViewController *viewController1 = [[[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil] autorelease];
    UIViewController *viewController2 = [[[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil] autorelease];

On the first tab we want to use a navigation bar instead of a simple view. So we will define a navigation bar controller which uses as root controller the viewController1 object we just defined:

    UINavigationController* navController = [[[UINavigationController alloc]
                                              initWithRootViewController:viewController1] autorelease];

Now we use the controllers we defined and add them to the newly created tabBarController object. For the first tab we will use the navController, not the viewController1, because we want the navigation bar in charge of the view:

self.tabBarController = [[[UITabBarController alloc] init] autorelease];
self.tabBarController.viewControllers = [NSArray arrayWithObjects:navController, viewController2, nil];

Next, add the tabBarController as the root controller for the current window:

    self.window.rootViewController = self.tabBarController;

The method will look like this in the end:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
 
    UIViewController *viewController1 = [[[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil] autorelease];
    UINavigationController* navController = [[[UINavigationController alloc]
                                              initWithRootViewController:viewController1] autorelease];
 
    UIViewController *viewController2 = [[[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil] autorelease];
    self.tabBarController = [[[UITabBarController alloc] init] autorelease];
    self.tabBarController.viewControllers = [NSArray arrayWithObjects:navController, viewController2, nil];
 
    self.window.rootViewController = self.tabBarController;
 
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

Don’t forget to import the header files for the two controllers in the AppDelegate.m file:

#import "FirstViewController.h"
#import "SecondViewController.h"

We also need to define the images for those 2 tabs. Modify the initWithNibName method for each of the controllers in the following way:
In FirstViewController.m the method will look like:

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        self.title = @"First page";
        self.tabBarItem.image = [UIImage imageNamed:@"first"];    
    }
    return self;
}

And in SecondViewController.m:

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
        self.title = @"Second page";
        self.tabBarItem.image = [UIImage imageNamed:@"second"];    
    }
    return self;
}

The multi view iPhone app is ready!

Now when you run our multi view iPhone app, it will look like this:
Multi view iPhone app - final application look with tab screens

The tabs will switch between the two views, and the first view will contain the navigation bar.
We can add new screens to the navigation bar in the same way we did in the iPhone navigation bar plus table view application howto.

You can download the full project for this application here: Multi View iPhone app.

Hope you’ve liked this tutorial on how to build a multi view iPhone app, it will be your starting point to build great iPhone applications.

1 Comment Post a comment
  1. Apr 11 2012

    hi, I am interesting with the eplxmae, I have one question, how could I add one startup view which without the tabbar appears? here is the app that I am doing:startup menu : when the app launched, user will see this as a cover page , then it disappeared after few seconds, then user see the tabbar views.

    Reply

Leave a Reply

required
required

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments