Using a Tab Bar Controller
In our second mini-project of the article, we create an application with a tab bar controller that manages three individual scenes. Like the last project, each scene has a button to increment a counter, but these counters are unique for each scene (and visible in each scene's view). We even set the tab bar item's badge to that scene's counter. Again, we demonstrate the use of this custom controller and how scenes can share information through the controller class.
Implementation Overview
We start with a cleaned-out Single View Application template. In this application, we add a tab bar controller and two custom classes: one a subclass of a tab bar controller to manage the application's properties, and the other a subclass of a view controller to manage the display of the other three views.
Each scene will again have a single button that calls a method to increment that scene's counter. Because the project calls for a unique counter for each scene, each button invokes a slightly different action method. This enables us to share all the code that is in common between the views (updating the badge and the count label) but have a slightly different increment action to target the right counter for that scene.
That's it; no segues needed this time around.
Setting Up the Project
Make a new single-view project called LetsTab. Clean out the project by removing the ViewController class files and the initial scene, just as you did in the previous tutorial. Your starting point should be a project with no view controller and an empty storyboard file.
Adding the Tab Bar Item Images
Each scene that is managed by the tab bar controller needs an icon to represent it in the tab bar UI element. The Images folder inside this article project folder contains three png files (1.png, 2.png, 3.png) that can be used for this example. Drag the folder into your main project code group now. Choose to create a new group, and copy the image resources when prompted.
Adding the Tab Bar Controller and Generic View Controller Classes
This project requires two custom classes. The first is a subclass of the UITabBar Controller that will hold three properties-counters for each of the scenes in the project. This custom controller class will be named CountingTabBarController.
The second, a subclass of UIViewController, will be named GenericViewController and include an action to increment a scene-specific count of each button press that occurs.
Click the + button at the bottom-left corner of the Project Navigator. Choose the iOS Cocoa Touch category and the UIViewController subclass; then click Next. Name the new class CountingTarBarController and set it to be a subclass of UITabBarController and click Next. Be sure to create the class files inside your main project code group, or drag the files there later.
Repeat these steps, creating a new UIViewController subclass named GenericViewController.
Adding the Tab Bar Controller
Open the project's storyboard, and drag a tab bar controller into an empty area of the Interface Builder Editor (or into the Document Outline area). Your project will now show a tab bar controller scene with two scenes.
Associate the tab bar controller with the custom CountingTabBarController by selecting the Tab Bar Controller line in the Document Outline, and then open the Identity Inspector (Option+Command+3). From the class drop-down menu, choose CountingTabBarController.
Adding Additional Scenes and Associating the View Controller The tab bar controller, by default, includes two scenes in your project. Why two? Because a tab bar controller only makes sense with more than one scene, so Apple chose to include two to start. This project, however, calls for three scenes to be managed by the tab bar controller, so drag an additional instance of the view controller object from the Object Library into the editor or the Document Outline.
After adding the additional scene, use the Identity Inspector to set each scene's custom class to be the GenericViewController, and establish a label for easy identification.
Select the Item 1 scene that corresponds to the first tab in the tab bar. Using the Identity Inspector (Option+Command+3) set the Class drop-down menu to GenericViewController and the Label field to First. Move to the second scene and repeat, but set the label to Second. Finally, select the view controller line in the new scene you created. Set its class to GenericViewController and the label to Third.
Planning the Variables and Connections
In this project, we need to track three different counts. The CountingTabBarController will have properties for each scene's counter: firstCount, secondCount, and thirdCount.
The GenericViewController class will have two properties. The first, outputLabel, references a UILabel that contains the current values of the counters for all three scenes. The second property, barItem, connects to each scene's tab bar item so that we can update its badge value.
Because there are three separate counters, the GenericViewController class requires three action methods: incrementCountFirst, incrementCountSecond, and incrementCountThird. A button in each scene will invoke the method specific to that scene. Two additional instance methods (updateCounts and updateBadge) will also be added so that we can easily update the current count and badge value without having to rewrite the same code in each increment method.
Creating the Tab Bar Relationships
As with the navigation controller, it makes sense to connect the tab bar scenes to the tab bar controller before spending much time on the user interface. The act of making the connection will actually add the tab bar item object to each scene, which is something we need if we want to manipulate the item's badge value.
Control-drag from the Counting Tab Bar Controller line in the Document Outline to the additional scene you added (labeled Third). When prompted for the segue type, choose Relationship - viewControllers. A new segue line (Relationship from UITabBarController to Third) will be added to the counting tab bar controller scene. In addition, the tab bar will become visible in the third scene, and a tab bar item will appear in the third scene's view.
Because all the other scenes are already connected to the tab bar controller, we're done making the segue connections. Now we can move on to creating the interface.
Designing the Interface
Visually, each scene in this project is identical, with the exception of the tab bar item and a label showing the scene's name.
Begin by adding a label (reading Scene One) to the first scene near the top of the view. Add a second label, to be used for output, to the center of the view. The output will span multiple lines, so use the Attributes Inspector (Option+Command+4) to set the number of lines for the label to 5. You can also center the text and adjust its size as desired.
Next add a button labeled Count to the bottom center of the view. This will increment the counter for the view.
Now, click the tab bar item at the bottom of the view, and open the Attributes Inspector. Use the Bar Item settings to set the title to Scene One and the image to 1.png. Repeat these design steps for the other two scenes. The second scene should be labeled Scene Two and use the 2.png image file, and the third Scene Three with 3.png.
Creating and Connecting the Outlets and Actions
There are two outlets and three actions that need to be defined in this project. The outlets will be connected identically in each scene, but the actions will be unique for each. Let's review these connections now, starting with the outputs:
- outputLabel (UILabel): Used for displaying the results of each scene's counter, this label must be connected in each scene.
- barItem (UITabBarItem): References the tab bar item that was automatically added to each view by the tab bar controller. This connection must be made in each scene.
And the actions:
- incrementCountFirst: Connected to the Count button in the first scene, this action method updates the first scene's counter.
- incrementCountSecond: Connected to the Count button in the second scene, this action method updates the second scene's counter.
- incrementCountThird: Connected to the Count button in the third scene, this action method updates the third scene's counter.
Make sure the first scene is visible in Interface Builder (or just use the Document Outline), and then switch to the Assistant Editor mode.