Zoom & Pan in UIImageView inside UIScrollView

Question

I have a UIScrollView filled with UIImageView. The UIScrollView are paging enabled to let the users to "flip" those images. Each UIImageView has UIPinchGestureRecognizer for pinch zoom, and UIPanGestureRecognizer for to pan that image when zoomed in.
As probably you have noticed, what I'd like to achieve is just like what iBooks does in its application.

However, I have difficult times to get this work.

In my "BookPageViewController", I have set up UIScrollView, then fill them with images from the folder based on data (page numbers, file names, etc) from sqlite.

_pageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

NSUInteger pageCount = [pages count];

for (int i = 0; i < pageCount; i++) {

    CGFloat x = i * self.view.frame.size.width;

    // Page Settings
    UIImageView *pageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, 0, self.view.frame.size.width, self.view.frame.size.height)];

    pageView.backgroundColor = [UIColor greenColor];
    pageView.image = [pages objectAtIndex:i];
    pageView.userInteractionEnabled = YES;
    pageView.tag = i;

    // Gesture Reocgnisers
    UIPinchGestureRecognizer *pinchGr = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchImage:)];
    pinchGr.delegate = self;
    [pageView addGestureRecognizer:pinchGr];

    UIPanGestureRecognizer *panGr = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panImage:)];
    [pageView addGestureRecognizer:panGr];

    // Finally add this page to the ScrollView
    [_pageScrollView addSubview:pageView];
}  

_pageScrollView.contentSize = CGSizeMake(self.view.frame.size.width * pageCount, self.view.frame.size.height);
_pageScrollView.pagingEnabled = YES;
_pageScrollView.delegate = self;

[self.view addSubview:_pageScrollView];

And with the help of another good questions here in Stackoverflow, I have put those:

- (void) pinchImage:(UIPinchGestureRecognizer*)pgr {

  [self adjustAnchorPointForGestureRecognizer:pgr];

  if ([pgr state] == UIGestureRecognizerStateBegan || [pgr state] == UIGestureRecognizerStateChanged) {
    if ([pgr scale]) {
        NSLog(@"SCALE: %f", [pgr scale]);
        [pgr view].transform = CGAffineTransformScale([[pgr view] transform], [pgr scale], [pgr scale]);
        [pgr setScale:1];
    } else {
        NSLog(@"[PAMPHLET PAGE]: The image cannot be scaled.");
    }
  }
}

My problem is, when I zoom in the one of the UIImageView with Pinch Gesture, the image exceeds (go over) to the next image and hides it. I believe that there should be the way to "limit" the zoom in/out and the size of UIImageView (not UIImage itself), but I don't know where to go from here. I have also put a code to limit the scale something like:

([pgr scale] > 1.0f && [pgr scale] < 1.014719) || ([pgr scale] < 1.0f && [pgr scale] > 0.98f)

but it didn't work...

I know it's not hard for ios professionals, but I'm quite new to objective-c, and this is my first time to develop real application. If this is not a good practice, I also would like to know any ideas to achieve just how to do this like ibooks do (e.g. put UIImageView in UIScrollView, then put the UIScrollView to another UIScrollView)...

Sorry for another beginner question, but I really need help.
Thanks in advance.

I have same case, wondering if you were able to find solution for that — RollRoll
Hi. Unfortunately, my code is completely messed up and my project was closed. However, I have achieved "almost" what I wanted. Probably I can post some code here for you if you are ok with that. — Faust V

fishinear fishinear · Accepted Answer · 2013-03-25T11:45:38

Without trying it out myself, my first guess would be that the transform on the UIImageView also transforms its frame. One way to solve that, would be to put the UIImageView in another UIView, and put that UIView in the UIScrollView. Your gesture recognizers and the transform would still be on the UIImageView. Make sure the UIView's clipsToBounds property is set to YES.

Zoom & Pan in UIImageView inside UIScrollView

1 Answers