Loading different views inside another view?

Question

How do I load a view inside another view?

Let me explain better. I have a view, with a segmented button. The user then selects a segment. At this point, a specific view which is not in the main view, should load inside it.

Currently, those external views appear in the bar over the view (along with exit and first responder).

I could theoretically load all the views in the same spot, making all of them hidden and then based on user input the correct view appears. Unfortunately this would make it very difficult to edit the content inside those external views, so there must be a better way.

Any suggestions?

From what I understand, you’re using Storyboards. I’d recommend creating the two views in separate .xib files, adding a container in your main view, and then instantiating either of the views from code and placing it in your container. If you needed your childviews to “speak” with the main view controller; simply setup some delegate methods in the xib view controllers and the parent view controller. Let me know if you’d like a more complete answer with some code examples; albeit I could only provide those in Swift. — akseli, Sep 25 '18 at 11:47
I posted a complete answer below. Let me know if it helped out with your issue or if you need further guidance. — akseli, Sep 26 '18 at 16:47

score 0 · Accepted Answer · answered Sep 25 '18 at 13:21

Since it seems that you are using Storyboard and want to keep your views easily editable I suggest the following structure:

In your main view, add a Container to your Main View with its corresponding auto-layout constraints.

Then, create two .xib files which contain your two views and their design. Inside this .xib, set your constraints for the inner elements.

Then, in your Main View's View Controller, using your Button's outlet function instantiate either of your .xib files as a child-view for your container.

if let customView = NSBundle.mainBundle().loadNibNamed("CustomView", owner: self, options: nil).first as? CustomView {
      contentView.addSubview(customView)

      customView.setTranslatesAutoresizingMaskIntoConstraints(false)
      contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[view]-0-|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["view":customView]))
      contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[view]-0-|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["view":customView]))
}

(Credit for this code goes to: http://www.thomashanning.com/loading-a-view-from-a-xib/)

If you need your child-views to communicate with the parent view, you can simply add delegate functions to your child views and set your main view as the delegate as you instantiate your new .xib.

You can find more detailed instructions on working with delegates in objective-c here: How do I create delegates in Objective-C?

By using this method, you can easily edit your child views in storyboard mode by editing editing the .xib files, and at the same time, it makes instantiation of these views inside your parent view quite simple and straightforward.

Loading different views inside another view?

1 Answers1