Click here to Skip to main content
13,557,288 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 12 Feb 2013
Licenced CPOL

Instantiate Storyboard ViewControllers Manually

, 12 Feb 2013
Rate this:
Please Sign up or sign in to vote.
Instantiate Storyboard view controllers manually.

I’ve started using storyboards in XCode/iOS more frequently, but I really needed something different from the normal segues and connections that Apple provides, and while Apple briefly documents how to do this, I thought I’d share my example.  Here is the view in Interface Builder of the test app that I created:

My initial controller is on the left, and the blue area is simply a UIView that I’ve connected to  a member variable outlet named _parentView. This is where I want my yellow and pink sub views to appear, each handled by their own controller.  Notice that there is no connection between the storyboards in this case.  The key here is to set the Storyboard ID for yellow and pink View Controllers so I can instantiate them in my code.  If I don’t set a storyboard id for the yellow and pink View Controllers, I’ll get a warning from XCode that they are unreachable. You set the Storyboard ID in the Identity inspector (see the inspector panel on the right in the picture above – make sure ‘Use Storyboard ID’ is checked).

Once I have storyboard IDs set for each of these view controllers, the code is quite simple to instantiate the view controllers and embed them using the parentView as a container.

- (IBAction)showView1:(id)sender 
  [self switchViews:@"yellow"];

- (IBAction)showView2:(id)sender 
  [self switchViews:@"pink"];

- (void)switchViews:(NSString*)storyboardId
  __block UIViewController *lastController = _childController;

  _childController = (UIViewController*)[self.storyboard 
  [self addChildViewController:_childController];
  [_parentView addSubview:_childController.view];

  CGRect parentRect = _parentView.bounds;
  parentRect.origin.x += parentRect.size.width;
  _childController.view.frame = parentRect;
  _childController.view.alpha = 0;
  [UIView animateWithDuration:0.5 animations:^{
    _childController.view.frame = _parentView.bounds;
    _childController.view.alpha = 1.0;
  } completion:^(BOOL finished) {
    if (lastController)
      [lastController.view removeFromSuperview];
      [lastController removeFromParentViewController];

The basics in the code above:

  • Keep a pointer to the last view controller child.
  • Use instantiateViewControllerWithIdentifier using the storyboard id you set in interface builder to create and return the view controller.
  • Add the new controller as a child controller to the parent.
  • Add the new controllers view as a subView to the parent.
  • Then for fun I animate the new controller onscreen.
  • When the new view is fully animated, then I remove the old view.

With this basic flow, you can customize the user interface in just about any way you can imagine.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Chris Demiris
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03-2016 | 2.8.180515.1 | Last Updated 12 Feb 2013
Article Copyright 2013 by Chris Demiris
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid