Zoom into the content of a single cell in a UICollectionView

Question

I am trying to achieve the same behaviour as in the Photos app when one image is open in full screen; i.e., I want to be able to scroll between my different images and also to pinch to zoom in any of them. As in the Photos app, after I have zoomed into a particular image, I would like to be able to scroll between the different images of my gallery.

My situation is as follows: I have a UICollectionView, a custom UICollectionViewFlowLayout where the itemSize is set to be the size of the screen, and a custom UICollectionViewCell that has an UIImageView. That works just fine scrolling through the different photos, the problem is scrolling into them.

The first approach I tried is the one depicted in the WWDC 2012 session: 'Advanced Collection Views and Building Custom Layouts’. The effect one gets with this approach is the cell scaling properly but then it will overlap with the cells next to it creating an undesirable effect.

The second approach is like the one suggested in WWDC 2010 session: ‘Designing Apps with Scroll Views’. However, I am not entirely sure this approach would work having a UICollectionView instead of a UIScrollView + subviews. I set my view controller as the UIScrollViewDelegate and override viewForZoomingInScrollView: where I return the UIImageView of the visible cell at that given point. Nothing happens if I do that. I have also tried returning the cell and in that case the whole layout of the UICollectionView is messed up. I have taken a look at the sample project Apple put together (PhotoScroller) that successfully implements what I want, but in there they just have a UIImageView as a subview of the UIScrollView.

I think that in order to implement the Photos app behaviour with a UICollectionView, I need to do that by going with the first approach and modifying the layout attributes of the other cells in my collection view and not only the one being zoomed in.

That sounds like a quite low level solution to me and I was wondering if somebody is aware of a better approach to this problem.

Answer 1

After a few more days investigating this, I came up with a solution where I had to make some compromises but it is acceptable for my requirements.

What I ended up doing is to have a UIScrollView as the top-most view of my custom UICollectionViewCell and adding the UIImageView as a subview of that UIScrollView. The first problem I need to solve when I added that is that UIScrollViews do not play well with AutoLayout as explained here. So, if you want your image to be full screen both in portrait and landscape, remember to use the appropriate autoresizing masks. By doing that and returning my UIImageView in viewForZoomingInScrollView: I got the zooming effect I was looking for.

The compromise I had to do though was that I do not allow the user to scroll between different images if there is any zoom applied (i.e., zoom scale is different than 1.0). Apart from that, it works fine.