Home > Articles > Home & Office Computing > Entertainment/Gaming/Gadgets

  • Print
  • + Share This
This chapter is from the book

Recipe: Building Split View Controllers

Split view controllers provide the preferred way to present hierarchically-driven navigation on the iPad. They generally consist of a table of contents on the left and a detail view on the right, although the class (and Apple's guidelines) are not limited to this presentation style. The heart of the class consists of the notion of an organizing section and a presentation section, both of which can appear onscreen at once in landscape orientation, and whose organizing section converts to a bar button-launched popover in portrait orientation.

Figure 5-7 shows the very basic split view controller built by Recipe 5-8 in landscape and portrait orientations. This controller adjusts the brightness of the detail view by selecting an item from the list in the root view. In landscape, both views are shown at once. In portrait orientation, the user must tap the upper-left button on the detail view to access the root view in a popover.

Figure 7 (Click to Enlarge) At their simplest, Split View Controllers consist of an organizing pane and a detail view pane. The organizing pane, which is hidden in portrait orientation, can be viewed from a popover accessed from the navigation bar.

Accomplishing this requires three separate objects: the root and detail view controllers, and building the split view controller. What's more, you'll generally want to add the root and detail controllers to navigation controller shells, to provide a consistent interface as well as. In the case of the detail controller this provides a home for the bar button in portrait orientation. The following method builds the two child views, embeds them into navigation controllers, adds them to a view controller array, and returns a new split view controller that hosts those views.

- (UISplitViewController *) splitviewController
    // Create the navigation-run root view
    ColorViewController *rootVC = [ColorViewController controller];
    UINavigationController *rootNav = [[UINavigationController alloc] 
    // Create the navigation-run detail view
    DetailViewController *detailVC = [DetailViewController controller];
    UINavigationController *detailNav = [[UINavigationController alloc] 

    // Add both to the split view controller
    UISplitViewController *svc = 
        [[UISplitViewController alloc] init];
    svc.viewControllers = [NSArray arrayWithObjects: 
        rootNav, detailNav, nil];
    svc.delegate = detailVC;
    return svc;

The root view controller is typically some kind of table view controller, as is the one in Recipe 5-8. Tables view controllers are discussed in great detail in Chapter 11, but what you see here is pretty much as bare bones as they get. It is a list of 10 items, each of whose cell titles are tinted proportionally between 0% and 90% of pure white.

When an item is selected, the controller uses its built in splitViewController property to affect its detail view. This property returns the split view controller that owns the root view. From there, the controller can retrieve the split view's delegate, which has been assigned to the detail view. By casting that delegate to the detail view controller's class, the root view can affect the detail view more meaningfully. In this extremely simple example, the selected cell's text tint is applied to the detail view's background color.

Recipe 5-9's DetailViewController class is about as skeletal an implementation as you can get. It provides the most basic functionality you need in order to provide a detail view implementation with split view controllers. This consists of the will hide / will show method pair that adds and hides that all-important bar button for the detail view.

When the split view controller converts the root view controller into a popover controller in portrait orientation, it passes that new controller to the detail view controller. It is the detail controller's job to retain and handle that popover until the interface returns to landscape orientation. In this skeletal class definition, a retained property holds onto the popover for the duration of portrait interaction.

Recipe 5-9 Building detail and root views for a split view controller

@interface DetailViewController : UIViewController 
    <UIPopoverControllerDelegate, UISplitViewControllerDelegate>
    UIPopoverController *popoverController;
@property (nonatomic, retain) UIPopoverController *popoverController;

@implementation DetailViewController
@synthesize popoverController;

+ (id) controller
    DetailViewController *controller = 
        [[DetailViewController alloc] init];
    controller.view.backgroundColor = [UIColor blackColor];
    return controller;

// Called upon going into portrait mode, hiding the normal table view
- (void)splitViewController: (UISplitViewController*)svc 
    willHideViewController:(UIViewController *)aViewController 
    forPopoverController: (UIPopoverController*)aPopoverController 
    barButtonItem.title = aViewController.title;
    self.navigationItem.leftBarButtonItem = barButtonItem;
    self.popoverController = aPopoverController;

// Called upon going into landscape mode.
- (void)splitViewController: (UISplitViewController*)svc 
    willShowViewController:(UIViewController *)aViewController 
    invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem 
    self.navigationItem.leftBarButtonItem = nil;
    self.popoverController = nil;

- (BOOL)shouldAutorotateToInterfaceOrientation:
    return YES;

@interface ColorViewController : UITableViewController
@implementation ColorViewController
+ (id) controller
    ColorViewController *controller = 
        [ [ColorViewController alloc] init];
    controller.title = @"Colors";
    return controller;

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    return 1;

- (NSInteger)tableView:(UITableView *)tableView 
    return 10;

- (UITableViewCell *)tableView:(UITableView *)tableView 
    cellForRowAtIndexPath:(NSIndexPath *)indexPath
    UITableViewCell *cell = 
        [tableView dequeueReusableCellWithIdentifier:@"generic"];
    if (!cell) cell = [[UITableViewCell alloc] 
        initWithStyle: UITableViewCellStyleDefault
    cell.textLabel.text = @"Brightness";
    cell.textLabel.textColor = 
        [UIColor colorWithWhite:(indexPath.row / 10.0f) alpha:1.0f];
    return cell;

- (void)tableView:(UITableView *)tableView 
    didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    // On selection, update the main view background color
    UIViewController *controller = 
        (UIViewController *)self.splitViewController.delegate;
    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
    controller.view.backgroundColor = cell.textLabel.textColor;
  • + Share This
  • 🔖 Save To Your Account