View controllers become more interesting when the user has a way to switch between them. Throughout this book, you will learn a number of ways to present view controllers. In this chapter, you will create a UITabBarController that will allow the user to swap between the ConversionViewController and the UIViewController displaying the map.
UITabBarController keeps an array of view controllers. It also maintains a tab bar at the bottom of the screen with a tab for each view controller in its array. Tapping on a tab results in the presentation of the view of the view controller associated with that tab.
Open Main.storyboard and select the View Controller. From the Editor menu, choose Embed In → Tab Bar Controller. This will add the View Controller to the view controllers array of the Tab Bar Controller. You can see this represented by the Relationship arrow pointing from the Tab Bar Controller to the View Controller (Figure 5.8). Additionally, Interface Builder knows to make the Tab Bar Controller the initial view controller for the storyboard.
A tab bar controller is not very useful with just one view controller. Add the Conversion View Controller to the Tab Bar Controller’s view controllers array.
Control-drag from the Tab Bar Controller to the Conversion View Controller. From the Relationship Segue section, choose view controllers (Figure 5.9).
Build and run the application. Tap on the two tabs at the bottom to switch between the two view controllers. At the moment, the tabs just say Item, which is not very helpful. In the next section, you will update the tab bar items to make the tabs more descriptive and obvious.
UITabBarController is itself a subclass of UIViewController. A UITabBarController’s view is a UIView with two subviews: the tab bar and the view of the selected view controller (Figure 5.10).
Each tab on the tab bar can display a title and an image, and each view controller maintains a tabBarItem property for this purpose. When a view controller is contained by a UITabBarController, its tab bar item appears in the tab bar. Figure 5.11 shows an example of this relationship in iPhone’s Phone application.
First, you need to add a few files to your project that will be the images for the tab bar items. In the project navigator, open the Asset Catalog by opening Assets.xcassets.
An asset is a set of files from which a single file will be selected at runtime based on the user’s device configuration (more on that at the end of this chapter). You are going to add a ConvertIcon asset and a MapIcon asset, each with images at three different resolutions.
In the 0 - Resources directory of the file that you downloaded earlier (www.bignerdranch.com/solutions/iOSProgramming6ed.zip), find ConvertIcon.png, [email protected], [email protected], MapIcon.png, [email protected], and [email protected]. Drag these files into the images set list on the left side of the Asset Catalog (Figure 5.12).
The tab bar item properties can be set either programmatically or in a storyboard. Because your data is static, the storyboard will be the best place to set the tab bar item properties.
In Main.storyboard, locate the View Controller (it is now labeled Item). Notice that a tab bar with the tab bar item in it was added to the interface because the view controller will be presented within a tab bar controller. This is very useful when laying out your interface.
Select this tab bar item and open its attributes inspector. Under the Bar Item section, change the Title to “Map” and choose MapIcon from the Image menu. You can also change the text of the tab bar item by double-clicking on the text on the canvas. The tab bar will be updated to reflect these values (Figure 5.13).
Now find the Conversion View Controller and select its tab bar item. Set the Title to be “Convert” and the Image to be ConvertIcon.
Let’s also change the first tab to be the Convert View Controller. The order of the tabs is determined by the order of the view controllers within the tab bar controller’s viewControllers array. You can change the order in a storyboard by dragging the tabs at the bottom of the Tab Bar Controller.
Find the Tab Bar Controller on the canvas. Drag the Convert tab to be in the first position.
Build and run the application. Not only are the tab bar items at the bottom more descriptive, but the ConvertViewController is now the first view controller that is displayed (Figure 5.14).
