How to zoom a UIScrollView inside of a UICollectionViewCell? How to zoom a UIScrollView inside of a UICollectionViewCell? ios ios

How to zoom a UIScrollView inside of a UICollectionViewCell?


I just made an implementation for SWIFT 3 on iOS 9.3+ and all i done was:

1. Place the image view inside a scrollview

storyboard example

2. Connect the scrollview delegate to collectionview cell class

3. Implement the code below on the collectionview subclass

class FullScreenImageTextDetailCollectionViewCell: UICollectionViewCell, UIScrollViewDelegate {     @IBOutlet var scrollview: UIScrollView!     @IBOutlet weak var backgroundImageView: UIImageView!     override func awakeFromNib() {         self.scrollview.minimumZoomScale = 0.5         self.scrollview.maximumZoomScale = 3.5         self.scrollview.delegate = self     }     func viewForZooming(in scrollView: UIScrollView) -> UIView? {         return self.backgroundImageView     }}

No gesture recognizer adding or removing on the parent collectionview controller was necessary, worked like a charm!

Thanks for previous examples for reaching this!


You might want to try manipulating the UIGestureRecognizers in order to do that. In the GalleryViewController:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView                   cellForItemAtIndexPath:(NSIndexPath *)indexPath {    GalleryImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"galleryImageCell" forIndexPath:indexPath];    ImageContext *imageContext = [self.images objectAtIndex:indexPath.row];    cell.imageContext = imageContext;    [self.collectionView addGestureRecognizer:cell.scrollView.pinchGestureRecognizer];    [self.collectionView addGestureRecognizer:cell.scrollView.panGestureRecognizer];    return cell;}

From Apple's documentation on UIView:

Attaching a gesture recognizer to a view defines the scope of the represented gesture, causing it to receive touches hit-tested to that view and all of its subviews. The view retains the gesture recognizer.

So you'll also want to make sure to remove them when the cell is not showing anymore.

- (void)collectionView:(UICollectionView *)collectionView   didEndDisplayingCell:(UICollectionViewCell *)cell     forItemAtIndexPath:(NSIndexPath *)indexPath {    // Get the cell instance and ...    [self.collectionView removeGestureRecognizer:cell.scrollView.pinchGestureRecognizer];    [self.collectionView removeGestureRecognizer:cell.scrollView.panGestureRecognizer];}

Since you're not modifying the UIGestureRecognizer's delegate, only its scope, it will still control the zooming of just that cell's scrollview.

EDIT:

I added the panGestureRecognizer to the above examples, following a suggestion from the OP that it was needed. The zooming itself is completely handled by the pinchGestureRecognizer, but it's true that in most cases, after zooming an image to a point where only a subset of it is visible, you'll want to pan to move the visible portion around. That is, it's part of a proper zooming experience.


Please add scrollview in your cell and your current cell image view add in scrollview.then use below code:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    ImageContext *context = [self.images objectAtIndex:indexPath.row];    ImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"imageCell" forIndexPath:indexPath];    cell.cellScrollView.autoresizesSubviews = YES;    cell.cellScrollView.multipleTouchEnabled =YES;    cell.cellScrollView.maximumZoomScale = 4.0;    cell.cellScrollView.minimumZoomScale = 1.0;    cell.cellScrollView.clipsToBounds = YES;    cell.cellScrollView.delegate = self;    cell.cellScrollView.zoomScale = 1.0;    [cell.imageView setImage:[UIImage imageNamed:context.thumbImageUrl]];return cell;} -(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {   NSLog(@"%i",scrollView.subviews.count);  for (UIView *v in scrollView.subviews) {    if ([v isKindOfClass:[UIImageView class]]) {        return v;      }  }

}


matomo