Swift Programming

Container View in iOS

Aaqib Hussain
. August 11, 2015
2,978 Views
Shares

Hello everyone!
I hope everyone would be doing great.

I googled for a long time but I couldn’t find any good tutorial for Container View, I read a tutorial where two Container Views were stacked over one another to achieve the required task, which is certainly not the proper way to do it.

Anyway, I am going to do a tutorial on Container View. So, Lets get started without wasting any further time.

Create a new project and drag a Container View along with two Buttons over a View Controller.

Drag a View Controller and connect Container View Controller with an Empty Segue to it. After that select the newly added View Controller open the Size Inspector and set the Simulated Size to Freeform and adjust the width and height of the controller according to the Container View Controller.

Resulting (in my case):

Repeat the same step for a second View Controller.

Your Storyboard will more or less look like this:

After that, add three classes of type UIViewController, i.e two for child view controllers(Let’s say FirstViewController.swift and SecondViewController.swift) and one for container view controller(ContainerViewController.swift), also add a class of type UIStoryboardSegue. Add all these classes to View Controllers and Empty Segues on storyboard, respectively.
When done adding classes, give identifiers to Embedded and Empty segues.

Open up your ViewController.swift class, create two action functions of the buttons that you added in the start, and paste the following code inside:

class ViewController: UIViewController {
    
    
    
    var container: ContainerViewController!

    
    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 segmentControl(_ sender: UISegmentedControl) {
        
        
        if sender.selectedSegmentIndex == 0{
            container!.segueIdentifierReceivedFromParent("first")
            
        }else{
            container!.segueIdentifierReceivedFromParent("second")
        }
        
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "container"{
            container = segue.destination as! ContainerViewController
            //For adding animation to the transition of containerviews you can use container's object property
            // animationDurationWithOptions and pass in the time duration and transition animation option as a tuple
            // Animations that can be used 
            // .transitionFlipFromLeft, .transitionFlipFromRight, .transitionCurlUp
            // .transitionCurlDown, .transitionCrossDissolve, .transitionFlipFromTop
            container.animationDurationWithOptions = (0.2, .transitionFlipFromBottom)
        }
    }
    
    
}

class ViewController: UIViewController {

var container: ContainerViewController!

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 segmentControl(_ sender: UISegmentedControl) {

if sender.selectedSegmentIndex == 0{

container!.segueIdentifierReceivedFromParent("first")

}else{

container!.segueIdentifierReceivedFromParent("second")

}

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

if segue.identifier == "container"{

container = segue.destination as! ContainerViewController

//For adding animation to the transition of containerviews you can use container's object property

// animationDurationWithOptions and pass in the time duration and transition animation option as a tuple

// Animations that can be used

// .transitionFlipFromLeft, .transitionFlipFromRight, .transitionCurlUp

// .transitionCurlDown, .transitionCrossDissolve, .transitionFlipFromTop

container.animationDurationWithOptions = (0.2, .transitionFlipFromBottom)

}

In your ContainerViewController.swift, paste the following code:

class ContainerViewController: UIViewController {
    //Manipulating container views
    fileprivate weak var viewController : UIViewController!
    //Keeping track of containerViews
    fileprivate var containerViewObjects = Dictionary<String,UIViewController>()
    // Pass in a tuple of required TimeInterval with UIViewAnimationOptions 
    var animationDurationWithOptions:(TimeInterval, UIViewAnimationOptions) = (0,[])
    
    // Specifies which ever container view is on the front 
    open var currentViewController : UIViewController{
        get {
            return self.viewController
            
        }
    }
    
    
    fileprivate var segueIdentifier : String!
    
    //Identifier For First Container SubView
    @IBInspectable internal var firstLinkedSubView : String!
    
    
    override open func viewDidLoad() {
        super.viewDidLoad()
        
    }
    open override func viewDidAppear(_ animated: Bool) {
        if let identifier = firstLinkedSubView{
            segueIdentifierReceivedFromParent(identifier)
        }
    }
    override open func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func segueIdentifierReceivedFromParent(_ identifier: String){
        
        self.segueIdentifier = identifier
        self.performSegue(withIdentifier: self.segueIdentifier, sender: nil)
        
    }
    
    
    
    
    override open func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == segueIdentifier{
            //Remove Container View
            if viewController != nil{
                viewController.view.removeFromSuperview()
                viewController = nil
                
            }
            //Add to dictionary if isn't already there
            if ((self.containerViewObjects[self.segueIdentifier] == nil)){
                viewController = segue.destination
                self.containerViewObjects[self.segueIdentifier] = viewController
                
            }else{
                for (key, value) in self.containerViewObjects{
                    
                    if key == self.segueIdentifier{
                        viewController = value
                    }
                }
                
            }
            UIView.transition(with: self.view, duration: animationDurationWithOptions.0, options: animationDurationWithOptions.1, animations: {
                self.addChildViewController(self.viewController)
                self.viewController.view.frame = CGRect(x: 0,y: 0, width: self.view.frame.width,height: self.view.frame.height)
                self.view.addSubview(self.viewController.view)
            }, completion: { (complete) in
                self.viewController.didMove(toParentViewController: self)
            })
           
           
            
        }
        
    }
    
    
}

class ContainerViewController: UIViewController {

//Manipulating container views

fileprivate weak var viewController : UIViewController!

//Keeping track of containerViews

fileprivate var containerViewObjects = Dictionary<String,UIViewController>()

// Pass in a tuple of required TimeInterval with UIViewAnimationOptions

var animationDurationWithOptions:(TimeInterval, UIViewAnimationOptions) = (0,[])

// Specifies which ever container view is on the front

open var currentViewController : UIViewController{

get {

return self.viewController

}

fileprivate var segueIdentifier : String!

//Identifier For First Container SubView

@IBInspectable internal var firstLinkedSubView : String!

override open func viewDidLoad() {

super.viewDidLoad()

}

open override func viewDidAppear(_ animated: Bool) {

if let identifier = firstLinkedSubView{

segueIdentifierReceivedFromParent(identifier)

}

override open func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

func segueIdentifierReceivedFromParent(_ identifier: String){

self.segueIdentifier = identifier

self.performSegue(withIdentifier: self.segueIdentifier, sender: nil)

}

override open func prepare(for segue: UIStoryboardSegue, sender: Any?) {

if segue.identifier == segueIdentifier{

//Remove Container View

if viewController != nil{

viewController.view.removeFromSuperview()

viewController = nil

}

//Add to dictionary if isn't already there

if ((self.containerViewObjects[self.segueIdentifier] == nil)){

viewController = segue.destination

self.containerViewObjects[self.segueIdentifier] = viewController

}else{

for (key, value) in self.containerViewObjects{

if key == self.segueIdentifier{

viewController = value

}

UIView.transition(with: self.view, duration: animationDurationWithOptions.0, options: animationDurationWithOptions.1, animations: {

self.addChildViewController(self.viewController)

self.viewController.view.frame = CGRect(x: 0,y: 0, width: self.view.frame.width,height: self.view.frame.height)

self.view.addSubview(self.viewController.view)

}, completion: { (complete) in

self.viewController.didMove(toParentViewController: self)

})

}

And in your Empty Segue class:

class Empty: UIStoryboardSegue{

override func perform() {

}
}

class Empty: UIStoryboardSegue{

override func perform() {

}

After that you’re good to go.
Here is a video tutorial for this.

I have uploaded this project on Github for reference.
Cheers!

Tags:6.3.1, apple, child view, Container, Container View, iOS, parent view, SDK 8.3, Swift, Xcode

Facebook Tweet LinkedIn Pin

Aaqib Hussain

administrator

16 Comments

dineshramitc, August 13, 2015 @ 8:07 am Reply

Reblogged this on Dinesh Ram Kali..
Guy Cohen, January 7, 2016 @ 4:36 am Reply

Just wondering, is this is the right way to do it ?
- Aaqib Hussain, January 7, 2016 @ 3:21 pm Reply
  
  I don’t know if its the right way because only an official Apple developer can tell that. but what I can tell you is that its the only proper way you would find on internet.
Anonymous, March 7, 2016 @ 12:01 pm Reply

Thank you for this great job ! : )
I’m new to Apple-develop and do you have a objective-c sample there?
- Aaqib Hussain, March 7, 2016 @ 7:15 pm Reply
  
  Hello anon!
  I don’t have the sample for obj-c but I think I can try and write it for you.
- Aaqib Hussain, March 13, 2016 @ 3:33 pm Reply
  
  There you go. Here is the link for Objective-C sample code: https://github.com/iaaqib/Container-View-Controller-
  Cheers!
  - Anonymous, March 15, 2016 @ 1:18 pm Reply
    
    Hi Aaqib Hussain:
    Thank you help me out of the problem, so kind of you ! [handshake] : )
    - Aaqib Hussain, March 15, 2016 @ 11:59 pm Reply
      
      Happy to help.
Jeppro, November 11, 2017 @ 3:30 pm Reply

Hi! Thank you for this awesome tutorial. I am new to coding and this has been a great help. I am now trying to figure out how to put some animations between the new and old viewcontrollers, but I can’t figure out where to put the code exactly. I’ve tried in the perform() inside the custom segue based on other sources, but that doesn’t seem to work so far and I get several errors like: “Application tried to present modally an active controller”. Can you help me with that?
- Aaqib Hussain, December 17, 2017 @ 7:15 pm Reply
  
  Hi Jeppro, I am sorry for the late reply but I have updated the tutorial and my Github repo with the animation code, kindly check. Thanks.
Dave, November 18, 2017 @ 11:06 pm Reply

How would you go about this is you wanted to animate the transition in views?
- Aaqib Hussain, December 17, 2017 @ 7:14 pm Reply
  
  Hi Dave, I am sorry for the late reply but I have updated the tutorial and my github with the animation code kindly check. Thanks.
Bivin, December 19, 2017 @ 6:26 pm Reply

Thank you. It saved my day
Frank Miller, December 17, 2018 @ 2:33 am Reply

How can you access elements on the containerViews from the parent?

Like if each container has an array of values I want to obtain from each child containerView?
- Aaqib Hussain, January 13, 2019 @ 9:11 pm Reply
  
  If you got to the github link. I have added an example to access things. you can look at the sample project. Hope this helps.
Faran Mushtaq, February 25, 2019 @ 12:41 pm Reply

Great one my friend..
Keep it up !

Container View in iOS

Aaqib Hussain

16 Comments

dineshramitc, August 13, 2015 @ 8:07 am Reply

Guy Cohen, January 7, 2016 @ 4:36 am Reply

Aaqib Hussain, January 7, 2016 @ 3:21 pm Reply

Anonymous, March 7, 2016 @ 12:01 pm Reply

Aaqib Hussain, March 7, 2016 @ 7:15 pm Reply

Aaqib Hussain, March 13, 2016 @ 3:33 pm Reply

Anonymous, March 15, 2016 @ 1:18 pm Reply

Aaqib Hussain, March 15, 2016 @ 11:59 pm Reply

Jeppro, November 11, 2017 @ 3:30 pm Reply

Aaqib Hussain, December 17, 2017 @ 7:15 pm Reply

Dave, November 18, 2017 @ 11:06 pm Reply

Aaqib Hussain, December 17, 2017 @ 7:14 pm Reply

Bivin, December 19, 2017 @ 6:26 pm Reply

Frank Miller, December 17, 2018 @ 2:33 am Reply

Aaqib Hussain, January 13, 2019 @ 9:11 pm Reply

Faran Mushtaq, February 25, 2019 @ 12:41 pm Reply

Leave a Reply Cancel reply

Factory Design Pattern

Creating Target specific Theme in iOS

Facade Design Pattern

Unit Testing in Android for Dummies

Factory Design Pattern

Facade Design Pattern

Things to know when moving to Germany

Unit Testing in Android for Dummies

Factory Design Pattern

Creating Target specific Theme in iOS

Factory Design Pattern

Creating Target specific Theme in iOS

Facade Design Pattern

Singleton Design Pattern

Container View in iOS

16 Comments

dineshramitc, August 13, 2015 @ 8:07 am Reply

Guy Cohen, January 7, 2016 @ 4:36 am Reply

Aaqib Hussain, January 7, 2016 @ 3:21 pm Reply

Anonymous, March 7, 2016 @ 12:01 pm Reply

Aaqib Hussain, March 7, 2016 @ 7:15 pm Reply

Aaqib Hussain, March 13, 2016 @ 3:33 pm Reply

Anonymous, March 15, 2016 @ 1:18 pm Reply

Aaqib Hussain, March 15, 2016 @ 11:59 pm Reply

Jeppro, November 11, 2017 @ 3:30 pm Reply

Aaqib Hussain, December 17, 2017 @ 7:15 pm Reply

Dave, November 18, 2017 @ 11:06 pm Reply

Aaqib Hussain, December 17, 2017 @ 7:14 pm Reply

Bivin, December 19, 2017 @ 6:26 pm Reply

Frank Miller, December 17, 2018 @ 2:33 am Reply

Aaqib Hussain, January 13, 2019 @ 9:11 pm Reply

Faran Mushtaq, February 25, 2019 @ 12:41 pm Reply

Leave a Reply Cancel reply

Kotlin

Miscellaneous

Research & Publications

Reviews

Swift

Swift

Swift Programming

Tutorials

Uncategorized

Android

Android

Articles

C# Programming

Design Patterns

iOS

iOS

Kotlin

Kotlin

Miscellaneous

Research & Publications

Reviews

Swift

Swift

Swift Programming

Tutorials

Uncategorized

Android

Android

Articles

C# Programming

Design Patterns

iOS

iOS

Kotlin

Kotlin

Miscellaneous

Research & Publications

Reviews

Related Posts