Blog

  • Container View Controller in swift 4

    Posted by Kishan Gupta | Last Updated: 07-Jan-19

    Introduction

     

    Container View Controller are sub-class of UIViewController which are used to manage one and more other view controllers.

     

    According to Apple's official document site, Container View define as :-

    The container view acts as the superview of all other views (including those of the presenting and presented view controllers) during the animation sequence. UIKit sets this view for you and automatically adds the view of the presenting view controller to it. The animator object is responsible for adding the view of the presented view controller, and the animator object or presentation controller must use this view as the container for all other views involved in the transition.

     

    Prerequisites

    1. Hardware

    ->IPhone 5s and above.

    2. Software

    -> iOS 8 and above

     

    Steps to set up container View:-

     

    Step 1. Create a view controller and named it MasterViewController.swift

    Step 2. MasterViewController is ParentViewController, now create two more view controller which act as child view controller for ContainerView.

    Step 3. We are using segmented control for switching between child view controller. Drag and drop segmented control to navigation bar from the Object Library of master view controller and create IBOutet in master view controller.

     

     

    Step 4. Now, open storyboard and drag two new UIViewController from object library for child view controller. Name them whatever you want, i have named them SummaryViewController and SessionsViewController.

     

     

    Step 5. Now add the following code in MasterViewController.swift for setting up MaterviewController

     

    import UIKit
    
    class MasterViewController: UIViewController {
        
        @IBOutlet var segmentedControl: UISegmentedControl!
        
        override func viewDidLoad() {
            super.viewDidLoad()
            setupView()
        }
        
    }
    
    private func setupView() {
        setupSegmentedControl()
    }
    
    private func setupSegmentedControl() {
        // Configure Segmented Control
        segmentedControl.removeAllSegments()
        segmentedControl.insertSegment(withTitle: "Summary", at: 0, animated: false)
        segmentedControl.insertSegment(withTitle: "Sessions", at: 1, animated: false)
        segmentedControl.addTarget(self, action: #selector(selectionDidChange(_:)), for: .valueChanged)
        
        // Select First Segment
        segmentedControl.selectedSegmentIndex = 0
    }
    func selectionDidChange(_ sender: UISegmentedControl) {
        updateView()
    }
    private lazy var summaryViewController: SummaryViewController = {
        // Load Storyboard
        let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
        
        // Instantiate View Controller
        var viewController = storyboard.instantiateViewController(withIdentifier: "SummaryViewController") as! SummaryViewController
        
        // Add View Controller as Child View Controller
        self.add(asChildViewController: viewController)
        
        return viewController
    }()
    
    private lazy var sessionsViewController: SessionsViewController = {
        // Load Storyboard
        let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
        
        // Instantiate View Controller
        var viewController = storyboard.instantiateViewController(withIdentifier: "SessionsViewController") as! SessionsViewController
        
        // Add View Controller as Child View Controller
        self.add(asChildViewController: viewController)
        
        return viewController
    }()
    private func add(asChildViewController viewController: UIViewController) {
        // Add Child View Controller
        addChildViewController(viewController)
        
        // Add Child View as Subview
        view.addSubview(viewController.view)
        
        // Configure Child View
        viewController.view.frame = view.bounds
        viewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        // Notify Child View Controller
        viewController.didMove(toParentViewController: self)
    }
    private func updateView() {
        if segmentedControl.selectedSegmentIndex == 0 {
            remove(asChildViewController: sessionsViewController)
            add(asChildViewController: summaryViewController)
        } else {
            remove(asChildViewController: summaryViewController)
            add(asChildViewController: sessionsViewController)
        }
    }
    func setupView() {
        setupSegmentedControl()
        
        updateView()
    }
    

     

    Step 6. Now do whatever you want to do within your child view controller.

     

     

     

    Output :-

     

     

    Conclusion:-

     

    iOS developers can use container view controllers whenever they want to implement search controllers, stacked navigation ,tab bars and many others type of UI by delegating transition between parent and child view controller.

     

    Reference:-

     

    https://developer.apple.com/documentation/uikit/uiviewcontrollercontexttransitioning/1622045-containerview.

     

     

Tags: ios , swift