Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to zoom a UIScrollView inside of a UICollectionViewCell?

Tags:

I'm trying to add a UIScrollView inside of a UICollectionViewCell. The idea is that you can use pinch to zoom the UIScrollView (and with it, the image within), but the scrollview doesn't seem to handle any gesture. I'm guessing they are being caught by the UICollectionView.

I've set the delegate of the UIScrollView to be the UICollectionViewCell, but none of the delegate methods are being called.

EDIT: I've made a github repo with the code (simplified as much as I could). Even though it's just a few lines of code, I cannot see what I did wrong.

EDIT2: After the answer was found, I added the fixes to the above-mentioned repo, hope others find it helpful too :)

https://github.com/krummler/gallery-pinchzoom-example

like image 355
Kevin R Avatar asked Jun 06 '13 11:06

Kevin R


2 Answers

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!

like image 190
mourodrigo Avatar answered Oct 11 '22 05:10

mourodrigo


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.

like image 31
matehat Avatar answered Oct 11 '22 06:10

matehat