UICollectionView animating cell size change causes undesired behavior

Question

I have a UICollectionViewController that using a standard UICollectionViewFlowLayout to display a single vertical column of cells. I am attempting to create an expand/collapse animation on a cell when a cell is tapped. I use the following code to accomplish this:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath (NSIndexPath *)indexPath
{
    [self.feedManager setCurrentlySelectedCellIndex:indexPath.item];
    [self.collectionView performBatchUpdates:nil completion:nil];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //Return the size of each cell to draw
    CGSize cellSize = (CGSize) { .width = 320, .height = [self.feedManager heightForCellAtIndexPath:indexPath] };
    return cellSize;
}

The 'selectedCellIndex' property on my managing object tells the data model to return an expanded or collapsed size inside of heightForCellAtIndexpath:

[self.collectionView performBatchUpdates:nil completion:nil];

Then the performBatchUpdates:completiong: method animates this size change nicely. However! When the animation happens, the expanding cell may cause a partially visible cell at the bottom of the screen to go off the screen.

If this is the case and I subsequently collapse this cell, the now off screen cell will snap to its old position without animation, while all of the other visible cells will animate as desired. My intuition says that this is the correct behaviour since the cell is off screen when the collapse animation is being performed, and is not being included in the animation rendering process. My question becomes, how do I prevent this from happening?

I would prefer all of the cells to animate together regardless if they are off screen or not. Any thoughts?

Answer 1

This is a UICollectionViewFlowLayout bug, but there is a workaround. The problem is that the attributes returned by initialLayoutAttributesForAppearingItemAtIndexPath: have the wrong frames. Specifically, they have the frames of the final, on screen position rather than the initial, off screen position. You just need to override this method and return correct frames. The basic structure of the override would look something like this:

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{
    UICollectionViewLayoutAttributes *pose = [super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];
    if (<test for incorrect frame>) {
        CGRect frame = pose.frame;
        frame.origin.y = <calculate correct frame>;
        pose.frame = frame;
    }
    return pose;
}

You will be responsible for identifying scenarios where the frames need to be adjusted, which may involve keeping your own internal state. I haven't worked through this logic, but I did do a crude test and was able to get smooth animation.

Generalizing a bit, it is my experience that there UICollectionViewFlowLayout is so buggy and there are so many corner cases to contend with if you've got items moving on and off screen combined with any inserts, deletions, or moves, that I've found it easier to roll my own simple layouts. If you're not going to do any inserts, deletions, or moves, then overriding UICollectionViewFlowLayout may well be your best bet.

Let me know if you need more help.

EDIT

If you're interested in looking at a 3-rd party layout, I open sourced my custom grid layout VCollectionViewGridLayout and added an example project demonstrating smooth expanding cell height. Try running the Expand project. There is also a Sort & Filter project with animated sorting and filtering. Both projects let you toggle between flow layout and grid layout so you can see the improvement.