In the previous tutorial we saw how its easy to develop modern iOS application and implement navigation using only the XCode Interface Builder and component UITabBarController. In this part we will develop one 5 minute example project using also only Interface Builder and component from the previous tutorial but now we will use implement UINavigationController. For using UINavigationController please check previous tutorials because is very important to understand and correctly implement:
- Using UINavigationController component into your iOS App Part One
- Using UINavigationController component into your iOS App Part Two
With implementation on both navigation controllers UITabBarController and UINavigationController in the same application we can implement much more complex navigation patterns and flows.
Starting steps for developing new iOS applications are explained in tutorial Starting new iOS project. After finishing the 2 steps from the tutorial next we are opening our main storyboard. In the storyboard we will see only the first view controller.
From the Object Library first we are dragging Tab Bar Controller.
Next step is to make set the Tab Bar Controller as initial view controller.
After previous step next we are dragging the Navigation Controller from the Object Library over the storybaord. As we see, the Navigation Controller comes with UITableViewController as root view controller.
In this step we are deleting the UITableViewController connected as root view controller to the Navigation Controller that we have previously dragged from the Object Library.
We are connecting the view controller with the Navigation Controller as root view controller.
Next we are making the first relationship segue with dragging from the Tab Bar Controller to the Navigation Controller and we are set to view controller.
Next in the connected view controller we are dragging one button. From the Object Library we are also dragging one more view controller which will be connected with the button from the previously connected view controller.
We are connecting the button with the new created view controller and we are setting the segue action to Show.
If you followed the previous steps correctly then your storyboard should look like the one bellow.
When we start the application we will see that the first tab from the Tab Bar Controller is displayed after the application is started. If we press the second tab the next view will be displayed, the one with the button, and if we press the button the Navigation Controller will automatically show the view connected to the button but Tab Bar Controller will be still visible. The new visible part on the third screen is the Navigation Bar with the Back button which when we touch it, automatically the first view controller will be displayed, the one the button.
Complete source code can be found on my GitHub ready for testing.