Zoom on a two dimensional UICollectionView

Question

I created a UICollectionView which is horizontal and vertically. It has different UICollectionViewCells. Everything is layouted correctly. Now I am trying to make it zoomable. The UICollectionViewCells are resized correctly too. Every time the UIPinchGesture occures, I set the itemSize inside the UICollectionViewLayout dependend on the scale.

TestLayout *layout =  (TestLayout *) self.collectionViewLayout;
CGSize newItemSize = CGSizeMake(_sizeItem.width * gesture.scale, 
                                _sizeItem.height * gesture.scale);
[layout setItemSize:newItemSize];

Here you can see the method setItemSize I am calling inside my CustomLayout.

- (void)setItemSize:(CGSize)itemSize
{
    if (CGSizeEqualToSize(self.itemSize, itemSize)) return;

    _itemSize = itemSize;

//    [self prepareLayout];
    [self invalidateLayout];
}

My problem is know, all items resize to the right bottom and I don't know how to focus exactly on the element my UIPinchGesture was on.

I tried to change the contentOffset every time the gesture occures like this:

CGPoint posInView = [gesture locationInView:self];
CGPoint pointPinchTouch = CGPointMake(posInView.x - self.contentOffset.x,
                                      posInView.y - self.contentOffset.y);
CGPoint newOffset = CGPointMake(self.contentOffset.x * (gesture.scale * 2),
                                self.contentOffset.y * (gesture.scale * 2));
[self setContentOffset:newOffset animated:NO];

But I never managed to stay on the CGPoint my UIPinchGesture was executed.

Furthermore when scrolling on the whole UICollectionView, my contentOffset is still {0,0} when the scroll didn't end. So start pinching I always end up in the top left corner. Because the UICollectionView seems not to be designed to be used horizontal and vertical at the same time, thats why I also can't use the delegate methods of UIScrollView for zooming. Maybe somebody can tell me how to solve this problem.

Answer 1

Let me see if I understand the problem. You are trying to zoom in on a specific cell by changing the item size, but the size of ALL the cells are changing instead of the one that was pinched?

If my understanding is correct, then I can help. Changing FlowLayout.itemSize changes the size for all cells in the collection view. If you want to set the item size of specific cells, you should override UICollectionViewDelegateFlowLayout's sizeForItemAtIndexPath. In the sizeForItemAtIndexPath method, you can check the itemAtIndexPath against the cell that was pinched and return a different size just for that cell.

The other part of your question (about the scrolling and offset) is not really clear to me. You are right that collection views are supposed to be used either horizontally or vertically but not both. Perhaps that is what causes the problem?