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:
Press Command-N again and Make another Cocoa Touch Class like the first, subclassing UIViewController
. Name it PieViewController again creating a XIB file.
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:
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.
Go to the the PieViewController.xib file. Make sure in the lower left of Interface builder it reads the default setting:
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:
Select the PizzaViewController.xib file. Set up the Xib the same way as the pie controller. Use a Light Red(#FFAAAA) for the background:
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:
You’ll notice the tabs the bottom. Tap the pizza tab.
You have working tabs.
Leave a Reply