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
}
...
}