UISplitViewController

Run this project in the iPad simulator of the iOS Smulator.
Hardware → Device → iPad
Window → Scale → 75%
Then rotate the simulator into landscape orientation. When you touch a state in the left pane, you will go directly to the corresponding Wikipedia article in the right pane.

Source code in Split.zip

1. main.m
2. Class SplitAppDelegate: creates a MasterViewController and DetailViewController, and puts them under a UISplitViewController.
3. Class MasterViewController
4. Class DetailViewController

Create the project

Choose a template for your new project: Empty Project
Device Family: iPad (because iPhone does not have split view)
✓ Use Automatic Reference Counting

File → New → New File…
Chose a template for your new file: UIViewController subclass
Class: MasterViewController
Subclass of: UIViewController
✓ Targeted for iPad

File → New → New File…
Chose a template for your new file: UIViewController subclass
Class: DetailViewController
Subclass of: UIViewController
✓ Targeted for iPad

A view controller with two view controllers under it

We have seen that a UITabBarController or a UINavigationController can have very many (or very few) view controllers under it. A UISplitViewController must always have exactly two view controllers under it. (The viewControllers property of a UISplitViewController is an array that must always contain exactly two view controllers.) The left and right views are called the master pane and the detail pane. When you click or drag on the master pane or on a control in it, the detail pane should respond, e.g., by moving to a new position. Our detail pane moves to a new Wikipedia article.

The master pane is always 320 pixels wide (portrait and landscape); the detail pane should fill up the rest of the screen. These sizes happen automatically—you don’t have to mention them yourself. If your two view controllers have loadView methods, they can simply use CGRectZero as the argument of the view’s initWithFrame: method. (In the initWithFrame: method of the view, the frame and bounds properties will therefore be all zeroes. But these properties will receive their correct values (e.g., 320 × 748 for the master view in landscape orientation) by the time you get to the layoutSubviews method of the view.)

The left view controller (i.e., the master view controller) does not have to be a UITableViewController controlling a UITableView, and the right view controller (the detail view controller) does not have to control a UIWebView. The two view controllers can by any type of view controller at all.

Our MasterViewController has a pointer to the DetailViewController to allow the MasterViewController to send messages to the DetailViewController when the user taps. For the same reason, masterViewController.m has to import DetailViewController.h.

Apple’s documentation for Split View

1. Split View (iPad Only) in the iOS Human Interface Guidelines.
2. Split View Controller in the View Controller Programming Guide for iOS.
3. Class UISplitViewController and protocol UISplitViewControllerDelegate
4. Sample code: Multiple Detail Views