A tabbar consists of two or more tabs along a window’s bottom. Each tab contains a view controller. As a user selects a tab, the tab loads its view controller, which in turn loads and displays its associated view. In this chapter, you explore creating tabbed applications. In the first task, you create a tabbed application using Xcode’s Tab Bar Application template. After examining this template’s results, you manually add a third tab to the tab bar. In the next task, you start with a Window-based Application template and create a two-tab application. In this task, you solidify your understanding by manually duplicating the steps taken by the Tab Bar Application template. The chapter’s final task illustrates allowing users to customize a tab bar’s tabs when it contains five or more tabs.
The tab bar is useful for presenting different application subtasks or different views of the same data. If you own an iPhone or iPod touch, you are certainly familiar with a tab bar controller, as several applications use tab bars. The Clock application, for instance, has a tab bar containing tabs with different subtasks (Figure 8-1). Each tab is a different subtask: World Clock, Alarm, Stopwatch, and Timer. The iPod application illustrates a tab bar containing different views of the same data (Figure 8- 2). The Artists tab organizes your multimedia by artist; the Album tab organizes your media by album. Each tab is a different view of the same data, your iTunes multimedia. The iPod application illustrates another tab bar feature. When a tab bar has more than four tabs, it displays a More tab. Upon pressing More, the tab bar presents the remaining tabs in a selectable list (Figure 8-3). You can also modify the iPod application’s tab bar using the Edit button. Clicking the Edit button displays the tabs in a view that allows you to modify which tabs are displayed in the tab bar (see Figure 8-3). When presented with an application that contains a task with multiple subtasks or an application that requires different views of the same data, use a tab bar. Figure 8-1 The Clock application has a tab for each subtask. Figure 8-2 The iPod application has a tab for each data view. Figure 8-3 The iPod application uses a More tab to display tabs. NOTE Do not use a tab bar for sequential navigation or data drill-down. The navigation control and tables are more appropriate choices for navigating sequential lists and data drill-down.You create a tab bar using the UITabBar class. A UITabBar displays two or more tabs along a window’s bottom edge. Individual tabs are UITabBarItem class instances. You tie these classes together using the UITabBarController and UITabBarControllerDelegate. Each UITabBarItem contains its own view controller. Click a tab, and the UITabBarItem loads its view controller. The view controller displays its view. NOTE A tab’s view controller might be an advanced view, like a table or a navigation controller. Chapter 9 illustrates placing a navigation controller in a tab. Chapter 10 illustrates placing a navigation controller in a tab and then a table in the navigation controller.A UITabBar has an associated UITabBarController and UITabBarDelegate. The UITabBarController manages the UIViewController objects in each tab. For instance, if a user wishes to add, remove, or rearrange tab bar items, the UITabBarController is responsible for implementing the behavior. You will see how to accomplish a rearrangeable tab bar later in this chapter. But first, consider the easiest tab bar implementation: the Tab Bar Application template.
The Tab Bar Application template is the easiest route to creating a tabbed application, and unlike last chapter’s Single View Application template, this template is a more useful starting point for real-world projects. In this task, you create a simple tab bar application using the Tab Bar Application template. After examining the template’s results, you manually add a third tab to the tab bar.
Figure 8-4 The second tab bar item’s view controller is from another nib. Listing 8-1 The TabBarExOneAppDelegate adopts the UITabBarControllerDelegate protocol. #import <UIKit/UIKit.h> @interface TabBarExOneAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> { UIWindow *window; UITabBarController *tabBarController; } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; @end
The Tab Bar Application template generates a two-tabbed application. You will most certainly find situations where you need more tabs. Adding another tab to a tab bar is not difficult. In the next task, you add a third tab to the application.
Figure 8-5 Changing a tab bar item’s image to Search Figure 8-6 Running the three-tab application in iPhone Simulator Creating a Tab Bar Application from Scratch Using a template is well and good, but doesn’t teach you how to actually build a tabbed application (unless you are using the template). So in this task, you duplicate the Tab Bar Application template’s steps, but start with a Window-based Application template and manually add the tab bar items to your project. It is no more difficult than using the template— just slightly more tedious.
Figure 8-7 The first and second tab identifiers Listing 8-2 TabBarExTwoAppDelegate.h modified to use a UITabBarController #import <UIKit/UIKit.h> @interface TabBarExTwoAppDelegate : NSObject <UIApplicationDelegate, UITabBarControllerDelegate> { UIWindow *window; UITabBarController *tabBarController; } @property (nonatomic, retain) IBOutlet UIWindow *window; @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; @end Listing 8-3 TabBarExTwoAppDelegate.m modified to use a UITabBarController #import "TabBarExTwoAppDelegate.h" @implementation TabBarExTwoAppDelegate @synthesize window; @synthesize tabBarController;
[window makeKeyAndVisible]; }
[tabBarController release]; [super dealloc]; } @end 14.Click Build And Go, and a two-tab application runs in the iPhone Simulator (Figure 8-8). Figure 8-8 Two-tabbed application running in iPhone Simulator
Sometimes you might wish to add more than four tabs to your application. However, the iPhone tab bar can only display four tabs and a More tab. When a user presses More, the excess tabs appear in a selectable list. By default, a navigation bar with an Edit button is displayed across the window’s top. A user can then tap Edit and modify which tabs he or she wishes to see displayed on the tab bar.The default behavior is to allow all tab bar items to be editable. If you wish to modify this default and limit which tabs are editable, you must modify the toolbar. In this task, you add more than four tabs to the first task’s tab bar. You then make the tab bar non-editable, followed by making only some tabs editable.
Figure 8-9 Adding three view controllers to the project 5.Change each view controller’s class to Also change each view controller’s NIB name to FourthViewController. NOTE You would never use the same view controller for three different tabs in a real project.
Figure 8-10 Application displaying four Figure 8-11 Clicking the More tab tabs and a More button. displays the remaining two tabs in a list. Figure 8-12 Clicking the Edit button displays Figure 8-13 Replacing a couple tabs with a view for configuring the tab bar’s tabs. Two and Three.
Figure 8-14 Only First and Second are editable. Listing 8-4 Setting the customizableViewControllers - (void)applicationDidFinishLaunching:(UIApplication *)application { NSMutableArray * conts = [[[NSMutableArray alloc] init] autorelease]; [conts addObject:[tabBarController.viewControllers objectAtIndex:0]]; [conts addObject:[tabBarController.viewControllers objectAtIndex:1]]; tabBarController.customizableViewControllers = conts; [window addSubview:tabBarController.view]; } A tab bar’s default behavior is to allow users to rearrange, delete, and add tabs when a tab bar contains more than four tabs. To disable editing all tabs, set the tab bar controller’s customizableViewControllers to nil. To disable only some tags, add the tabs that should be editable to the customizableViewControllers. Tabs not added to customizableViewControllers are automatically made non-editable.
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
1/15
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox