An iPad iOS 4 Split View and Popover Example (Xcode 4)
As demonstrated in the previous chapters, whilst it is possible to use the UITableView class as both an information display and application navigation tool, it is extremely inefficient in terms of the use of screen space when used on an iPad. In recognition of this fact, Apple introduced the Split View and Popover concepts for use when developing iPad applications. The purpose of this chapter is to provide an overview of Split Views and Popovers followed by a tutorial that implements these concepts in a simple
example iPad application.
1 An Overview of Split View and Popovers
2 About the Example iPad Split View and Popover Project
3 Creating the Project
4 Reviewing the Project
5 Configuring Master View Items
6 Configuring the Detail View Controller
7 Connecting Master Selections to the Detail View
8 Popover Implementation
9 Testing the Application
An Overview of Split View and Popovers
When an iPad is in landscape mode, the UISplitViewController class
divides the iPad screen into two side-by-side panels that implement a
master-detail model. Within this model, the left hand panel is the
master panel and presents a list of items to the user. The right hand
panel is the detail panel and displays information relating to the
currently selected item in the master panel.
A prime example of this concept in action can be seen in with the iPad Mail app which lists messages in the master panel and displays the
content of the currently selected message in detail panel.
When an iPad is in portrait mode, the Split View Controller hides the master panel so that the detail panel is able to utilize the entire screen. In this instance, access to the master panel is provided using a Popover. A popover is a window that appears over the top of the current view and, in a split view situation, is typically accessed via a button placed in the toolbar of the detail view. When the device is rotated back to landscape orientation, the master and detail panels appear side by side once again and the popover access button is removed from view.
The UISplitterViewController is essentially a container to which two child view controllers are added to act as the master (also referred to as the root view controller) and detail views. The detail view controller is usually designated as a delegate to the splitter view controller in order to receive notifications relating to orientation changes, primarily so that the popover button may be hidden and displayed accordingly.
In the remainder of this chapter we will work through a tutorial that
involves the creation of a simple iPad application that demonstrates the use of a split view and popover.
About the Example iPad Split View and
The goal of this tutorial is to create an iPad application containing a split view user interface. The master panel will contain a table view listing a number of web sites. When a web site is selected from the list the detail panel will load the corresponding web site and display it using a UIWebView component. When rotated into portrait mode, a button will appear in the navigation bar of the detail view which, when selected, will display the master list in a popover.
Creating the Project
Begin by launching Xcode and creating a new iPad iOS application named splitView using the Split View-based Application template. By
using this template we save a lot of extra coding effort in the implementation of the split view and popover behavior. Much of the
code generated for us is standard boilerplate code that does not change from one split view implementation to another. In fact, much of this template can be copied even if you plan to hand code split view behavior in future applications.
Reviewing the Project
The Split View template has created a number of project files for us. The most significant of these are the files relating to the RootViewController and DetailViewController classes. These classes correspond to the master and detail views respectively.
Xcode has also created a SplitViewController instance for us. To see this, select MainView.xib file from the project navigation panel to load the file into the Interface Builder environment. Next, click on the right hand pointing arrow at the bottom of the narrow panel containing the File’ Owner object so that it unfolds to display the more detailed view. Within the Objects sub-section, select the Split View Controller entry to display the split view in the design panel as illustrated in the following figure:
Within the Objects pane, click on the arrows to unfold the hierarchy of
the Split View Controller and its children: