26 Dec 2017

Create UITabBarController Programmatically in swift (swift 4 + xcode 9.1)

 Tutorial how to create UITabBarController Programatically in swift

Introduction UITabBarController

UITabBarController is the  controller that has tabs or tabbar at the bottom of the screen and menu items displayed with either text, images with text or only images, these menu items are known as UITabarItems in technical language. You can take the example of shopping apps or workouts app which contains the bottom tab, those app uses UITabBarController for the layout of their app. In this tutorial, we will learn how to create UITabBarController programmatically in swift language (swift 4). Follow below steps to create UITabBarController Programmatically in swift.

Steps to create UITabBarController Programatically in swift

Step 1: Create a new project using "SingleView App" template. We are not going to use "Tabbed App" template for our tutorial. We will name our project as "UITabBarController-Tutorial". Move to step 2 after creating your project.

Create UITabBarController Programatically in swift (swift 4 + xcode 9.1)

Step 2: Open "ViewController.swift" file. We will create function that will create TabBarController for us. We will named it "createTabBarController". Inside our function we will create an instance of UITabBarController and add it to our view.

Step 3: Call the function created in step 2, inside our viewDidLoad function.

Step 4: At this moment if you run your code, then you will see something like this

UITabBarController- programattically tutorial in swift

It's not showing any tabs, as we haven't added any viewcontrollers to it yet.

Step 5: Let us now add Tabs and ViewControllers to our UITabBarController. We will create two viewcontroller named as, "FirstVc" and "SecondVc". Below is the code of updated "createTabBarController" function.

Step 6: If you, run your code now. You will see two tabs with title "First"  and "Second". These are the titles we gave to  our two viewcontrollers.

UITabBarController- programattically tutorial in swift

Step 7: Here we are done with creating UITabBarController programmatically in swift (swift 4). But still we need to add images to our tabs. For this we can use UITabBarItem. Below is the  updated code of "createTabBarController" function. Here we set tabbaritem to our ViewControllers and also added images to them.

Step 8: Below is the app, how it looks after step 7 after running it successfully.

UItabBarController programmatically in swift - tutorial

Step 9: In order to add navigation to your view-controllers we need to add UINavigationController too. For this we will change the line where we are assigning array of ViewControllers to UITabBarController with the below code.

Step 10: Now if you run your app, you will find your tab's view background color are changed. But wait here is one issue as tabs are changing but same background color is appearing. For this error, and to resolve it please initialize  UITabBarController as global instance for the class. You can check it here in below code for whole class

Where to go from here:

In this post we learned, how to create UITabBarController programmatically in swift (swift 4). Also we add images to our UITabBarController using UITabBarItem and used UINavigationController within each tab so that we can easily navigate to other screens within our tabs of UITabBarController.

Source code: UITabBarController-Tutorial.zip

No comments:

Post a Comment