Zoom into cell on selection with UICollectionView

Question

I have a grid of images that are handled by a UICollectionView. What I would like to do is transition to another View Controller on selection of a cell by zooming into the image and have that image take up a large portion of the screen in the child View Controller. Is there any good way of creating this behavior.

Thanks for all the help!

Answer 1

In Child view controller You can add a scroll view and can add property like that.

   scrollView.bouncesZoom = YES;
   scrollView.delegate = self;
   scrollView.clipsToBounds = YES;

Add an image view :-

   imageView = [[UIImageView alloc] initWithImage:[UIImage imgnamed:@"image01.png"]];
   imageView.userIntractionEnabled = YES;
   imageView.autoSizingMask = UIViewAutoresizingFlexibleWidth;

   [scrollview addSubView:imageView];

Calculate minimum scale zoom level :-

   float minimumScale = [scrollView frame].size.width / [imageView frame].size.width;
   scrollView.maximumZoomScale = 3.0   // you can exeed as per your requirment
   scrollView.minimumZoomScale = minimumScale;
   scrollView.zoomScale = minimumScale;

Hope this help you. If Any question or problem then ask in comments.

Answer 2

For this, I would use a custom segue. In the UICollectionView documentation, Apple recommends using a fake cell when moving it across your CollectionView. You can do this with storyboard or programatically. Inside your -prepareForSegue: method, place the image from the selected cell on the screen centered over the cell, then animate the scaling in the segue.

Custom Segue guide: https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/CreatingCustomSegues/CreatingCustomSegues.html

Ray's site is also boss: http://www.raywenderlich.com/5191/beginning-storyboards-in-ios-5-part-2