An iPad iOS 4 Split View and Popover Example

By Mildred Wagner,2014-12-29 23:15
11 views 0
An iPad iOS 4 Split View and Popover Example

    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

    Popover Project

     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:

    Selecting each item in the list will cause that object to be highlighted in

    the view panel. As each item is selected it will become evident that

    Root View Controller is assigned to the master panel and Detail View

    Controller is the detail panel. Finally, select the Split View Controller

    and display the Connections Inspector (View -> Utilities -> Connections

    Inspector) and note in the Outlets section that the Detail View

    Controller is designated as the spit view controller’s delegate.

     Before proceeding, select the Navigation Item object located beneath

    the Root View Controller, display the Attribute Inspector (View ->

    Utilities -> Attribute Inspector) and change the Title property from “Root

    View Controller” to “Favorite Web Sites”.


    Configuring Master View Items

    The root view controller created for us by Xcode is actually an instance of the UITableView class. The next step, therefore, is to configure the table view to display the list of web sites. For this purpose we will need to configure two array objects to store the web site names and URL addresses. Select the RootViewController.h file and modify it as follows to declare these two arrays: #import <UIKit/UIKit.h>

    @class DetailViewController;

    @interface RootViewController : UITableViewController {

     NSArray *sitesNames;

     NSArray *siteAddresses;


    @property (nonatomic, retain) NSArray *siteNames; @property (nonatomic, retain) NSArray *siteAddresses; @property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;


    Note that Xcode has already included a reference to the detail view controller

    in this file so that it can be accessed from within the root view controller code.

    Having declared the arrays, modify the RootViewController.m file to add the @synthesize directive and to initialize the arrays in viewDidLoad method. Also

    be sure to add code to release memory allocated to these arrays when the

    application exits:

    #import "RootViewController.h"

    #import "DetailViewController.h"

    @implementation RootViewController

    @synthesize detailViewController;

    @synthesize siteNames, siteAddresses;

    - (void)viewDidLoad


     [super viewDidLoad];

     self.clearsSelectionOnViewWillAppear = NO;

     self.contentSizeForViewInPopover =

     CGSizeMake(320.0, 600.0);

     siteNames = [[NSArray alloc]

     initWithObjects:@"Yahoo", @"Google",

     @"Apple", @"eBookFrenzy", nil];

     siteAddresses = [[NSArray alloc]









- (void)viewDidUnload


     // Relinquish ownership of anything that can be recreated in viewDidLoad or on demand.

     // For example: self.myOutlet = nil;

     self.siteNames = nil;

     self.siteAddresses = nil;


- (void)dealloc


     [siteAddresses release];

     [siteNames release];

     [detailViewController release];

     [super dealloc];


    As outlined in the chapter entitled Creating a Simple iOS 4 iPad Table View Application there are a number of methods that must be implemented in order for the items to appear within the table view object. Fortunately, Xcode has

    already placed template methods for us to use in the RootViewController.m

    file. First, modify the numberOfRowsInSection method to notify the table view

    of the number of items to be displayed (in this case, equal to the number of

    items in our siteNames array):