Skip to content

Containers modal storyboard example

Samuel Défago edited this page Nov 28, 2014 · 3 revisions

Containers - Modal-like presentation (storyboards)

In this example, we implement the same modal-like behavior as in another example, this time using storyboards.

  1. Create a new Xcode project with storyboards (use the Single View Application template) and add CoconutKit
  2. Remove the ViewController class automatically added by the template, as well as the associated object in the storyboard
  3. Drop a view controller onto the storyboard (this defines an initial view controller for the storyboard) and set its class to HLSStackController. To set the stack root view controller, drop another view controller onto the storyboard, and draw a segue from the stack controller to the second view controller, setting the segue class to HLSStackPushSegue and its identifier to hls_root:

4. Add a button at the bottom of the second view controller, from which the modal view controller will be displayed, and set its autoresizing mask to flexible width and height (so that it behaves correctly under rotation):

5. Drop a third view controller onto the storyboard, and draw a segue from the button to the third view controller. Edit the third view controller view, setting its background color to 70% black (this way we will be able to see the covered view controller's view underneath). Put a small white view in the middle, with flexible width and height, and add a close button on it:

6. Now build and run the application. Click on the button at the bottom of the root view controller. The modal view controller is displayed, but there is no transition. To fix this, assign the segue attached to the button the identifier `push_modal`, add a `MainViewController` class to your project. Use this class as class property of the second view controller you dropped onto the storyboard:

Also add the following to its implementation file:
```objective-c
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"push_modal"]) {
        HLSStackPushSegue *stackPushSegue = (HLSStackPushSegue *)segue;
        stackPushSegue.transitionClass = [HLSTransitionFadeIn class];
    }
}
```
  1. Add a ModalViewController class to your project (you should subclass HLSViewController, as said previously), and use it as class property of the third view controller your dropped onto the storyboard. Bind the close button to the following action:

    - (IBAction)close:(id)sender
    {
        [self.stackController popViewControllerAnimated:YES];
    }

Since iOS 6, popping view controllers can also be achieved using segue unwinding.

  1. Build and run the application. Try to display and hide the modal and to rotate the device. If your autoresizing masks were set up properly, the views should behave properly when rotating. Congratulations! You have successfully used HLSStackController in a storyboard!