Make App Pie

Training for Developers and Artists

How to Make a Tab Bar Controller in Swift 3.0 Code

While Navigation controllers often have the limelight when it comes to Xcode’s view  controllers, tab bar controllers are better for independent tasks in the same app, or for different ways of working with the same model. In this lesson we’ll take a look at  how to make them in Swift programmatically. If you are interested in tab bar controllers on the storyboard, You might want to read this post. For passing data between tabs read here.

Setting Up

While there are very easy storyboard ways of making tab bar controllers, we can do much of this programmatically. Start with a single view template and create a Swift project called TabProgDemo.  Once the project loads, on the keyboard hit Command-N. Create a  Cocoa Touch Class named PizzaViewController, subclassing of UIViewController.Make the language Swift, and check the mark to make a Xib file for an iPhone like this:

2016-07-12_10-38-48

Press Command-N again and Make another Cocoa Touch Class like the first, subclassing UIViewController. Name it PieViewController again  creating a XIB file.

2016-07-13_06-44-57

I have created a file of image assets for this lesson. You can get them here as a zip file  or you can right click and save  the images below:

Pie Iconpizza icon

pizza_bar_icon@2xpizza_bar_iconpie_bar_icon@2xpie_bar_icon

Save these images on your drive. Open up your Assets.xcassets folder in Xcode. Select all the files in finder and drag them into the assets folder.

2016-07-13_06-15-30

Go to the the PieViewController.xib file. Make sure in the lower left of Interface builder it reads  the default setting:

view as 6s

 If, not set it to iPhone 6s by clicking it and selecting the device.  Set the background color to Light Green(#AAFFAA). Drag out a label and title it Pie at 32 points. Add the color Pie Icon. Your XIB should look like this:

2016-07-13_06-46-52

Select the PizzaViewController.xib file. Set up the Xib the same way as the pie controller. Use a Light Red(#FFAAAA) for the background:

2016-07-13_06-30-30

Tab Bar Programmatically

Click open the AppDelegate.swift file. While much of this can be important stuff, we’ll clear it out so we can concentrate on tab bar controllers. Replace the class with the following:

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    func application(application: UIApplication,
                      didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        return true
    }
}

Let’s put this code together part by part. First add this under the function declaration:

let tabBarController = UITabBarController()

Creates an instance of a UITabBarController. This will be the controller we’ll configure in this function. We are doing this here so it is global to the application, one of the few times you want to do something globally.

Create the two view controllers from the XIB files. In full accordance with the adage “Life is uncertain, eat dessert first”, we’ll make the first page on launch be the pie page.

let tabViewController1 = PieViewController(
    nibName: "PieViewController",
    bundle: nil)
let tabViewController2 = PizzaViewController(
    nibName:"PizzaViewController",
    bundle: nil)

Add these three lines:

let controllers = [tabViewController1,tabViewController2]
tabBarController.viewControllers = controllers
window?.rootViewController = tabBarController

UITabBarController has a property called viewControllers, which is an array of the view controllers in the order displayed in the tab bar. Our first line of this segment makes an array of view controllers in the order we want them to present. Next we assign the array to the tab bar controller. The last line assigns the controller as the root view controller.

We have our controller set up, but no titles or icons. This code assigns the title and image.

tabViewController1.tabBarItem = UITabBarItem(
    title: "Pie",
    image: UIImage(named: "pie_bar_icon"),
    tag: 1)
 tabViewController2.tabBarItem = UITabBarItem(
    title: "Pizza",
    image:UIImage(named: "pizza_bar_icon") ,
    tag:2)

Each view controller has a property tabBarItem which contains the icon and text for the tab bar. We use the UITabBarItem(title:String,image:UIImage,tag:Int) initializer to create the tab bar items. In our example,  we set the first one to Pie and use the pie_bar_icon image  for the first. The second uses Pizza and the pizza_bar_icon  image.

Set your simulator to the iPhone 6s. Build and run. You get the Pie first:

 2016-07-14_05-35-42

You’ll notice the tabs the bottom. Tap the pizza tab.

2016-07-14_05-36-10

 

You have working tabs.

3 responses to “How to Make a Tab Bar Controller in Swift 3.0 Code”

  1. Hey, it is slighty confusing when creating the first ViewController you say “hit the checkbox for creating xib file like this” and your image shows it is checked IN and the then for the next ViewController you say: “again, DO NOT check the create xib file checkbox” but then again your image shows it IS checked IN. What do you mean :’D?!

    1. There was a typo. the correct sentence is Name it PieViewController again creating a XIB file. It has been corrected.

  2. Thanks for a great tutorial. However, I can’t seem to get it to work for me. I get a white screen as the app loads. Could you publish the project files for reference?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: