How can I create one UIViewController with two views that display one or the other depending on button clicked

Question

I'm quite new to iOS development and I am stuck. Currently I am using one tab controller to switch between two view controllers (list and map view). This made it easier to use storyboard to configure the look of the two views.

Now the requirements have changed and the app needs to have one view controller with a segmented control that on click, displays either the list or the map view. In order to do this, I would need to make one view controller that can display list/map view.

I understand how the segmented controller part works, but I'm just stuck on how I can go about having two views with one or the other displayed in the same area. How can I go about having two views in one view controller (if possible, utilizing storyboard)?

Thanks in advance!

score 10 · Accepted Answer · edited May 23 '17 at 12:00

You should not have two main views in a single view controller, instead you need to create one view controller per view that you want to show. However you can certainly have multiple subviews in a single view controller, which may be what works for you.

There are a number of approaches to solve this the problem, the correct approach would be to create a container UIViewController, and add as its childs the 2 viewcontrollers you want to show, them simply set the view to the view controller you want to display, but that would probably be overly complicated since you mention you are new to iOS development.

Therefore an easy solution (not sure if you can implement this in storyboard - since I don't like it), would be to have a single view controller, with the tabs, and 2 subviews of the main view, then you can simply switch between views by doing something like this:

[self.view addSubview:view1];

//to switch

[view1 removeFromSuperview];
[self.view addSubView:view2];

alternatively, you do not really need to remove it from superview but just hide it, and then use bringSubViewToFront to show the view that you need.

If you want to use the other approach I would recommend looking for this video the WWDC 2011 video titled "Implementing UIViewController Containment". This other question should be useful to: UISegmented control with 2 views

Hope that helps.

Vimal Venugopalan · Answer 2 · 2012-08-27T17:58:27.487

Using storyboard api you can switch between 2 viewControllers

 - (void)viewDidLoad {
    [super viewDidLoad];
    UIViewController *viewController = [self viewControllerForSegmentIndex:self.typeSegmentedControl.selectedSegmentIndex];
    [self addChildViewController:viewController];
    viewController.view.frame = self.contentView.bounds;
    [self.contentView addSubview:viewController.view];
    self.currentViewController = viewController;
}
- (UIViewController *)viewControllerForSegmentIndex:(NSInteger)index {
    UIViewController *viewController;
    switch (index) {
        case 0:
            viewController = [self.storyboard instantiateViewControllerWithIdentifier:@"FirstViewController"];
            break;
        case 1:
            viewController = [self.storyboard instantiateViewControllerWithIdentifier:@"SecondViewController"];
            break;
    }
    return viewController;
}
- (IBAction)segmentChanged:(UISegmentedControl *)sender {
    UIViewController *viewController = [self viewControllerForSegmentIndex:sender.selectedSegmentIndex];
    [self addChildViewController:viewController];
    [self transitionFromViewController:self.currentViewController toViewController:viewController duration:0.0 options:UIViewAnimationOptionTransitionNone animations:^{
        [self.currentViewController.view removeFromSuperview];
        viewController.view.frame = self.contentView.bounds;
        [self.contentView addSubview:viewController.view];
    } completion:^(BOOL finished) {
        [viewController didMoveToParentViewController:self];
        [self.currentViewController removeFromParentViewController];
        self.currentViewController = viewController ;
    }];
    self.navigationItem.title = viewController.title;
}

This is in reference to iOS tutorial by Raywenderlich. Hope this helps

score 0 · Answer 3 · edited Sep 04 '19 at 03:22

With Storyboard it is possible in this way.

Create UIViewController with UISegmentControl and UITableView+UITableViewCell added to it.

Now you want to add MKMapView as well, hoverer, if you simply try to place the MapView on the ViewController, it will be added as new TableView cell, which is not what we want.

That's why you should not do it so. Instead, MapView has to be added to Storyboard's List of ViewControllers

Adjust the size and origin of MapView to be the same as TableView ones.

Now, setHidden to YES for either TableView of MapView, create and synthesize outlets for them. Then in Segment control Value Changed method implement switching:

- (IBAction)switchView:(id)sender {
    self.theTableView.hidden = !self.theTableView.hidden;
    self.theMapView.hidden = !self.theMapView.hidden;

    if (!self.theTableView.hidden) {
        [self.theTableView reloadData];
    }
}

How can I create one UIViewController with two views that display one or the other depending on button clicked

3 Answers3

Linked