Creating a Tabbar

I haven’t seen many examples of creating a tabbar controller other than “theElements” example from Apple, which is pretty intense. So, what follows is a short snippet from a proof-of-concept application I was recently working on.

The basic idea is as follows: a UITabBarController contains an array of UIViewController objects, and these views are swapped when one of the tabbar buttons is clicked. You can see in the code below how I setup the view controllers that will be displayed for each tab, and add those controllers into the tabbar controller array.

The resulting tabbar looks as follows:

The interface file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    //
    //  BirdBookAppDelegate.h
 
    #import <UIKit/UIKit.h>
 
    @interface BirdBookAppDelegate : NSObject <UIApplicationDelegate>
    {
      UINavigationController *navigationController;
      UIWindow *portraitWindow;
      UITabBarController *tabBarController;
    }
 
    @property (nonatomic, retain) UINavigationController *navigationController;
    @property (nonatomic, retain) UITabBarController *tabBarController;
    @property (nonatomic, retain) UIWindow *portraitWindow;
 
    @end

The implementation file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
    //  BirdBookAppDelegate.m
 
    #import "BirdBookAppDelegate.h"
    #import "Bird.h"
    #import "AllBirds.h"
 
    @implementation BirdBookAppDelegate
 
    @synthesize navigationController;
    @synthesize tabBarController;
    @synthesize portraitWindow;
 
    /*************************************************************************/
    - (void) configureUI
    {
      // Create nav-controller for local use
      UINavigationController *localNavController;
 
      // Create portrait window and content view (to hold other views)
      UIWindow *localPortraitWindow;
      localPortraitWindow = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
      self.portraitWindow = localPortraitWindow;
      [localPortraitWindow release];  // Retained by delegate thru above setter
 
      // Set background color
      [portraitWindow setBackgroundColor:[UIColor blackColor]];
 
      // New tabbar controller and array to contain the view controllers
      // There are two (2) view controllers needed
      // One for "Identify Bird" and one for "Lookup Bird"
      tabBarController = [[UITabBarController alloc] init];
      NSMutableArray *localViewControllersArray = [[NSMutableArray alloc] initWithCapacity:2];
 
      /*--------------------------------------------------------------------
       * Setup the 2 view controllers for the different data representations
       *-------------------------------------------------------------------*/
 
      // Root view controller for "Identify Bird"
      IdentifyBirdRootViewController *vc;
      vc = [[IdentifyBirdRootViewController alloc] initWithStyle:UITableViewStylePlain];
      localNavController = [[UINavigationController alloc] initWithRootViewController:vc];
      localNavController.tabBarItem.image = [UIImage imageNamed:@"123.png"];
      [vc release];   // This is now managed by the navigation controller
 
      // Add navigation controller to the local vc array (1 of 2)
      [localViewControllersArray addObject:localNavController];
      [localNavController release]; // Retained by above array
 
      // Root view controller for "Lookup Bird"
      vc = [[LookupBirdRootViewController alloc] initWithStyle:UITableViewStyleGrouped];
      localNavController = [[UINavigationController alloc] initWithRootViewController:vc];
      localNavController.tabBarItem.image = [UIImage imageNamed:@"ABC.png"];
      [vc release];   // This is now managed by the navigation controller 
 
      // Add navigation controller to the local vc array (2 of 2)
      [localViewControllersArray addObject:localNavController];
      [localNavController release]; // Retained by above array
 
      // Point the tab bar controllers view controller array to the array
      // of view controllers we just populated
      tabBarController.viewControllers = localViewControllersArray;
      [localViewControllersArray release]; // Retained thru above setter
 
 
      // Add subview to portrait window to reference the tabbarcontroller
      [portraitWindow addSubview:tabBarController.view];
 
      // Show it
      [portraitWindow makeKeyAndVisible];
    }
 
    /*************************************************************************/
    - (void) applicationDidFinishLaunching:(UIApplication *)application
    {
      // Configure the user interface (tabbar, nav controllers, etc)
      [self configureUI]; 
    }
 
    /*************************************************************************/
    - (void) dealloc
    {
      [tabBarController release];
      [portraitWindow release];
      [navigationController release];
      [super dealloc];
    }
 
    @end
  1. You don’t by any chance know how i might go about creating a tab bar that goes vertically instead of horizontally do you? it’s just that i want to fit a lot more than 3 or 4 icons

  2. As you may of already discovered, if you add more tabs than can be shown on the screen, a “More” tab is created by the framework.

    As far as vertical arrangement of a tabbar, this is something that you would need to code yourself. I created something similar to this by aligning a vertical row of images from the top to the bottom of the screen.

    John

  3. I’m making an app that has many nib/xib files in it. All have different backgrounds and buttons on them. The buttons trigger actions that changes the xib files shown to the user. The xib files are 320 wide by 480 high. I animate the transition and everything works perfectly.

    What I want to do (but can’t figure out yet) is have a header image (say 100 high to make things easy to explain) that always stays in the same spot even during transitions from one xib to another. Can I do something like [portraitWindow addSubview:someXibName]; jointly with an animation?

  4. I have built a navigation based application with drill down. I need to add a subview with a tabbar after touching a cell. So far, I have been unsuccessful. I can get the view to show, but can’t seem to get the tabbar to work. Can this be done? If so, is there a tutorial out there? I am a newbie to programming trying to learn as much as I can. Tutorials seem to work better for me.

    Thanks in advance,
    Dustin

  5. Jared,

    You would have created a root view controller that the xib files are loaded into, or you are using the main window. I would subclass a view controller, and load it with the xib files I want as my GUI, and at the top or bottom, add a UIToolbar to the root view controller. think of it hierarchically –
    UIWindow
    UIViewController
    UIToolbar (as subview)
    UIView (the first UI xib file)
    And so on through the views

    This way, you can add buttons, views and more to your toolbar, and your view controller holds all your views.

    Cheers,

    Joe

  6. Thank you!!! I have been fighting with this for days.

    Your tutorial was simple enough for me to get it working. Other tutorials added in core data and sqlite and custom managed objects and it was a little over my head at first. The only thing I would suggest that could make it easier would be to have a link to your source code.

    Thanks again, really saved me some frustration.

  7. thank u so much it helped me a lot………………

Comments are closed.