Navigation controller and tab bar controller (Swift)

In this tutorial we cover the following topics

• General information
• Project
  1. Step 1: create a new project
  2. Step 2: add two view controllers and one navigation controller
  3. Step 3: join controllers - add tab bar
  4. Step 4: add one more view
  5. Step 5: add table view controller
  6. Step 6: run the application

We can use the view controllers that the UIKit framework provides by themselves or in conjunction with other view controllers to create even more sophisticated interfaces. When combining view controllers, however, the order of containment is important; only certain arrangements are valid. The order of containment, from child to parent, is as follows:

• Content view controllers, and container view controllers that have flexible bounds (such as the page view controller)
• Navigation view controller
• Tab bar controller
• Split view controller

More details can be found in

• Combined View Controller Interfaces
• UINavigationController And UITabBarController Programmatically (Swift 3)
• Navigation controllers (Swift)
• Table views basics (Swift)
• Tab bar (Swift)

1. Step 1: create a new project
   Create a new project
   1. Select File | New | Project...
   2. Select Single View Application on the template selection sheet.
   3. As the product name enter Swift iOS Navigation and Tab Bar
   4. Set the Language to Swift. Because we will not use tests in this tutorial, you can leave both test check boxes unchecked as well as make sure the check box labeled Use Core Data is also unchecked.
2. Step 2: add two view controllers and one navigation controller
   1. Select Main.storyboard.
   2. Find View Controller in the Object Library and drag an instance into the editing area
      
   3. Change in Attributes inspector, section View the background property to be different for every view controller (for example green for the first and yellow for the second).
      
   4. Add Navigation Controller from the Object Library
      
3. Step 3: join controllers - add tab bar
   1. Select the two custom view controllers and the navigation controller (only the navigation controller scene, not it’s root view controller) and choose Editor | Embed In | Tab Bar Controller
      
4. Step 4: add one more view
   1. Find View Controller in the Object Library and drag an instance into the editing area
      
   2. Single-click the yellow View Controller icon in the row of icons at the top of the Root View Controller Scene (or in the Document Outline), press right mouse button
      
      
      and from popup menu drag from Triggered Segues | manual circle to the view controller we have just added
      
      
      and select Show from popup menu
      
5. Step 5: add table view controller
   • In the Project Navigator, right-click the Swift iOS Navigation and Tab Bar group and select New File....
   • Choose Cocoa Touch Class from the iOS Source section in the template dialog and then press Next.
   • Name the new class TableController, make it a subclass of UITableViewController. Because we are going to add this controller to the storyboard later manually, so make sure that the Also create XIB file check box is not checked.
   • Press Next and then press Create to save the files for the new view controller
     
   • Single-click the yellow View Controller icon in the row of icons at the top of the Root View Controller Scene. Next press Alt+Command+3 to bring up the Identity Inspector. In the Custom Class section as Class select TableController.
     
   • Click on segue between Root View Controller and View Controler and bring up Attributes Inspector (we can use mouse or shortcut Alt+Command+4).
   • In Storyboard Segue section as Identifier type SegueFromTable
     
   • Select the table view in the Document Outline and bring up the Connections Inspector (use shortcut: Alt + Command + 6)
     and make sure if data source and delegate are connected with Root View Controller
     
     
     If not drag from the circle next to dataSource and delegate in Outlets section to the View Controller icon in the Document Outline or above the view controller in the storyboard editor. This makes our controller class both the data source and delegate for this table.
   • Open TableController.swift file and add/modify
     
     Swift

     import UIKit class TableController: UITableViewController { var eightThousandersPeaks = [String]() override func viewDidLoad() { super.viewDidLoad() // Uncomment the following line to preserve selection between presentations // self.clearsSelectionOnViewWillAppear = false // Uncomment the following line to display an Edit button in the navigation bar for this view controller. // self.navigationItem.rightBarButtonItem = self.editButtonItem self.navigationItem.title = "Peaks" eightThousandersPeaks += ["Mount Everest", "K2", "Kangchenjunga", "Lhotse","Makalu", "Cho Oyu", "Dhaulagiri","Manaslu", "Nanga Parbat", "Annapurna I", "Gasherbrum I", "Broad Peak", "Gasherbrum II", "Shishapangma"] } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } // MARK: - Table view data source override func numberOfSections(in tableView: UITableView) -> Int { return 1; } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return eightThousandersPeaks.count; } override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { performSegue(withIdentifier: "SegueFromTable", sender: self) } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { // Trick to get static variable in Swift struct staticVariable { static var tableIdentifier = "TableIdentifier" } var cell:UITableViewCell? = tableView.dequeueReusableCell( withIdentifier: staticVariable.tableIdentifier) if cell == nil { cell = UITableViewCell(style: .default, reuseIdentifier: staticVariable.tableIdentifier) } cell?.textLabel?.text = eightThousandersPeaks[indexPath.row] return cell! } }

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

     import UIKit   class TableController: UITableViewController {     var eightThousandersPeaks = [String]()          override func viewDidLoad() {         super.viewDidLoad()           // Uncomment the following line to preserve selection between presentations         // self.clearsSelectionOnViewWillAppear = false           // Uncomment the following line to display an Edit button in the navigation bar for this view controller.         // self.navigationItem.rightBarButtonItem = self.editButtonItem                  self.navigationItem.title = "Peaks"         eightThousandersPeaks += ["Mount Everest", "K2", "Kangchenjunga",                                   "Lhotse","Makalu", "Cho Oyu",                                   "Dhaulagiri","Manaslu", "Nanga Parbat",                                   "Annapurna I", "Gasherbrum I", "Broad Peak",                                   "Gasherbrum II", "Shishapangma"]     }       override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()         // Dispose of any resources that can be recreated.     }       // MARK: - Table view data source       override func numberOfSections(in tableView: UITableView) -> Int {         return 1;     }       override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return eightThousandersPeaks.count;     }       override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {                 performSegue(withIdentifier: "SegueFromTable", sender: self)     }          override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {         // Trick to get static variable in Swift         struct staticVariable { static var tableIdentifier = "TableIdentifier" }                  var cell:UITableViewCell? = tableView.dequeueReusableCell(             withIdentifier: staticVariable.tableIdentifier)                  if cell == nil {             cell = UITableViewCell(style: .default, reuseIdentifier: staticVariable.tableIdentifier)         }                  cell?.textLabel?.text = eightThousandersPeaks[indexPath.row]         return cell!     } }

6. Step 6: run the application
   Now the application is ready to run.