Defining the Content View Controllers for a Tab Bar Interface

Because each mode of a tab bar interface is separate from all other modes, the view controller for each tab defines the content for that tab. Thus, the view controller you choose for each tab should reflect the needs of that particular mode of operation. If you need to present a relatively rich set of data, you could install a navigation controller to manage the navigation through that data. If the data being presented is simpler, you could install a content view controller with a single view.

Figure 2-4 shows several screens from the Clock app. The World Clock tab uses a navigation controller primarily so that it can present the buttons it needs to edit the list of clocks. The Stopwatch tab requires only a single screen for its entire interface and therefore uses a single view controller. The Timer tab uses a custom view controller for the main screen and presents an additional view controller modally when the When Timer Ends button is tapped.

The tab bar controller handles all of the interactions associated with presenting the content view controllers, so there is very little you have to do with regard to managing tabs or the view controllers in them. Once displayed, your content view controllers should simply focus on presenting their content.

For general information and guidance on defining custom view controllers, see Creating Custom Content View Controllers in View Controller Programming Guide for iOS.

Creating a Tab Bar Interface Using a Storyboard

If you are creating a new Xcode project, the Tabbed Application template gives you a tab bar controller in the storyboard, set as the first scene.

To create a tab bar controller in a storyboard, do the following:

1. Drag a tab bar controller from the library.

2. Interface Builder creates a tab bar controller and two view controllers, and it creates relationships between them. These relationships identify each of the newly created view controllers as the view controller for one tab of the tab bar controller.

3. Display it as the first view controller by selecting the option Is Initial View Controller in the Attributes inspector (or present the view controller in your user interface in another way.)

Creating a Tab Bar Interface Programmatically

If you prefer to create a tab bar controller programmatically, the most appropriate place to do so is in the applicationDidFinishLaunching: method of your application delegate. Because a tab bar controller usually provides the root view of your app’s window, you need to create it immediately after launch and before you show the window. The steps for creating a tab bar interface are as follows:

1. Create a new UITabBarController object.

2. Create a content view controller for each tab.

3. Add the view controllers to an array and assign that array to your tab bar controller’s viewControllers property.

4. Set the tab bar controller as the root view controller of your window (or otherwise present it in your interface).

Listing 2-1 shows the basic code needed to create and install a tab bar controller interface in the main window of your app. This example creates only two tabs, but you could create as many tabs as needed by creating more view controller objects and adding them to the controllers array. You need to replace the custom view controller names MyViewController and MyOtherViewController with classes from your own app.

Listing 2-1  Creating a tab bar controller from scratch

- (void)applicationDidFinishLaunching:(UIApplication *)application {

   tabBarController = [[UITabBarController alloc] init];

   MyViewController* vc1 = [[MyViewController alloc] init];

   MyOtherViewController* vc2 = [[MyOtherViewController alloc] init];

   NSArray* controllers = [NSArray arrayWithObjects:vc1, vc2, nil];

   tabBarController.viewControllers = controllers;

    window.rootViewController = tabBarController;

}

Creating a Tab Bar Item Programmatically

For each content view controller in your tab bar interface, you must provide a UITabBarItem object with the image and text to be displayed in the corresponding tab. You can associate tab bar items with your view controllers at any time before displaying your tab bar interface. You do this by assigning the tab bar item to the tabBarItem property of the corresponding view controller. The recommended time to create a tab bar item is during the initialization of the view controller itself, but this is typically feasible only for custom view controllers. You can also create and initialize the view controller object, create the tab bar item, and then make the association.

Listing 2-2 shows an example of how to create a tab bar item for a custom view controller. Because it is associated with a custom view controller, the view controller creates the tab bar item itself as part of its initialization process. In this example, the tab bar item includes both a custom image (which is stored in the application bundle) and a custom title string.

Listing 2-2  Creating the view controller’s tab bar item

UIImage* anImage = [UIImage imageNamed:@"MyViewControllerImage.png"];

UITabBarItem* theItem = [[UITabBarItem alloc] initWithTitle:@"Home" image:anImage tag:0];

Adding and Removing Tabs

If the number of tabs in your tab bar interface can change dynamically, you can make the appropriate changes at runtime as needed. You change the tabs at runtime in the same way you specify tabs at creation time, by assigning the appropriate set of view controllers to your tab bar controller. If you are adding or removing tabs in a way that might be seen by the user, you can animate the tab changes using the setViewControllers:animated: method.

Listing 2-3 shows a method that removes the currently selected tab in response to a tap in a specific button in the same tab. This method is implemented by the view controller for the tab. You might use something similar in your own code if you want to remove a tab that is no longer needed. For example, you could use it to remove a tab containing some user-specific data that needs to be entered only once.

Listing 2-3  Removing the current tab

- (IBAction)processUserInformation:(id)sender

{

   // Call some app-specific method to validate the user data.

   // If the custom method returns YES, remove the tab.

   if ([self userDataIsValid])

   {

      NSMutableArray* newArray = [NSMutableArray arrayWithArray:self.tabBarController.viewControllers];

      [newArray removeObject:self];

      [self.tabBarController setViewControllers:newArray animated:YES];

   }

}

Preventing the Selection of Tabs

If you need to prevent the user from selecting a tab, you can do so by providing a delegate object and implementing the tabBarController:shouldSelectViewController: method on that object. Preventing the selection of tabs should be done only on a temporary basis, such as when a tab does not have any content. For example, if your app requires the user to provide some specific information, such as a login name and password, you could disable all tabs except the one that prompts the user for the required information. Listing 2-4 shows an example of what such a method looks like. The hasValidLogin method is a custom method that you implement to validate the provided information.

Listing 2-4  Preventing the selection of tabs

- (BOOL)tabBarController:(UITabBarController *)aTabBar

         shouldSelectViewController:(UIViewController *)viewController

{

   if (![self hasValidLogin] && (viewController != [aTabBar.viewControllers objectAtIndex:0]) )

   {

      // Disable all but the first tab.

      return NO;

   }

   return YES;

}

Monitoring User-Initiated Tab Changes

There are two types of user-initiated changes that can occur on a tab bar:

• The user can select a tab.

• The user can rearrange the tabs.

Both types of changes are reported to the tab bar controller’s delegate, which is an object that conforms to the UITabBarControllerDelegate protocol. You might provide a delegate to keep track of user changes and update your app’s state information accordingly. However, you should not use these notifications to perform work that would normally be handled by the view controllers being hidden and shown. For example, you would not use your tab bar controller delegate to change the appearance of the status bar to match the style of the currently selected view. Visual changes of that nature are best handled by your content view controllers.

For more information about the methods of the UITabBarControllerDelegate protocol and how you use them, see UITabBarControllerDelegate Protocol Reference.

Preventing the Customization of Tabs

The More view controller provides built-in support for the user to modify the items displayed in the tab bar. For apps with lots of tabs, this support allows the user to pick and choose which screens are readily accessible and which require additional navigation to reach. The left side of Figure 2-5 shows the More selection screen displayed by the iPod app. When the user taps the Edit button in the upper-left corner of this screen, the More controller automatically displays the configuration screen shown on the right. From this screen, the user can replace the contents of the tab bar by dragging new items to it.

While it is a good idea to let the user rearrange tabs most of the time, there may be situations where you might not want the user to remove specific tabs from the tab bar or place specific tabs on the tab bar. In these situations, you can assign an array of view controller objects to the customizableViewControllers property. This array should contain the subset of view controllers that it is all right to rearrange. View controllers not in the array are not displayed on the configuration screen and cannot be removed from the tab bar if they are already there.

Changing a Tab’s Badge

The appearance of a tab in a tab bar interface normally does not change, except when it is selected. To call attention to a specific tab, perhaps because there is new content on that tab for the user to look at, you can use a badge.

A badge is a small red marker displayed in the corner of the tab. Inside the badge is some custom text that you provide. Typically, badges contain numerical values reflecting the number of new items available on the tab, but you can also specify very short character strings too. Figure 2-6 shows badges for tabs in the Phone app.

To assign a badge to a tab, assign a non-nil value to the badgeValue property of the corresponding tab bar item. Listing 2-5 shows an example of how a view controller that displays the number of new items in its badge might set the badge value.

Listing 2-5  Setting a tab’s badge

if (numberOfNewItems == 0)

   self.tabBarItem.badgeValue = nil;

else

   self.tabBarItem.badgeValue = [NSString stringWithFormat:@"%d", numberOfNewItems];

It is up to you to decide when to display badge values and to update the badge value at the appropriate times. However, if your view controller contains a property with such a value, you can use key-value observing (KVO) notifications to detect changes to the value and update the badge accordingly. For information about setting up and handling KVO notifications, see Key-Value Observing Programming Guide.