One of the big differences when working on an iPad application as compared to an iPhone application is the amount of screen real estate available on the iPad. This also introduces more responsibility on the developer to use the space wisely. An iPad application which only displays a large UITableView will definitely look bad. In this article we are going to learn about UISplitViewController which is used to divide the iPad view into multiple master-detail views. This article will also utilize the power of the Storyboards to make the UISplitViewController implementation easier.

UISplitViewController:

The UISplitViewController is responsible for managing the two side by side controllers. The UISplitViewController is only available for iPad applications and will throw an error when used with an iPhone application.

Implementing UISplitViewController Using Storyboards:

To get started create a new “View Based” application and make sure to utilize the Storyboard and ARC as shown in the screenshot below:



Next, drag a UISplitViewController from the Toolbox as shown in the screenshot below:



By default the UISplitViewController comes with four controllers and two views as shown in the following screenshot:



The purpose of each of the controllers and views is defined below:

TableViewController: The TableViewController serves as the master controller. This means a list of options is displayed in the TableViewController which when selected displays the details in the detail view controller.

ViewController: The ViewController serves as the details view which is visible by default. The detail view shows the information dependent on the selection from the master view controller.

NavigationController: The navigation controller is attached to the TableViewController and it is used to navigate to the TableViewController since the TableViewController (Master) is not visible when the application starts for the first time.

SplitViewController: This is the UISplitViewController which is responsible for the communication between the master and the detail view controllers. The two views we mentioned earlier are the views for the TableViewController (Master) and the ViewController (Detail).

If you run the application you will see the white screen which represents the view of the detail view controller. The detail view is visible by default. The master view is not visible at all. Before we tackle the problem of displaying the master view we need to add our custom controllers which will serve as the master view controller and detail view controllers.

Add one UITableViewController (MasterViewController) and one UIViewController (DetailViewController) which will serve as the controller classes for the TableViewController and the ViewController on the storyboard. Makes sure to change the custom class attribute to the designated MasterViewController and DetailViewController in the storyboards as shown in the screenshot below:



The MasterViewController declaration looks like the following:



The DetailViewController declaration looks like the following:



As you can see the DetailViewController comply to the UISplitViewControllerDelegate which means it can handle different events triggered by the UISplitViewController. The two methods that we will implement are willHideViewController and willShowViewController. These methods are responsible for hiding and showing the master view controller.

NOTE: When in portrait mode the master view controller can be made visible by a toolbar button. When in landscape mode the master view controller automatically changes its layout to cover the left column.

The two methods are implemented below:



If you run the application you will notice that the “Customers” toolbar button is not displayed. This is because we still have not hooked up the receiver for the UISplitViewController delegate. This is implemented in the AppDelegate.h file as shown below:



The splitViewController.viewControllers lastObject will return the “DetailViewController”. Now, if you run the application you will notice that the “Customers” button is displayed and when clicked displays the list of customers.



NOTE: We are not going to cover how the customers UITableView was populated. Please download the source code and view the implementation.

If you rotate your iPad you will notice that the “Customers” button is hidden and the customer list is shown in the plain UITableView control.



Pretty cool right!

Implementing Master Detail Communication:

You will notice that when you select a customer from the customer list nothing happens. Ideally we would like to see the details of the customer in the details view. This can be achieved easily using the delegates. The MasterViewController declares the CustomersDelegate which is later consumed by the DetailViewController.

The CustomerDelegate implementation is defined as follows:

 

The delegate is invoked when the user selects a customer from the customers table. The didSelectRowAtIndexPath method is implemented below:



The DetailViewController conforms to the delegate as shown below:



And implements the didSelectCustomer:(Customer *) customer method as shown below:



If you run the application and select any customer you will notice that the didSelectCustomer method is never invoked. This is because we still need to hook up the delegates. This is achieved in the AppDelegate.h file as shown below:



The DetailViewController is easily accessed through the lastObject property but to access the MasterViewController we need to dig deeper. The reason is that the MasterViewController is not at the same level as the DetailViewController. The NavigationViewController encapsulates the MasterViewController. Luckily the following line can be used to retrieve the MasterViewController from the NavigationViewController.


 
And then finally assign the DetailViewController as the delegate.



Conclusion:

UISplitViewController along with the power of storyboards allow us to create well designed iPad applications which are intuitive and componentize for maintainability.    

[Download Sample]