iPhone Developer Tips Visitor Stats:
122,631 Pageviews and 90,229 visitors in the past 30 days.


Creating a Tabbar

Posted on October 14, 2008 by John Muchow in User Interface


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

Comments

5 Responses to “Creating a Tabbar”

Leave Comment

(required)

(required)