How to animate a frame change of a UICollectionViewCell

Question

I have a UICollectionView with a custom layout to have 2 different cell sizes (see the top part of the picture below).

When I delete the first cell with

[myCollectionView deleteItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:0 inSection:0]]];

I want the second cell to become smaller and take the place of the first cell. I also want the third cell to become bigger and take the place of the second cell.

Fortunately, it seems that the layout is doing those things by itself because it reloads the frame of the cells (all of them) when one is deleted.

The problem is that the frames are refreshed instantly without animation. The only animation that occurs is when the cells are moved to their respective place. See the result below (50% speed).

How can I have a smooth animation that will resize the second and third cells to their new size while they are moved?

score 0 · Answer 1 · answered Jan 29 '16 at 20:03

0

I'm not 100% sure what you want, but if you want to time something with the animation, put it in an animation block with the delete. I think something like this will work:

[myCollectionView performBatchUpdates:^{
   [myCollectionView deleteItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:0 inSection:0]]];
   // do the size changes here (or whatever is not animating right)
} completion:nil];

answered Jan 29 '16 at 20:03

Lou Franco

87,846
14
132
192

With this technique I can animate the color change but not the resize because when I delete the cell, the `prepareLayout` of my `UICollectionViewLayout` gets called and it sets the frame of every cell of the collection. So even if I change the frame within the `performBatchUpdates`, the cells are resized without animation. I hope I am clear enough :S – Raphael Royer-Rivard Jan 29 '16 at 20:45
Check this out: https://www.objc.io/issues/12-animations/collectionview-animations/ -- I think you are going to need to subclass `UICollectionViewLayout` – Lou Franco Jan 29 '16 at 21:02
Yeah, I've read this this article and I am already subclassing `UICollectionViewLayout` – Raphael Royer-Rivard Jan 29 '16 at 21:06
I am now trying to always have the same frame size (the big one) and only resize a container inside the cell so that the cell would still have the same frame size. But when I resize the container, its subviews are not resizing even though I've set their constraints. For example, the image view has 4 spacing constraints of 0 to its superview (which is the container) but it stays as big as it was before the resize of the container. Do you have an idea why? – Raphael Royer-Rivard Jan 29 '16 at 21:52

score 0 · Accepted Answer · edited May 23 '17 at 12:31

Okay, I found a solution to my problem. Here is a better explanation of what I was experiencing.

Problem

When the I was deleting the first item of my collection, the prepareLayout method of my custom UICollectionViewLayout was called, which was recalculating the frame of my cells. Then, the layoutAttributesForElementsInRect method was applying all those new frames to the cells. Therefore it explains why my cells were resized instantly.

It also seems that the animation on frame is not always possible. In these cases, we must use the position, bounds and transform animations.

Solution

Just before the animations happen, the finalizeCollectionViewUpdates method gets called to let us adjust them. I tried to change the bounds animation for hours before finally understanding that the right one was transform.scale. I have a more detailed solution there: https://stackoverflow.com/a/35141936/1084822

How to animate a frame change of a UICollectionViewCell

2 Answers2

Problem

Solution