UIScrollView custum paging distance

Question

Hey!

I have a UIImage (Image's width is > 320px) in a UIScrolView (covers full width of screen) and want a paging effect.

All the tutorials/examples I found explain how to do it with multiple UIImages or UIVIews, but I only have 1 UIImage in the UIScrollView. My aim is it to create a 'tape measure' like effect. and the scrollview should 'page' on every marker of the tape?

How can I do the paging on distances less the the width of the UIScrollView?!

Cheers

Answer 1

I can't think of a cleaner solution than doing the math on the fly. If the desired page length is 100px than "slide" the UIImage so that it stays relative to the actual page. So something akin to:

CGFloat pageWidth = 100;
int numPages = ceilf(myImageView.bounds.size.width / pageWidth);
scrollView.contentSize = CGSizeMake(numPages * scrollView.bounds.size.width,
                                  scrollView.bounds.size.height);

Then subclass the scroll view's layoutSubviews method:

- (void)layoutSubviews {
    int numPages = ceilf(myImageView.bounds.size.width / pageWidth);
    CGRect visibleBounds = [self bounds];
    CGFloat start = visibleBounds.origin.x;
    CGFloat offset = start / pageWidth;
    myImageView.frame = CGRectMake(offset, myImageView.frame.origin.y,
                                   myImageView.frame.size.width,
                                   myImageView.frame.size.height);
}   

I haven't tested this at all but hopefully it gets you on a working track. What this should be doing is moving the image whenever you scroll so that it looks like each "page" only moves the image 100px.