iOS Recipes - Matt Drance [47]
PhotoCarousel/Classes/PhotoViewController.m
- (CGSize)contentSizeForPagingScrollView {
CGRect bounds = pagingScrollView.bounds;
return CGSizeMake(kContentWidth, bounds.size.height);
}
The next thing we need to do is initialize our scroll view to start from the center, to prevent the user from hitting either the beginning or the end of the scroll boundaries anytime soon. We do this in ‑viewDidLoad by simply dividing the content width in half and setting that to a new contentOffset.
PhotoCarousel/Classes/PhotoViewController.m
recycledPages = [[NSMutableSet alloc] init];
visiblePages = [[NSMutableSet alloc] init];
pagingScrollView.contentSize = [self contentSizeForPagingScrollView];
CGFloat pageOffset = floorf(kContentWidth / 2);
pagingScrollView.contentOffset = CGPointMake(pageOffset, 0);
With these two changes in place, our scroll view now has infinite paging behavior. Feel free to enable the scroll view’s horizontal scroll indicators to get a feel for just how much space we’re working with: the indicator barely moves as you switch from page to page.
Now that our scroll area is sufficiently padded, it’s time to tackle the primary task of circling the scroll view back around when we scroll past either end of our picture collection. We start with a small change to the ‑tilePages method. In the original sample, the lastNeededPageIndex variable was compared to the last index of our image array to prevent us from running out of bounds. This is no longer a concern, since we’re scrolling indefinitely and ultimately adjusting back around to the beginning of the array. But we definitely don’t want to run past the edge of the scroll view, so we’ve done some quick math to make sure that doesn’t happen.
PhotoCarousel/Classes/PhotoViewController.m
NSUInteger maxPage = (pagingScrollView.contentSize.width / visibleWidth);
lastNeededPageIndex = MIN(lastNeededPageIndex, maxPage);
The next step is to figure out which of the three images to display when we’re at, say, page 652 of our huge scroll view. We do this with a very basic change to the configurePage:forIndex: method. The original version of this method used the passed page index directly, and we simply do some modulo arithmetic on that (now huge) index before pulling one of our three images. This translates our arbitrarily large page index to something within the bounds of our image array.
PhotoCarousel/Classes/PhotoViewController.m
NSUInteger imageIndex = index % [self imageCount];
[page displayTiledImageNamed:[self imageNameAtIndex:imageIndex]
size:[self imageSizeAtIndex:imageIndex]];
Build and run PhotoCarousel to see these changes in action. We can now page left or right to our heart’s content. When we go past the third image, we come back to the first. If we scroll backward beyond the first, we come back to the third. This goes on and on, seemingly forever. (It’s not actually forever, but we’d have to page about 500 times in a single direction before realizing that.)
While playing with this project, you might notice the functional page control at the bottom of the screen. It updates accordingly as we move from page to page, and tapping on either side jumps backward and forward as we would expect. Let’s see how that’s wired up.
The page control is part of the XIB file and is set up as an IBOutlet in our PhotoViewController. The control is initially set up in ‑viewDidLoad right after the scroll view is initialized. We set the control’s number of pages to the size of our image array and start it at page 0.
PhotoCarousel/Classes/PhotoViewController.m
pageControl.numberOfPages = [self imageCount];
pageControl.currentPage = 0;
[self scrollToPageIndex:0 animated:NO];
Note the ‑scrollToPageIndex:animated: message there. This method does some simple arithmetic to figure out the scroll view’s current content offset and then conforms it to something that fits the requested image index. We send this message