Tab Bar Quickstart - nhan/ios_guides GitHub Wiki

Overview

Tab bars controllers provide a simple interface for a users to switch between a set of view controllers. This quickstart covers the basic procedure for setting up a tab bar controller and setting up the view controllers for each tab.

Storyboard setup

Step 1: Add tab bar controller as initial view controller

In Interface Builder drag a Tab Bar Controller from the Object Library into your storyboard. It will come preconfigured with two tabs corresponding to two view controllers. Many times you will want your tab bar controller to be the initial view controller. You can set this by selecting the tab bar controller and ticking Is Initial View Controller.

Step 2: Add a view controller for each tab

The tab bar controller is configured with two tabs by default. You can delete a tab by selecting the corresponding view controller and deleting it the storyboard. To add a tab, first drag a new View Controller object to the storybard. Next control-drag from the tab bar controller to new view controller and select view controllers under Relationship Segue. Your tab bar controller will update with a new tab.

Step 3: Customize the bar item for each tab

You can customize appearance and title of each button on the tab bar by selecting the tab bar item inside the corresponding view controller. In particular, you'll likely want to add an image for each tab bar item.

Step 4: Create view controller classes for tabs

You'll need to create classes to contain the code for the view controllers corresponding to each tab. Select File -> New -> iOS -> Source -> Cocoa Touch Class and create a new subclass of UIViewController for each kind of tab you will have.

Step 5: Set custom class for and finish design of tabs

For each tab in your storyboard select the corresponding view controller and set its custom class to one of the classes you just created. You can now add other components to this tab and connect outlets to your view controller class as you would with any other view controller.

Programmatic setup

Step 1: Create tab bar controller and as initial view controller

You can instantiate a tab bar controller programmatically and use it as you would any othe view controller. If you need it to be your root view controller the best place to do this is in the app delegate.

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        let tabBarController = UITabBarController()
        window = UIWindow(frame: UIScreen.mainScreen().bounds)
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()

        ...

        return true
    }
    ...
}

Step 2: Create a view controller for each tab

You initialize your other view controllers as you would normally.

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        ...
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        vc1.view.backgroundColor = UIColor.orangeColor()
        vc2.view.backgroundColor = UIColor.purpleColor()
        ...
    }
    ...
}

Step 3: Customize the bar item for each view controller

You customise the appearance of the tab bar item for each tab by manipulating the tabBarItem property on the corresponding view controller.

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        ...
        vc1.tabBarItem.title = "Orange"
        vc1.tabBarItem.image = UIImage(named: "heart")
        vc2.tabBarItem.title = "Purple"
        vc2.tabBarItem.image = UIImage(named: "star")
        ...
    }
    ...
}

Step 4: Place view controllers inside the tab bar controller

Finally you can set your view controllers as tabs inside the tab bar controller. Do this by setting the viewControllers array on the the tab bar controller. Putting everything together we have

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        let tabBarController = UITabBarController()
        window = UIWindow(frame: UIScreen.mainScreen().bounds)
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()
        let vc1 = UIViewController()
        let vc2 = UIViewController()
        vc1.view.backgroundColor = UIColor.orangeColor()
        vc2.view.backgroundColor = UIColor.purpleColor()

        vc1.tabBarItem.title = "Orange"
        vc1.tabBarItem.image = UIImage(named: "heart")
        vc2.tabBarItem.title = "Purple"
        vc2.tabBarItem.image = UIImage(named: "star")

        tabBarController.viewControllers = [vc1, vc2]

        return true
    }
    ...
}

Further reading