Adding a TabBarController as a subview in iPhone?

  • Home >>
  • iOS
  • >> Adding a TabBarController as a subview in iPhone?

In this application we will see how to add a TabBarController as a subview , and when we press Home button in the tab bar it will display the MainView.

Step 1: Create a Window base application using the template. Give the application name “TabBar”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: Before we begin to write code, we need to create a couple of ViewControllers. Press ⌘ – N, select UIViewController subclass and only check the With XIB for user interface. Name it RootViewController, add another viewcontroller, name it TabBarViewController with XIB file.

Step 4: In the AppDelegate.h file, we have added UINavigationController. So make the following changes in the file.

@interface TabBarAppDelegate : NSObject <uiapplicationDelegate > {
  UIWindow *window;
  UINavigationController *navigationController;
}
  @property (nonatomic, retain) IBOutlet UIWindow *window;
  @property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

Step 5: Double click your MainWindow.xib file and open it to the Interface Builder. Drag the NavigationController from the library and place it to the main window. Now select view controller and bring up Identity Inspector change the class name into the RootViewController. Select RootViewController and bring up Attribute Inspector change the NIB file into the RootViewController.xib . Now save the xib file and go back to the Xcode.

Step 6: In the AppDelegate.m file make the following changes:


- (void)applicationDidFinishLaunching:(UIApplication *)application {
   [window addSubview:[navigationController view]];
   [window makeKeyAndVisible];
}

Step 7: In the RootViewController.h file we have added TabBarViewController, and UIWebView for display the web view. Mention one method for switch to the another view. Make the following changes :

  @interface RootViewController : UIViewController {
  TabBarViewController *tabBarViewController;
  IBOutlet UIWebView *webDisplay;
}
  @property (nonatomic, retain) IBOutlet UIWebView *webDisplay;
  @property (nonatomic, retain) TabBarViewController *tabBarViewController;

  -(IBAction)switchPage:(id)sender;

Step 8: Now double click your RootViewController.xib file and open it to the Interface Builder. Drag web view from the library and place it to the view window. Now drag Round Rect from the library and place it to the view window. Select File’s Owner icon and bring up connection inspector select webDisplay to the WebView. Now select Round Rect button and bring up connection inspector drag TouchUpInside to the File’s Owner icon and select switchPage: action. Save it and go back to the Xcode.

Step 9: Make the changes in the RootViewController.m file.

 -(IBAction)switchPage:(id)sender
 {
   if(self.tabBarViewController == nil)
{
  TabBarViewController *tabBar = [[TabBarViewController alloc]
  initWithNibName:@"TabBarViewController" bundle:[NSBundle mainBundle]];
  self.tabBarViewController = tabBar;
  [tabBar release];
  presentModalViewController:tabBarViewController animated:YES];
}
 [self.navigationController pushViewController:self.tabBarViewController animated:YES];
}

- (void)viewDidLoad {

  NSString *urlAddress = @"http://www.google.com";
  NSURL *url = [NSURL URLWithString:urlAddress];
  NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
  [webDisplay loadRequest:requestObj];
   [super viewDidLoad];
}

Step 10: In the TabBarViewController.h file we have added UITabBarController. make the following changes:

  @interface TabBarViewController : UIViewController {
  IBOutlet UITabBarController *tabBarController;
}

 @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

Step 11: Double click your TabBarViewController.xib file and open it to the Interface Builder. Drag TabBarController from the library and place it to the main window. Open the TabBarController and select the Item1 and bring up Attribute Inspector change the NIB name into the RootViewController.xib file . So when you Tab the Item1 it will show the 1st page that is web page. Now save the TabBarViewController.xib file and go back to the Xcode.

Step 12: Save your code , compile and  the run application on the simulator.

  • Rick
  • March 11, 2010
  • iOS

About the Author

Leave a Reply 1 comment

Morfest - September 13, 2010 Reply

i want source code for this lesson.

please tell me for link your source code.

thank you so much….

Leave a Reply: