In this tutorial we’ll look into another type of view controller namely Tab Bar Controller. At the same time we’ll give the Storyboards a more closer look.
Overview
The UITabBar component is typically located at the bottom of the screen. It consists of an array of tabs that consists of a title and optional image. This component is useful when the user wants to go to different view screen depending on the Tab Bar item he pressed.
Storyboards gives us the power to visually describe and present the flow of the application. It shows the components of each screen and how the screens are connected to each other. A ViewController is officially known as scene. We’ll use both the terms interchangeably. The arrow pointing from the left to the scene indicates the initial scene/view controller that’s launched.
Storyboards describe the transitions from one screen to another using “segues“. Segues are analogous to intents in Android. We’ll discuss it at length in a later tutorial. For now all you need to know is that segues are used for transitions and passing the data from one scene to another.
In this tutorial we’ll unleash the power of Storyboards to develop a basic TabBarController Application.
Start with creating a new Project(Choose Objective-C or Swift. It doesn’t matter. We aren’t going to modify the code anyways.)
Go to the Main.storyboard. Click the empty view controller and delete it. Now search for tab bar controller in the bottom right panel and drag it to the storyboard. The scene consists of a tab bar controller and two content views that are linked by segues. When you drag it to the storyboard, an image like the one given below would be seen.
The Tab Bar Controller consists of two bar items at the bottom. One for each of the content views.
Build the project now. You’ll get a runtime ERROR! The log console would show this:
Failed to instantiate the default view controller for UIMainStoryboardFile ‘Main’ – perhaps the designated entry point is not set?
Note: The storyboard is missing the arrow at the beginning of the scene that was there before.
Click the tab bar controller and go to the Attributes option in the utilities panel. The “Is Initial View controller is unchecked. Check it as shown in the image below:
Build the project and notice that it’s working fine.
The Tab Bar Controller comes pre-configured with two additional view controllers, one for each tab. The relationship between the Tab Bar Controller and the views is shown by a segue. We’ll add two new ViewControllers and add them to the Tab Bar Controller as well. Following image shows how this is done.
The above image shows how a few shifting of elements in the storyboard gives it a complete new look.
We’ve added a Tab Bar Item on each tab in the bottom of the ViewControllers. We can customise the text and icons from the attributes inspector. The respective tabs get automatically updated in the Tab Bar Controller scene. Do a control+click and drag the tab bar controller to the View Controllers we’ve added.
Choose the relationship segue. This adds the View Controller to the array of tabs in the Tab Bar Controller. Let’s add Labels and change the background colour of each view controller. The storyboard should look something similar to the image given below.
The output of the application in action is given below.
This brings an end to this tutorial. We’ve just played around with the UI in Storyboards to develop a basic application with four tabs. We’ll discuss more on segues in later tutorials.