Online Book Reader

Home Category

iOS Recipes - Matt Drance [48]

By Root 230 0
from ‑viewDidLoad and again in ‑pageControlTapped:, which is the action message we receive to handle taps on the page control. We can send this message at any other time to programmatically display one of our images at will.

PhotoCarousel/Classes/PhotoViewController.m

- (void)scrollToPageIndex:(NSInteger)pageIndex animated:(BOOL)animated

{

CGPoint scrollOffset = pagingScrollView.contentOffset;

CGFloat pageWidth = pagingScrollView.bounds.size.width;

NSInteger currentPage = floorf(scrollOffset.x / pageWidth);

NSInteger adjustedPage = currentPage % [self imageCount];

NSInteger destinationPage = currentPage + (pageIndex - adjustedPage);

scrollOffset.x = destinationPage * pageWidth;

[pagingScrollView setContentOffset:scrollOffset animated:animated];

}

- (IBAction)pageControlTapped:(id)sender

{

[self scrollToPageIndex:pageControl.currentPage animated:YES];

}

Finally, we need to programmatically update the page control’s index in response to manual scrolling. We do this in ‑tilePages but not until a given page has filled the screen. We know this happens when the firstNeededPageIndex and lastNeededPageIndex variables are the same—in other words, when only one page is visible.

PhotoCarousel/Classes/PhotoViewController.m

if (firstNeededPageIndex == lastNeededPageIndex) {

pageControl.currentPage = firstNeededPageIndex % [self imageCount];

}

There you have it: a paging scroll view that keeps on going, round and round, just like the Stocks app. The PhotoCarousel project, like its PhotoScroller predecessor, includes only three images, but you can easily add more to increase the number of displayable pages. You can also add your own custom views that do something completely different in each page.


Copyright © 2011, The Pragmatic Bookshelf.

Chapter 3

Graphics Recipes

The Graphics section presents recipes that focus primarily on a single application: Graphics Garden. Even though this is a simplistic example, we will explore techniques that you can apply to any application that requires dynamic visual components. Along the way, we take a look at the CALayer class and Core Animation libraries, which help you create dynamic and efficient visual effects.

The first six recipes in this section share sample code in the Graphics Garden application. Each recipe gradually moves you through the process of creating simple custom UIView objects, leading to more complex composite UIImageViews and eventually to a scene of multiple animated elements (see Figure 28, The full Graphics Garden app ). Wherever possible, we use Objective-C methods, but occasionally we need to drop down to C functions to access the lower-level Core Graphics libraries.

The last two recipes delve deeper into Core Animation, using the replicator layer to create a simple emitter and building an advanced transition using the power of sublayer transformation.

Figure 28. The full Graphics Garden app

* * *

Recipe 23 Draw Gradient-Filled Bezier Paths

Problem

To get the best-quality image at any size, you want to use Core Graphics to draw your objects. But Core Graphics C-based APIs can be cryptic and difficult to work with. Is there another way?

Solution

Before we dig into the code to draw our objects, it’s worth taking a moment to review drawing in iOS. Custom drawing code is usually added to the drawRect: method of a UIView subclass. The drawRect: method is unusual in that it is never called directly from your code. It is triggered by the system to redraw the view contents whenever it thinks it is necessary, which in iOS is not often, because the views are backed by hardware-based layers. We can force a redraw by calling the setNeedsDisplay method. However, the redraw will not actually happen until the end of the run loop. A nice advantage of putting our drawing code in drawRect: is that we don’t have to worry about initializing the graphics context (or drawing surface), though we can easily get a reference to it if we need it by calling the C function UIGraphicsGetCurrentContext.

Figure 29. Shapes made from bezier curves

Return Main Page Previous Page Next Page

®Online Book Reader