UICollectionView full-screen zoom by UICollectionViewCell

Question

How to zoom in UICollectionViewCell so that it displays in full screen? I expanded the UICollectionViewFlowLayout and, in my opinion, the controller, when the cell is pressed, I do this:

 CGPoint pointInCollectionView = [gesture locationInView:self.collectionView]; NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView]; UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; NSLog(@"Selected cell %@", selectedIndexPath); 

Not quite sure where to go from here. Should a UICollectionView be responsible for displaying an enlarged cell? Or should I create a new view controller that displays the contents of the cell (image) in full screen?

Answer 1

I made a decision here and modified it a bit to work with the collection view. I also added a transparent gray background to slightly obscure the original view (assuming the image does not occupy the entire frame).

 @implementation CollectionViewController { UIImageView *fullScreenImageView; UIImageView *originalImageView; } ... // in whatever method you're using to detect the cell selection CGPoint pointInCollectionView = [gesture locationInView:self.collectionView]; NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView]; UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; originalImageView = [selectedCell imageView]; // or whatever cell element holds your image that you want to zoom fullScreenImageView = [[UIImageView alloc] init]; [fullScreenImageView setContentMode:UIViewContentModeScaleAspectFit]; fullScreenImageView.image = [originalImageView image]; // *********************************************************************************** // You can either use this to zoom in from the center of your cell CGRect tempPoint = CGRectMake(originalImageView.center.x, originalImageView.center.y, 0, 0); // OR, if you want to zoom from the tapped point... CGRect tempPoint = CGRectMake(pointInCollectionView.x, pointInCollectionView.y, 0, 0); // *********************************************************************************** CGRect startingPoint = [self.view convertRect:tempPoint fromView:[self.collectionView cellForItemAtIndexPath:selectedIndexPath]]; [fullScreenImageView setFrame:startingPoint]; [fullScreenImageView setBackgroundColor:[[UIColor lightGrayColor] colorWithAlphaComponent:0.9f]]; [self.view addSubview:fullScreenImageView]; [UIView animateWithDuration:0.4 animations:^{ [fullScreenImageView setFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)]; }]; UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(fullScreenImageViewTapped:)]; singleTap.numberOfTapsRequired = 1; singleTap.numberOfTouchesRequired = 1; [fullScreenImageView addGestureRecognizer:singleTap]; [fullScreenImageView setUserInteractionEnabled:YES]; ... - (void)fullScreenImageViewTapped:(UIGestureRecognizer *)gestureRecognizer { CGRect point=[self.view convertRect:originalImageView.bounds fromView:originalImageView]; gestureRecognizer.view.backgroundColor=[UIColor clearColor]; [UIView animateWithDuration:0.5 animations:^{ [(UIImageView *)gestureRecognizer.view setFrame:point]; }]; [self performSelector:@selector(animationDone:) withObject:[gestureRecognizer view] afterDelay:0.4]; } -(void)animationDone:(UIView *)view { [fullScreenImageView removeFromSuperview]; fullScreenImageView = nil; } 

Answer 2

You can simply use a different layout (similar to the one you already have), in which the item is larger, and then setCollectionViewLayout:animated:completion: in the collection.

You do not need a new view controller. Your data source remains the same. You can even use the same cell class, just make sure it knows when to compose things for the larger cell contents, and when not to.

I am absolutely sure that how Facebook does this in the document, since there is no reloading of content, i.e. [collectionView reloadData] will never be called (would cause the scroll offset to flicker and reset, etc.). This is apparently the most direct solution.

 CGPoint pointInCollectionView = [gesture locationInView:self.collectionView]; NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView]; UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath]; NSLog(@"Selected cell %@", selectedIndexPath); __weak typeof(self) weakSelf = self; [self.collectionView setCollectionViewLayout:newLayout animated:YES completion:^{ [weakSelf.collectionView scrollToItemAtIndexPath:selectedIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO]; }]; 

Answer 3

You can use MWPhotoBrowser , which is suitable for your problem. It supports the Grid with Tap to Zoom function. you can get it from here

Grid

To show the thumbnail grid correctly, you must ensure that the enableGrid property is set to YES and implement the following delegate method:

 (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index; 

The photo browser can also start in the grid by enabling the startOnGrid property.