Every application that use more then one view controller require some navigational mechanism. In previous tutorials i have in details explained navigation using UINavigationController directly from Interface Builder or using UINavigationController initialized in AppDelegate. In this tutorial we will use UITabBarController component which is very useful and very popular for navigation. This component is also used in popular social applications for navigation between views like Facebook, Twitter and in many more.

In this 5 minute simple tutorial we will implement one example using only Interface Builder to demonstrate usability and simplicity of this component.

Lets start.

First step is to create new Singe View Application from your XCode. We can also choose Tabbed Application which will simplify our process of creating the application with automatically starting the project with UITabBarController in our Main storyboard, two View Controllers connected on each tab and also two classes which represents this View Controllers,  but for better understanding we will go manually.

 

 

Our project should look like this after first steps.

 

We are opening Main storyboard, and we can see that in our storyboard is only initial View Controller.

 

From the Object Library we are dragging Tab Bar Controller.

 

We see that UITabBarController by default comes with two view controllers connected for each tab.

 

 

We will drag connection from UITabBarController over initial View Controller and we will mak one relationship segue.

 

We are selecting relationship segue view controller.

 

Automatically new tab is created for this relation. Next we are selecting our UITabBarController to be initial view controller.

 

For better view we will customize little bit our View Controllers with changing background color and also tab icon with selecting the tab item in each View Controller and in Attributes Inspector for System Item instead of Custom we are selecting one for existing default icons. If we want to customize with our custom icon then System Item should be left as Custom but in Bar Item we are changing Title and Image.

 

If everything is correctly followed when we start the application with tapping on Tab Bar items we can see that View Controllers are changed.

 

Complete source code can be found on my GitHub ready for testing.

Print Friendly

Leave a Comment

Your email address will not be published. Required fields are marked *