iPad Application Development: Presenting Options with Popovers and Toolbars
- Understanding Popovers and Toolbars
- Using Popovers with Toolbars
- Further Exploration
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
What You'll Learn in This Hour:
- How to add toolbars and toolbar buttons to your projects
- The role of popovers in the iPhone OS
- How to generate custom popover views in your projects
- Tricks for checking to see whether a popover is already displayed
On the iPhone, what you see is typically what you get. The user interface elements either show the options that are available to you, offer the ability to scroll to additional options, or swap out the current screen for another view that displays more information. The multiple-window model used in Mac OS X is gone. Although you might encounter an occasional alert dialog, windowing is not a standard in iPhone interfaces. On the iPad, things have changed. Apple has introduced the popover: a user interface element that can present views on top of other views.
In this hour, we explore how to prepare views for use in popovers, including adding toolbars and toolbar buttons (the most frequent UI element used to invoke a popover). You'll also configure the different display attributes associated with popovers, and communicate information between popover views and your main application view. Popovers are such a prevalent and important UI element that we'll be focusing on them for the next few hours, so be sure to work through this lesson carefully.
Understanding Popovers and Toolbars
Popovers are everywhere in the iPad interface, from Mail to Safari, as demonstrated in Figure 11.1. Using a popover enables you to display new information to your users without leaving the screen you are on, and to hide the information when the user is done with it. There are few desktop counterparts to popovers, but they are roughly analogous to tool palettes, inspector panels, and configuration dialogs. In other words, they provide user interfaces for interacting with content on the iPad screen, but without eating up permanent space in your UI.
)
Figure 11.1 Popovers are unique to the iPad UI.
Popovers, although capable of being displayed when a user interacts with any onscreen object, are most often shown when the user presses a toolbar button (UIBarButton) from within a toolbar object (UIToolbar). This is exactly the scenario shown in Figure 11.1. Because of this relationship, we will be presenting both of these objects within this hour's lesson. Let's quickly review what we need for each before we get started coding.
Popovers
Unlike other UI elements, popovers aren't something you just drag into a view from the Interface Builder Library. They are, in fact, entirely independent views, designed just like your main application view. The display of the views is governed by a popover controller (UIPopoverController). The controller displays the popover when a user event is triggered, such as touching a toolbar button. When the user is done with the popover, touching outside of its visible rectangle automatically closes the view.
To create a popover, we'll need to cover three different requirements. First, we need to make a view and view controller specially designed for the popover's contents. Second, when the proper event occurs in the user interface, we need to allocate and initialize an instance of popover controller. Third, when the user is done with the popover, we want to make sure that any changes made in the popover are reflected in the main application.
Popover Views
You've been developing views and view controllers for the past several hours, so you'll feel right at home working with a popover view. It uses the same UIViewController that we've been using all along, but with the addition of one unique property: contentSizeForViewInPopover.
This property should be set to the width and height of the popover to be displayed. Apple allows popovers up to 600 pixels wide and the height of the iPad screen, but recommends that they be kept to 320 pixels wide, or less. For example, to set the content size of 320 pixels by 200 pixels for a view controller that will be displaying a popover, we might add the following to the viewDidLoad method:
self.contentSizeForViewInPopover=CGSizeMake(320.0,200.0);
In fact, that's exactly what we're going to be doing in the tutorial shortly.
Popover Controller
Like views need view controllers, popovers need popover controllers (UIPopoverController). Popover controllers take care of all the hard work of rendering popovers on the screen in the right place. We'll focus on two methods of the popover controller:
- initWithContentViewController—Initializes the popover with the contents of a view controller. When the popover is displayed, whatever the view controller's view is, is displayed.
- presentPopoverFromBarButtonItem:permittedArrowDirections:animated—Invokes the display of the popover so that it appears to emerge from (and point to) a toolbar button. The parameters for this method allow fine-tuning of the arrow from the popover to the UI element it is appearing from, and whether its display is animated.
The popover controller will also need the delegate property set to an object that will take care of all the "cleanup" when the popover is dismissed by the user. This includes releasing the popover controller and updating the contents of the main application to reflect the user's actions in the popover. This leads us to the final popover requirement: the UIPopoverControllerDelegate protocol.
Popover Controller Delegate Protocol
To make the full use of a popover, we'll need an additional protocol method added to one of our classes. In our sample application, we'll be using our main application's view controller class for this purpose. This means we need to add a line to our main view controller's interface (.h) file to state that we're conforming to the UIPopverControllerDelegate protocol. Second, we'll be adding the protocol method popoverControllerDidDismissPopover to our application's view controller implementation file. That's it.
When the popover is dismissed by the user touching outside of its display, the popoverControllerDidDismissPopover method is invoked and we can react appropriately.
Toolbars
Toolbars (UIToolbar) are, comparatively speaking, one of the simpler UI elements that you have at your disposal. A toolbar is implemented as a solid bar, either at the top or bottom of the display, with buttons (UIBarButtonItem) that correspond to actions that can be performed in the current view. The buttons provide a single selector action, which works nearly identically to the typical Touch Up Inside event that you've encountered before.
Toolbars, as their name implies, are used for providing a set of static choices to the user—interface options that should be visible regardless of whether the application's primary content is changing. As you'll see, they can be implemented almost entirely visually and are the de facto standard for triggering the display of a popover on the iPad.
Although implementing popovers might be sounding a bit convoluted at this point, hang in there. After you've created one, the process will seem incredibly simple, and you'll want to use them everywhere!