ios multiple storyboards example

1. Create storyboards by File -> New -> File -> Select Storyboard -> Next -> Give it a name -> Create. In this demo, we will create 3 storyboards, Shopping, Checkout and Profile. Including the Main which was given when the project is created, we will have 4 storyboards in total. We will navigate from the Main storyboard to the other 3 storyboards and be able to press a back button to go back to the Main storyboard.

2. Add a View Controller fore each storyboard by dragging from the object library in the Utilities panel on the right, and add some views such as a label or a button from the object library to the View Controller.

3. Add three buttons to the View Controller on the Main storyboard, and label them Shopping, Checkout and Profile. Then create action outlets for each of these buttons in the ViewController.swift class. This ViewController class was also given when the project is created, rename(Command + click) it to MainViewController.swift.

4. Create ViewController classes by File -> New -> File -> Select Cocoa Touch File -> Next -> Give it a name -> Select UIViewController in the subclass of -> Create. We will create ShoppingViewController.swift, CheckoutViewController.swift and ProfileViewController.swift.

5. Go to each View Controller on each storyboard, select the View Controller and update the class and storyboard ID in the identity inspector. Use the class name for both the class name and storyboard ID. For example, for the Shopping View Controller, assign ShoppingViewController for it’s class and storyboard ID in the identity inspector. Do the same for CheckoutViewController and ProfileViewController.

6. Create a swift class, AppStoryboards.swift with the following. This is a utility class for finding the initial view controller on another storyboard. All the storyboards are defined here as an enum value, the enum value has to match exactly with the storyboard file name.

import UIKit

enum AppStoryboards : String {
    // These enum name has to match with the storyboard file name
    case Main, Shopping, Checkout, Profile
    
    var instance : UIStoryboard {
        return UIStoryboard(name: self.rawValue, bundle: Bundle.main)
    }
    
    // Sample usage:
    // let shoppingController = AppStoryboards.Shopping.viewController(viewControllerClass: ShoppingViewController.self)
    func viewController(viewControllerClass: T.Type) -> T {
        let storyboardID = (viewControllerClass as UIViewController.Type).storyboardID
        return instance.instantiateViewController(withIdentifier: storyboardID) as! T
    }
}

extension UIViewController {
    // The Storyboard ID for the initial View Controller has to be defined with the same name as the view controller name
    class var storyboardID : String {
        return "\(self)"
    }
}

7. The MainViewController will look like this. Three functions corresponding to each of the buttons on the main view controller. Tapping on the button will navigate to a storyboard. The code in each of the function are essentially the same, which is to find the storyboard, and then find the initial view controller for that storyboard and then push to the found view controller on to the main view controller using the navigation controller. We are using navigation controller because we want to be able to go back to the main view controller by tapping on a back button on the top left corner.

import UIKit

class MainViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBAction func shoppingTapped(_ sender: UIButton) {
        let shoppingController = AppStoryboards.Shopping.viewController(viewControllerClass: ShoppingViewController.self)
        self.navigationController?.pushViewController(shoppingController, animated: true)
    }
    
    @IBAction func checkoutTapped(_ sender: UIButton) {
        let checkoutController = AppStoryboards.Checkout.viewController(viewControllerClass: CheckoutViewController.self)
        // Using the navigationController will put a back button on the new view controller
        self.navigationController?.pushViewController(checkoutController, animated: true)
    }
    
    // this is commented out, but it's implemented using segue in the storyboary by linking to a storyboard reference
//    @IBAction func profileTapped(_ sender: UIButton) {
//        let profileController = AppStoryboards.Profile.viewController(viewControllerClass: ProfileViewController.self)
//        self.navigationController?.pushViewController(profileController, animated: true)
//    }

}

8. Instead of using the code to go to a new storyboard, we can also achieve this by using a storyboard reference. On the main storyboard, drag and drop a Storyboard Reference from the object library into the storyboard, then Ctrl + click a button on the main controller -> drag it to the Storyboard Reference -> Select Show. Now we just created a segue between two storyboards.

Complete example in Github

References:
https://medium.com/@gurdeep060289/
https://medium.com/@stasost/xcode-a-better-way-to-deal-with-storyboards-8b6a8b504c06clean-code-for-multiple-storyboards-c64eb679dbf6
https://stackoverflow.com/questions/36505165/how-to-go-back-to-previous-view-controller-of-different-storyboard
https://www.newventuresoftware.com/blog/organizing-xcode-projects-using-multiple-storyboards

Search within Codexpedia

Custom Search

Search the entire web

Custom Search