Chapter 13. Page Flicking

One of the more aesthetically pleasing UI features of the iPhone is the ability to thumb through a series of pages, flicking the previous page to the left or right to bring up the next page. In Chapter 10, you learned about page controls and scroll views. Put together, these classes can provide the same style page flipping as seen on the iPhone's home screen, or when flipping through photos.

This chapter provides a recipe for a fully functional class named PageScrollView, which does the heavy lifting involved in setting up such a display. At the heart of its plumbing, the PageScrollView class creates a scrolling content area having a width of all the pages you'd like to display put together. For example, the iPhone's screen is 320 pixels wide. To display 10 pages, you'd create a UIScrollView with a content size of 3,200 pixels. Each page is then "glued" onto a different portion of the scroll view. Using the UIScrollView class's pagingEnabled property, each section of the UIScrollView is split up evenly to create screen-sized "pages" that snap to a single position, just like the springboard. As the user scrolls, the scroll view automatically snaps to the closest page, depending on where he scrolled. The user can also tap anywhere on the page control at the bottom of the screen to flip pages. The page number being displayed is easily calculated by taking the width of the entire scrolling content size and dividing by the width of a single page.

For applications using potentially hundreds of pages, you won't have the memory to accommodate a scroll region to fit them all. The second example in this chapter shows you a second recipe for a PageScrollView class that uses a scroll region the size of only three pages: left, right, and center. As the user scrolls, the nonvisible portions of the scroll view (usually the left and right pages) are dynamically swapped out to contain the contents of adjacent pages. This conserves memory and gives the illusion of a seamless scroll containing all views.