Wednesday, September 12, 2012

Tabbed Application, Doing it Programmatically


How to create a Tabbed Application without choosing Tabbed Application in creating a new project.

1. Create a new empty application. Make your own MainWindow.xib file, you already know how to do this.

2. Go to AppDelegate.h, add a UITabBarControllerDelegate
@interface AppDelegate : UIResponder <UIApplicationDelegate, UITabBarControllerDelegate>

3. Add a UITabBarController property.
@property (strong, nonatomic) UITabBarController *tabBarController;

4. Synthesize your tabBarController variable in AppDelegate.m.

5. Under function application:didFinishLaunchingWithOptions, let's allocate and initialize our tabBarController.
self.tabBarController = [[UITabBarController alloc] init];

6. Create a New File, Subclass ViewController, put all the UI components you want, you may do it programmatically, or using Interface Builder. 
In my example, I created FirstViewController and SecondViewController. I only put a UILabel in each ViewController, so that I will know that the shown ViewController is from first or second ViewController. Import these ViewControllers in your AppDelegate Class.

7. Allocate and Initialize your viewControllers, this is still under application:didFinishLaunchingWithOptions function:
 UIViewController *viewController1 = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
    UIViewController *viewController2 = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];

8. Set the view controllers of our tabBarController. 
self.tabBarController.viewControllers = [NSArray arrayWithObjects: viewController1viewController2nil];


Note: If you put more viewController objects in self.tabBarController.viewControllers array, tabBarController will automatically create more tabs for you. But it will limit up to five tabs only. 
If you have more ViewControllers to show, the tabBarController will automatically change the fifth tab to "More…". And when you click "More" tab, you will see a navigation-based view, and it places your other viewControllers in a table format. Upon selecting a row from the table, that's the time your viewController will be "pushed" and viewed.


9. Set the rootViewController of your window to tabBarController.
self.window.rootViewController = self.tabBarController;

10. Tab indices start at 0, tabBarController will automatically show the viewController on index 0 (of your array). But, you may choose to show a different ViewController first by:
[self.tabBarController setSelectedIndex:1];


Note

You may add an image or a tabTitle for every ViewController...

If you want to change the image or tabTitle of the firstViewController, go to FirstViewController.m, under the initialization function. add these codes.
self.title = @"First";
self.tabBarItem.image = [UIImage imageNamed:@"myImage1"]; //Example: the filename of your image is "myImage1.png"

For the images, you have to import those images to your project first. Right-click the folders on the Project Navigator, choose "Add Files to project_name," choose the images you want to import.




2 comments:

  1. Could you add some images?

    It is really hard to read and to understand.

    ReplyDelete

Blocks From one Class to Another

One popular scenario in using blocks is when you need to update your view after a web service call is finished.