Question

I’m following the “Paging with UIScrollView” section of How To Use UIScrollView to Scroll and Zoom Content with 4 images loaded into the array. I should mention that I’m loading this in a UITabController and it’s the first view controller in the storyboard.

For some reason, two issues occur when the view loads:

One, the page control does not respond to the updates from the UIScrollView (dots don’t move at all but calculate with the correct number of pages).

Two, only the first two pages load which makes me think that the loadVisiblePages method is not functioning.

Wired up from the First Responder of the View Controller is a page control to pageControl and a Scroll View to scrollView and view to View (default) and lastly the relationship segue.

Update: I just found something interesting about this issue. If I go to page 3 (aka 3 image in the array) I can’t see the image. But if I switch tabs, both the page control AND the image are correctly displayed.

The Header:

#import <UIKit/UIKit.h>

@interface TutorialViewController : UIViewController <UIScrollViewDelegate>

@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) IBOutlet UIPageControl *pageControl;

@end

The Implementation:

#import "TutorialViewController.h"

@interface TutorialViewController ()
@property (nonatomic, strong) NSArray *pageImages;
@property (nonatomic, strong) NSMutableArray *pageViews;

- (void)loadVisiblePages;
- (void)loadPage:(NSInteger)page;
- (void)purgePage:(NSInteger)page;
@end

@implementation TutorialViewController

@synthesize scrollView = _scrollView;
@synthesize pageControl = _pageControl;

@synthesize pageImages = _pageImages;
@synthesize pageViews = _pageViews;

- (void)loadPage:(NSInteger)page {
    if (page < 0 || page >= self.pageImages.count) {
        // If it's outside the range of what you have to display, then do nothing
        return;
    }

    // 1
    UIView *pageView = [self.pageViews objectAtIndex:page];
    if ((NSNull*)pageView == [NSNull null]) {
        // 2
        CGRect frame = self.scrollView.bounds;
        frame.origin.x = frame.size.width * page;
        frame.origin.y = 0.0f;

        // 3
        UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.pageImages objectAtIndex:page]];
        newPageView.contentMode = UIViewContentModeScaleAspectFit;
        newPageView.frame = frame;
        [self.scrollView addSubview:newPageView];
        // 4
        [self.pageViews replaceObjectAtIndex:page withObject:newPageView];
    }
}

- (void)purgePage:(NSInteger)page {
    if (page < 0 || page >= self.pageImages.count) {
        // If it's outside the range of what you have to display, then do nothing
        return;
    }

    // Remove a page from the scroll view and reset the container array
    UIView *pageView = [self.pageViews objectAtIndex:page];
    if ((NSNull*)pageView != [NSNull null]) {
        [pageView removeFromSuperview];
        [self.pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
    }
}

- (void)loadVisiblePages {
    // First, determine which page is currently visible
    CGFloat pageWidth = self.scrollView.frame.size.width;
    NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));

    // Update the page control
    self.pageControl.currentPage = page;

    // Work out which pages you want to load
    NSInteger firstPage = page - 1;
    NSInteger lastPage = page + 1;

    // Purge anything before the first page
    for (NSInteger i=0; i<firstPage; i++) {
        [self purgePage:i];
    }

    // Load pages in our range
    for (NSInteger i=firstPage; i<=lastPage; i++) {
        [self loadPage:i];
    }

    // Purge anything after the last page
    for (NSInteger i=lastPage+1; i<self.pageImages.count; i++) {
        [self purgePage:i];
    }
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // Load the pages that are now on screen
    [self loadVisiblePages];
}

- (void)viewDidLoad {
    [super viewDidLoad];

    // 1
    self.pageImages = [NSArray arrayWithObjects:
                       [UIImage imageNamed:@"640x960 tutorial_1.png"],
                       [UIImage imageNamed:@"640x960 tutorial_2.png"],
                       [UIImage imageNamed:@"640x960 tutorial_3.png"],
                       [UIImage imageNamed:@"640x960 tutorial_4.png"],
                       nil];

    NSInteger pageCount = self.pageImages.count;

    // 2
    self.pageControl.currentPage = 0;
    self.pageControl.numberOfPages = pageCount;

    // 3
    self.pageViews = [[NSMutableArray alloc] init];
    for (NSInteger i = 0; i < pageCount; ++i) {
        [self.pageViews addObject:[NSNull null]];
    }
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // 4
    CGSize pagesScrollViewSize = self.scrollView.frame.size;
    self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * self.pageImages.count, pagesScrollViewSize.height);

    // 5
    [self loadVisiblePages];
}

@end

Answer 1

I finally figured it out.

User error. I had the View not my ViewController linked as the delegate in the storyboard.

Thanks for viewing and I hope this helps someone else out so that they don’t have to pull their hair out for 2 days!