Skip to content

Containers UISplitViewController example

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

Containers - UISplitViewController-like container example

In this example, we show how HLSPlaceholderViewController can be used to implement a UISplitViewController-like container. The final result will look as follows:

  1. Create a new Xcode project and add CoconutKit to it
  2. Create an HLSPlaceholderViewController subclass called MySplitViewController. We will manage the view layout using Interface Builder, you should therefore add a xib file bearing the class name at the same time (simply check the With XIB for user interface checkbox when creating the class files)

3. Similarly, create two view controller classes called `LeftViewController` and `RightViewController`, which will be the two view controllers our custom split view controller will display. 4. We must set where the container will draw its child view controllers. Open the `xib` file and add two subviews to `MySplitViewController`'s view, one filling most of the view controller's view on the left, the other one on the right.

Bind the two views to the `placeholderViews` outlet collection. Views in `placeholderViews` are where child view controller's views will be displayed. The order of the placeholder views in the outlet collection is not the one in which they are bound (this issue seems to affect only storyboards). `HLSPlaceholderViewController` expects you to manually tag the views in increasing order (the lowest index will be the first placeholder view). I here also set the background color of the views to blue and red so that they can be seen in Interface Builder, but you should set more appropriate colors in `-[MySplitViewController viewDidLoad]` (otherwise, these are the background colors which will be seen during transition animations):
```objective-c
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    for (UIView *placeholderView in self.placeholderViews) {
        placeholderView.backgroundColor = self.view.backgroundColor;
    }
}
```
  1. Set the view controllers to be displayed. This can be made at any time before the container is actually displayed. A good choice is -[MySplitViewController init]:

    - (id)init
    {
        if ((self = [super init])) {
            LeftViewController *leftViewController = [[LeftViewController alloc] init];
            [self setInsetViewController:leftViewController atIndex:0];
            
            RightViewController *rightViewController = [[RightViewController alloc] init];
            [self setInsetViewController:rightViewController atIndex:1];
        }
        return self;
    }
  2. Edit both LeftViewController and RightViewController xib files so that their view sizes match the ones of MySplitViewController placeholder views. Even if HLSPlaceholderViewController resizes the frame of its child view controllers to match the placeholder view bounds, it is better to design at the proper scale. Also add two different labels L and R in the middle of those views, with proper autoresizing mask (flexible height and width)

7. Finally, display a `MySplitViewController` instance as root view controller of your application:
```objective-c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    
    self.window.rootViewController = [[MySplitViewController alloc] init];
    
    return YES;
}
```
  1. Build and run the application, and also try to rotate the view. If your autoresizing masks were set up properly, the labels should behave properly when rotating. Congratulations! You have implemented your own UISplitViewController-like container!