Swift World: Programmatically designing UITabBarController without using Main.Storyboard

Designing Tab Bar Controller without using Storyboard:

Well guys as you know that Tab Bar Controllers are used when you want to provide different perspective on same data provided by you to your application or in situations where you want to organize your application in to functional lines. The very important aspects of the Tab Bar Controller is the Tab Bar View present along the bottom of the screen. This view is used to initiate the different modes of your app according to which bar button you click && also convey the information about the different states of these modes. Below Image is what we are going to develop now...

The above displayed image is a tab bar controller in which there are three tabs && corresponding to each tab there is a Tab Bar Button marked as 1st Tab, 2nd Tab && 3rd Tab respectively. Click on any tab && you will be presented with new tab with different user interface. Let us create this app...

1. Well as usual create a new Xcode project with single view application & select the language as SWIFT && name it "TabBarController"

2. Again we will be doing it programmatically so go ahead && disable the story board as we did in my post "Designing User Interface without using Storyboard:". I will show you again how to do it for the sake of convenience. Open the Info.plist file by expanding the "Supporting Files" folder in the project navigator of your application && delete the entry named "Main storyboard file base name" by pressing the Delete key of your keyboard as shown in the image below:

3. Now Create three new Cocoa Touch Class file call it TabViewController1, TabViewController2, TabViewController3 & make each of them a subclass of UIViewController. Also check the XIB file check box, & follow the steps to create new files.

A. Now open the TabViewController1.swift file & add the following sort of code to it...

    convenience override init() {      

            //Calling the designated initializer of same class        

        self.init(nibName: "TabViewController1", bundle: nil)

        //initializing the view Controller form specified NIB file

}

B. Also open the TabViewController2.swift file & add the following code to it...

    convenience override init() {      

          //Calling the designated initializer of same class        

        self.init(nibName: "TabViewController2", bundle: nil)

        //initializing the view Controller form specified NIB file

}

C. Also open the TabViewController3.swift file & add the following bit of code to it...

    convenience override init() {     

          //Calling the designated initializer of same class        

        self.init(nibName: "TabViewController3", bundle: nil)

        //initializing the view Controller form specified NIB file

}

4. Open the TabViewController1.xib file && mimic the user interface as shown below in the image:

by changing background color to light green:

Do the same for other two xib/nib files TabViewController2.xib && TabViewController3.xib by changing background color to "yellow" && "green" respectively as shown in the Images.Left side is the Interface of the TabViewController2.xib file or ViewController && Right side is interface of the TabViewController3.xib file or ViewController respectively.

5. Now open the AppDelegate.Swift file in your project navigator && add the following code... outside the application: didFinishLaunchingWithOptions()

    var tabViewController1 : TabViewController1?

    var tabViewController2 : TabViewController2?

    var tabViewController3 : TabViewController3?

and inside the outside the application: didFinishLaunchingWithOptions() function add the this code shown below...

window = UIWindow(frame: UIScreen.mainScreen().bounds)

            //setting the initial screen bounds of the view

        self.tabViewController1 = TabViewController1()

        self.tabViewController2 = TabViewController2()

        self.tabViewController3 = TabViewController3()

               //creating object of TabViewController[1,2,3] class

        var tabBarController = UITabBarController()

                //creating object of UITabBarController class

        tabBarController.viewControllers = [tabViewController1! , tabViewController2! , tabViewController3!]

          //adding all three views to the TabBarView

        var item1 = UITabBarItem(title: "1st Tab", image: nil, tag: 0)

        var item2 = UITabBarItem(title: "2nd Tab", image: nil, tag: 1)

        var item3 = UITabBarItem(title: "3rd Tab", image: nil, tag: 2)

             //defining the items of the TabBar corresponding to three views

        tabViewController1?.tabBarItem = item1

        tabViewController2?.tabBarItem = item2

        tabViewController3?.tabBarItem = item3

            //setting TabBarItems corresponding to each view in TabBarController

        self.window?.rootViewController = tabBarController

            //setting the initial VieController as tabBarController

        window?.makeKeyAndVisible()

Here in above displayed code all we are doing is to creating the objects of all three view controllers && the corresponding to each view Controller in the tab bar we are adding the Items correspondingly.

5. Well guys go ahead && Build your app you will see the view very much like the view shown by the 1st Image in this tutorial. when you click on 2nd or 3rd tab bar button you will be presented with new view with change background.