Multiple Views in Same Container View Using Storyboard

Question

I have a viewcontroller with a background image and title header. This view remains same most of the time. And I have different child views that i will be showing and hiding inside this viewcontroller.

How can i achieve this using storyboard?

Do i have to create separate xibs for each child views?
Or do i create individual views inside the same view controller and hide and show them as needed?

Or is there any other elegant solution?

Thanks.

Please have a look at this tutorial: http://stackoverflow.com/questions/16884879/how-to-use-a-container-view-in-ios — Amit Thakur, Jun 12 '15 at 02:23

score 8 · Answer 1 · edited May 23 '17 at 12:01

8

Please have a look at this tutorial: How to use a 'Container View' in iOS?

The overall idea is shown in the image.

enter image description here

edited May 23 '17 at 12:01

Community

1
1

answered Jun 12 '15 at 02:25

Amit Thakur

1,081
12
14

score 2 · Answer 2 · answered Nov 17 '14 at 08:26

It will be much easy to design your UI if you use container views.

Add the container view for all your child views. Create properties for all the child container views in your main View Controller. Design the child views with in the container view controller. Apply business logic in your main view controller to show and hide the child views accordingly.

score 1 · Answer 3 · answered Nov 17 '14 at 07:49

Generally, you don't need to create separate xibs for each child views (technically, we can draw all view controllers on the same storyboard).

With the hide and show issue, make the child views as IBOutlet, and then let your code to decide which view should show and which one should hide.

score 1 · Answer 4 · answered Nov 17 '14 at 09:02

1

It will be better when add and remove subviews instead of hiding and showing.

In same ViewController you can use addSubView: to add and removeFromSuperView to remove views

answered Nov 17 '14 at 09:02

LoGoCSE

558
5
13

score 0 · Answer 5 · answered Mar 23 '15 at 07:59

Adding and removing subviews is the best way to achieve this. But if you do this with storyboard, all the overlapping views could look messy and will be hard to manage.

The best way to achieve this is adding views programmatically, and also setting layout constraints programatically.

UIView *subView = [[UIView alloc]init];
subView.backgroundColor = [UIColor blackColor];
NSDictionary *viewsDictionary = @{@"subView":subView};

NSDictionary *metrics = @{@"offset":@20};

NSArray *heightConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-offset-[subView]-offset-|"
                                                                    options:0
                                                                    metrics:metrics
                                                                      views:viewsDictionary];

NSArray *widthConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-offset-[subView]-offset-|"
                                                                   options:0
                                                                   metrics:metrics
                                                                     views:viewsDictionary];
[self.view addConstraints:heightConstraint];
[self.view addConstraints:widthConstraint];

The code above for example will add the subview whish has top,bottom,leading and trailing space set to 20 from the main view of the view controller.

Multiple Views in Same Container View Using Storyboard

5 Answers5