How can I keep the same collection view cells on the screen when zooming a UICollectionView?

Question

I have a UICollectionView that uses a UICollectionViewLayout subclass for its layout. The layout is a simple grid.

When I zoom the collection view in or out, the positions of the cells on the screen change. In some cases, when zooming in, cells move off the screen entirely. I zoom the cells with a pinch gesture recognizer that sends x and y scale values to the layout class and then invalidates the layout.

As the cells get bigger, they move because their origins are calculated relative to the 0,0 position of the collection view.

I want to be able to zoom the collection view in, while having as many of the cells that were originally on the screen stay there. A good solution would be to have the cell in the center of the screen stay in the center as it becomes larger. Cells around the center cell would grow, and that might push them off the screen.

I've tried adjusting the collection view's content offset, but I haven't achieved what I want. I'm not quite sure how to calculate its new value, and I've learned that the changes caused by invalidateLayout do not happen immediately.

I tried a key value observer for the collection view's content size, but that caused stuttering because the changes in the KVO method happened well after the original zooming.

I've also worked a little bit with scrollToItemAtIndexPath, but the code in my full app is not guaranteed to have a cell at the exact center of the screen. That solution is less desirable for me.

Here is the code where the pinch recognizer sends changes to the layout class:

    [self.gridLayout updateCellWidthScale:xScale];
    [self.gridLayout updateCellHeightScale:yScale];

    [self.gridLayout invalidateLayout];

Here is the code in the layout class (numberOfRows and numberOfColumns are both set to 20):

-(id)initWithNumberOfRows:(NSUInteger)numberOfRows
       andNumberOfColumns:(NSUInteger)numberOfColumns
{
    self = [super init];
    if (self)
    {
        _numberOfRows = numberOfRows;
        _numberOfColumns = numberOfColumns;

        _cellWidth = 80.0f;
        _cellHeight = 80.0f;

        _cellWidthScale = 1.0f;
        _cellHeightScale = 1.0f;
    }
    return self;
}

-(void)updateCellWidthScale:(CGFloat)newWidthScale
{
    self.cellWidthScale *= newWidthScale;
}

-(void)updateCellHeightScale:(CGFloat)newHeightScale
{
    self.cellHeightScale *= newHeightScale;
}

-(CGSize)collectionViewContentSize
{
    CGSize returnValue = CGSizeMake(self.numberOfColumns * self.cellWidth * self.cellWidthScale,
                                    self.numberOfRows * self.cellHeight * self.cellHeightScale);
    return returnValue;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path
{
    UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
    CGRect rect = [self frameForItemAtIndexPath:path];

    attributes.size = CGSizeMake(rect.size.width, rect.size.height);
    attributes.center = CGPointMake(rect.origin.x + (0.5f * rect.size.width),
                                    rect.origin.y + (0.5f * rect.size.height));

    return attributes;
}

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *returnValue = [[NSMutableArray alloc] init];

    for (NSInteger i=0; i < self.numberOfRows; i++)
    {
        for (NSInteger j=0; j < self.numberOfColumns; j++)
        {
            NSIndexPath* indexPath = [NSIndexPath indexPathForItem:j inSection:i];
            CGRect frame = [self frameForItemAtIndexPath:indexPath];

            if (CGRectIntersectsRect(frame, rect))
            {
                [returnValue addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
            }
        }
    }

    return returnValue;
}

- (CGRect)frameForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGRect returnValue = CGRectMake(indexPath.section * self.cellWidth * self.cellWidthScale,
                                    indexPath.row * self.cellHeight * self.cellHeightScale,
                                    self.cellWidth * self.cellWidthScale,
                                    self.cellHeight * self.cellHeightScale);

    return returnValue;
}

score 1 · Answer 1 · answered Jan 07 '16 at 17:14

You need to set your collectionView contentOffset to the value it was before starting to zoom multiplied the gestures scale. Your pinch recognizer method should look like this (you need to add some more code to stop changing contentOffset when reaching the MAXIMUM_SCALE or MINIMUM_SCALE).

- (void)didReceivePinchGesture:(UIPinchGestureRecognizer*)gesture
{
    static CGFloat scaleStart;
    static CGPoint p;

    if (gesture.state == UIGestureRecognizerStateBegan)
    {
        scaleStart = self.scale;
        p = self.collectionView.contentOffset;   
    }
    else if (gesture.state == UIGestureRecognizerStateChanged)
    {
        CGFloat tempScale = scaleStart * gesture.scale;
        if (tempScale < MINMUM_SCALE)
        {
            self.scale = MINMUM_SCALE;
        }
        else if (tempScale > MAXIMUM_SCALE)
        {
            self.scale = MAXIMUM_SCALE;
        }
        else
        {
            self.scale = tempScale ;
        }

        dispatch_async(dispatch_get_main_queue(), ^{

            [self.collectionView.collectionViewLayout invalidateLayout];

            self.collectionView.contentOffset = CGPointMake(0, p.y * gesture.scale);
        });
    }
}

How can I keep the same collection view cells on the screen when zooming a UICollectionView?

1 Answers1