Sometimes we wish to offer multiple view options in parallel rather than within a hierarchy. This can be accomplished using a tab bar controller.
Setting up the storyboard
To demonstrate, let’s start with a new project, then get rid the view in the main storyboard and its associated view controller code file. Next, we find the tab bar controller object in the library and drag it to the storyboard. By default, this gets us two parallel views named Item 1 and Item 2, for which tiny icons appear at the bottom of the tab controller view, Item 1 being on the left and Item 2 on the right. Each behaves in the same way as any other views.
However—the app will not run if compiled at this point, because the original view, which was default the initial view, has been deleted and we have not yet specified a replacement. So, we select the tab controller view, and in the attributes inspector set it as the initial view controller by ticking the check box next to Is Initial View Controller.1)This is the second item in the section labelled View Controller. The app will now compile and run; either of the two views can be selected from the tabs at the bottom of the view.
Adding view controller code files
Of course, we can’t do much with any of this without controller code. We create that in the usual way by adding Cocoa Touch Class files (say TabBarViewController), but subclassing from UITabBarController rather than UIViewController. Then we select the tab bar controller in the storyboard by clicking on the left icon in the bar above it and then, in the identity inspector, link it to class TabBarViewController (or whatever we called it). Items 1 and 2 need view controller code as well, but these are subclassed from UIViewController in the usual way.
Other customizations
One will likely want to change the labels from Item 1 and 2 to something more meaningful; this is easily done by clicking the filled square icon and label at the bottom of each view and then making the appropriate change under Bar Item in the attributes inspector.
In the same panel there is an option Image which can be set override the default filled square with either a predefined icon (e.g., 🖨) or else an imported custom image;2)In this instance, once the image has been imported and set for 1 x, 2 x, and 3 x, one must also set Render As to Original Image in the attributes inspector. The required sizes for these can be found here. this will be displayed when the view is available but not activated. In the panel above (Tab Bar Item), Selected Image offers similar functionality, but in this case, as the name implies, controls what is displayed with the view in question is active. The image and selected image can be identical or different, as desired.
Adding additional tab views
Further tab views can be added by adding view controllers to the storyboard and connecting them with control code in the usual way. New views are associated with the tab view controller by clicking and dragging from the tab view controller to the new view; this opens up a segue menu, but in contrast to the hierarchical set up where we chose Show, we must here choose View Controllers in the section labelled Relationship Segue.
A few notes
Rearranging the order of tab views
In the event that one should wish to change the order of tabs at some point, it’s very simple: simply drag the icons within the tab bar in the tab bar controller within the storyboard.
Number of icons in the tab bar
iOS design constraints ensure that the tab bar cannot become overcrowded with icons.
The number of icons which can be displayed in the tab bar is a function of the size of the device in light of Apple’s design criteria. In the event that there are more views than can comfortably be displayed in the bar, the rightmost icon changes to an ellipsis (…) labelled More; clicking it will then reveal a table menu of the remaining tab choices.
In general, one should try to avoid this situation if at all possible.