Chapter11

iPad Considerations

From a technical standpoint, programming for the iPad is pretty much the same as programming for any other iOS platform. Apart from the screen size, there’s very little that differentiates a 3G iPad from an iPhone, or a Wi-Fi iPad from an iPod touch. In spite of the fundamental similarities between iPhone and iPad, from the user’s point of view these devices are really quite different. Fortunately, Apple had the good sense to recognize this fact from the outset and equip the iPad with additional UIKit components that help create applications that better utilize the iPad’s screen size and usage patterns. In this chapter, you’ll learn how to use these components. Let’s get started!

Split Views and Popovers

In Chapter 9, you spent a lot of time dealing with app navigation based on selections in table views, where each selection causes the top-level view, which fills the entire screen, to slide to the left and bring in the next view in the hierarchy, perhaps yet another table view. Plenty of iPhone and iPod touch apps work this way, both among Apple’s own apps and third-party apps.

One typical example is Mail, which lets you drill down through servers and folders until you finally make your way to a message. Technically, this approach can work on the iPad as well, but it leads to a user interaction problem.

On a screen the size of the iPhone or iPod touch, having a screen-sized view slide away to reveal another screen-sized view works well. On a screen the size of the iPad, however, that same interaction feels a little wrong, a little exaggerated, and even a little overwhelming. In addition, consuming such a large display with a single table view is inefficient in most cases. As a result, you’ll see that the built-in iPad apps do not actually behave that way. Instead, any drill-down navigation functionality, like that used in Mail, is relegated to a narrow column whose contents slide left or right as the user drills down or backs out. With the iPad in landscape mode, the navigation column is in a fixed position on the left, with the content of the selected item displayed on the right. This is what’s called, in the iPad world, a split view (see Figure 11–1).

D.Mark et al., Beginning iOS 5 Development

©Dave Mark, Jack Nutting, Jeff LaMarche 2011

www.it-ebooks.info

The left side of the split view is always 320 points wide (the same width as an iPhone in its vertical position). The split view itself, with navigation and content side by side, appears only in landscape mode. If you turn the device to a portrait orientation, the split view is still in play, but it’s no longer visible in the same way. The navigation view loses its permanent location and can be activated only by pressing a toolbar button, which causes the navigation view to pop up in a view that floats in front of everything else on the screen (see Figure 11–2). This is what’s called a popover.

www.it-ebooks.info

Figure 11–2. This iPad, in portrait mode, does not show the same split view as seen in landscape mode. Instead, the information that made up the left side of the split view in landscape mode is embedded in a popover. Mmmm, popovers.

In this chapter’s example project, you’ll see how to create an iPad application that uses both a split view and a popover.

Creating a SplitView Project

We’re going to start off pretty easily, by taking advantage of one of Xcode’s predefined templates to create a split view project. We’ll build an app that presents a slightly different take on Chapter 9’s presidential app, listing all the US presidents and showing the Wikipedia entry for whichever one you select.

Go to Xcode and select File New New Project…. From the iOS Application group, select Master-Detail Application and click Next. On the next screen, name the new project Presidents, set the Class Prefix to BID, and switch Device Family to iPad. Make sure the Use Storyboard and Use Automatic Reference Counting checkboxes are checked, but that the Use Core Data and Include Unit Tests checkboxes are unchecked. Click Next, choose the location for your project, and then click Create. Xcode will do its

www.it-ebooks.info

usual thing, creating a handful of classes and storyboard files for you, and then showing the project. If it’s not already open, expand the Presidents folder, and take a look at what it contains.

From the start, the project contains an app delegate (as usual), a class called

BIDMasterViewController, and a class called BIDDetailViewController. Those two view controllers represent, respectively, the views that will appear on the left and right sides of the split view. BIDMasterViewController defines the top level of a navigation structure, and BIDDetailViewController defines what’s displayed in the larger area when a navigation element is selected. When the app launches, both of these are contained inside a split view, which, as you may recall, does a bit of shape-shifting as the device is rotated.

To see what this particular application template gives you in terms of functionality, build the app and run it in the simulator. Switch between landscape mode (see Figure 11–3) and portrait mode (see Figure 11–4), and you’ll see the split view in action. In landscape mode, the split view works by showing the navigation view on the left and the detail view on the right. In portrait mode, the detail view occupies most of the picture, with the navigation elements confined to the popover, which is brought into view with the press of the button in the top left of the view.

Figure 11–3. The default Master-Detail Application template in landscape mode. Note the similarity between this figure and Figure 11–1.

www.it-ebooks.info