Skip to content

Containers modal example

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

Containers - Modal-like presentation

In this example, we use a stack controller to display a view controller like a modal. UIKit modal presentation namely suffers from several limitations, most notably:

  • Prior to iOS 8, the presenting view controller's view was removed, and was not visible anymore even if the modal was not completely opaque
  • On iPad, you cannot freely choose the size of a modal view
  • The set of transition animations is very limited, and some animations are not always available (e.g. you cannot use flip animations for modal presentation in a UIPopoverController)

Instead, we can use HLSStackController as a convenient way to display a view controller on top of another one. The final result we want to obtain in this example looks as follows:

  1. Create a new Xcode project and add CoconutKit to it
  2. Create two view controllers, one called MainViewController, the other one called ModalViewController. We will manage the view layouts using Interface Builder, you should therefore add xib files for each class at the same time (simply check the With XIB for user interface checkbox when creating the class files)

3. Edit your application delegate code so that the root view controller of your application is a stack controller. The stack root view controller will be an instance of our `MainViewController` class:
```objective-c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor blackColor];
    [self.window makeKeyAndVisible];
    
    MainViewController *mainViewController = [[MainViewController alloc] init];
    HLSStackController *stackController = [[HLSStackController alloc] initWithRootViewController:mainViewController];
    self.window.rootViewController = stackController;
    
    return YES;
}
```

Note that I have set the window background to black. The transition animation namely lets us see the window, and in general I prefer it black in such cases.
  1. Add a button to the MainViewController view to display the modal, with flexible height and width:

Bind the button to the following action implemented in `MainViewController.m`:
```objective-c
- (IBAction)showModal:(id)sender
{
    ModalViewController *modalViewController = [[ModalViewController alloc] init];
    [self.stackController pushViewController:modalViewController
                         withTransitionClass:[HLSTransitionFadeInPushToBack class]
                                    animated:YES];
}
```

Note that the container view controller is easily accessed by using the `stackController` property. The modal view controller is displayed with one of the built-in CoconutKit transitions.
  1. Edit ModalViewController 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:

Bind the close button to the following action implemented in `ModalViewController.m`:
```objective-c
- (IBAction)close:(id)sender
{
    [self.stackController popViewControllerAnimated:YES];
}
```
  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!

Clone this wiki locally