By Ignatius Tremor


2012-12-08 17:51:08 8 Comments

What I want to do is change the size of an UICollectionViewCell, and to animate that change, when the cell is selected. I already managed to do that unanimated by marking a cell as selected in collectionView: didSelectItemAtIndexPath: and then calling reloadData on my UICollectionView, displaying the selected cell with a different size.

Nevertheless, this happens all at once, and I have no clue how to get that change in size animated. Any ideas?

I already found Animate uicollectionview cells on selection, but the answer was to unspecific for me and I didn't figure out yet if it could also help me in my case.

8 comments

@Chase Roberts 2012-12-08 18:03:19

[UIView transitionWithView:collectionView 
                  duration:.5 
                   options:UIViewAnimationOptionTransitionCurlUp 
                animations:^{

    //any animatable attribute here.
    cell.frame = CGRectMake(3, 14, 100, 100);

} completion:^(BOOL finished) {

    //whatever you want to do upon completion

}];

Play around with something along those lines inside your didselectItemAtIndexPath method.

@Ignatius Tremor 2012-12-08 18:23:09

Playing around with that seems to have solved my problem. I'm right no refining my solution on the basis of your proposal for a bit more elegance in order to post it as soon as I'm done. Thank you very much so far.

@Mike M 2013-11-11 17:28:24

It seems to work but the results are horrible visually. It seems to stutter to a halt. Any ideas?

@Pavel Gurov 2016-04-25 07:42:33

see my answer below

@phatmann 2017-12-14 20:38:28

Using performBatchUpdates will not animate the layout of the cell contents. Instead, you can use the following:

    collectionView.collectionViewLayout.invalidateLayout()

    UIView.animate(
        withDuration: 0.4,
        delay: 0.0,
        usingSpringWithDamping: 1.0,
        initialSpringVelocity: 0.0,
        options: UIViewAnimationOptions(),
        animations: {
            self.collectionView.layoutIfNeeded()
        },
        completion: nil
    )

This gives a very smooth animation.

This is similar to Ignatius Tremor's answer, but the transition animation did not work properly for me.

See https://github.com/cnoon/CollectionViewAnimations for a complete solution.

@Cristian Pena 2017-09-05 13:24:45

A good way to animate the cell size is to override isSelected in the collectionViewCell itself.

class CollectionViewCell: UICollectionViewCell {

    override var isHighlighted: Bool {
        didSet {
            if isHighlighted {
                UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {
                    self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
                }, completion: nil)
            } else {
                UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {
                    self.transform = CGAffineTransform(scaleX: 1, y: 1)
                }, completion: nil)
            }
        }
    }

}

@Mischanya Schtrigel 2018-05-09 13:25:46

Nice workaround!

@ShadeToD 2019-07-23 15:02:34

You said "A good way to animate the cell size is to override isSelected in the collectionViewCell itself." , but u override isHighlighted. These are 2 different states.

@Pavel Gurov 2016-03-14 19:18:52

This is the simplest solution I have found - works like a charm. Smooth animation, and does not mess up the layout.

Swift

    collectionView.performBatchUpdates({}){}

Obj-C

    [collectionView performBatchUpdates:^{ } completion:^(BOOL finished) { }];

The blocks (closures in Swift) should be intentionally left empty!

@tzaloga 2016-06-23 12:51:42

I've tried this solution with reloadData, moveItemAtIndexPath: toIndexPath:, reloadItemsAtIndexPaths: inside updates block, then realized that block should be left empty. Now really works like a charm.

@user1244109 2017-08-31 07:25:48

yep, works, thanks

@Alexander Tkachenko 2017-12-12 08:00:00

This works like a charm. Thank you

@phatmann 2017-12-14 20:01:40

Will not work with auto-resizing cells.

@Eonil 2015-12-02 13:36:16

This worked for me.

    collectionView.performBatchUpdates({ () -> Void in
        let ctx = UICollectionViewFlowLayoutInvalidationContext()
        ctx.invalidateFlowLayoutDelegateMetrics = true
        self.collectionView!.collectionViewLayout.invalidateLayoutWithContext(ctx)
    }) { (_: Bool) -> Void in
    }

@Pavel Gurov 2016-03-14 19:19:35

the insides of performBatchUpdates are not necessary, see my answer

@Ignatius Tremor 2012-12-08 22:58:28

With the help of Chase Roberts, I now found the solution to my problem. My code basically looks like this:

// Prepare for animation

[self.collectionView.collectionViewLayout invalidateLayout];
UICollectionViewCell *__weak cell = [self.collectionView cellForItemAtIndexPath:indexPath]; // Avoid retain cycles
void (^animateChangeWidth)() = ^()
{
    CGRect frame = cell.frame;
    frame.size = cell.intrinsicContentSize;
    cell.frame = frame;
};

// Animate

[UIView transitionWithView:cellToChangeSize duration:0.1f options: UIViewAnimationOptionCurveLinear animations:animateChangeWidth completion:nil];

For further explanation:

  1. One of the most important step is the invalidateLayout call on the UICollectionView.collectionViewLayout you are using. If you forget it, it is likely to happen that cells will grow over the borders of your collection - that's something you most probably don't want to happen. Also consider that your code should at some point present the new size of your cell to your layout. In my case (I'm using an UICollectionViewFlowLayout), I adjusted the collectionView:layout:sizeForItemAtIndexPath method to reflect the new size of the modified cell. Forgetting that part, nothing will happen to your cell sizes at all if you first call invalidateLayout and then try to animate the change in size.

  2. Most strange (at least to me) but important is that you call invalidateLayout not inside the animation block. If you do so, the animation won't display smooth but glitchy and flickering.

  3. You have to call UIViews transitionWithView:duration:options:animations:completion: method with the cell as argument for transitionWithView, not the whole collection view, because it's the cell you want to get animated, not the entire collection.

  4. I used the intrinsicContentSize method of my cell to return the size I want - in my case, I grow and shrink the width of the cell to either display a button or hide it, depending on the selection state of the cell.

I hope this will help some people. For me it took several hours to figure out how to make that animation work correctly, so I try to free others from that time-consuming burden.

@Chase Roberts 2012-12-12 20:13:34

Nice job posting a follow up.

@Ignatius Tremor 2012-12-13 14:25:18

Thanks, and thank you for your help :)

@Austin 2013-02-09 20:24:24

what is actorCell defined as? Should that be what you want to appear in the enlarged view?

@Ignatius Tremor 2013-02-09 21:01:21

I renamed the cell as "cellToChangeSize". The name to be found in my post before editing was just some remains of the copy-pasting out of my project, sorry for that.

@Timuçin 2013-06-07 12:07:02

"I adjusted the collectionView:layout:sizeForItemAtIndexPath method to reflect the new size of the modified cell." How did you do that?

@matehat 2013-07-02 02:22:54

The part about avoiding the retain cycle, shouldn't it rather be declared outside the block? And since you're using uicollectionview (which is iOS 6+), the preferred qualifier is __weak now. If cell appears in your block, a strong reference is created, so you're not avoiding any retain cycle. Nevertheless, thanks a lot for your follow up, very helpful!

@Ignatius Tremor 2013-07-30 20:33:38

Hey @matehat, I changed the code now to reflect your annotation. Glad to hear that you like the answer anyway :)

@Daniel Galasko 2013-10-01 13:18:00

I just want to add here that you do not need to use __weak. A retain cycle generally occurs when your block retains some object that itself retains the block; i.e. going self.block = ^{self.someInteger++;}. Since your cell is not retaining the block, no retain cycles:)

@Nailer 2013-10-04 08:46:39

A little note of advice to those who read this: Using AutoLayout in your cells might break this. I had to change the height constraint of the cell instead, and then use [cell layoutIfNeeded] inside the animation block

@openfrog 2013-10-17 11:23:04

The cell change is animated but the collection view will jump to the new layout.

@bcattle 2014-02-07 02:12:15

Regarding @openfrog's comment, if you're trying to animate a change in height you'd need to use transitionWithView:duration:options:animations:completion: with the whole collection view as argument, right?

@Cindeselia 2014-05-22 07:39:42

This didn't work for me. I was able to change the size of the cell's frame, but nothing inside the cell changes size. I even tried modifying the individual subitems' frames, but they always stay the same.

@jonsibley 2013-06-16 22:44:47

I've had success animating changes by using -setCollectionViewLayout:animated: to create a new instance of the same collection view layout.

For example, if you're using a UICollectionViewFlowLayout, then:

// Make sure that your datasource/delegate are up-to-date first

// Then animate the layout changes
[collectionView setCollectionViewLayout:[[UICollectionViewFlowLayout alloc] init] animated:YES];

@phatmann 2014-06-18 00:20:41

This gives the smoothest animation by far. Great solution.

@Angel G. Olloqui 2014-07-08 10:39:03

Awesome! simple and works great!

@scurioni 2014-09-04 17:51:52

Great solution!

@Evan R 2015-08-18 00:45:44

None of the other answers worked for me—the others performed an animation on the cell, but the act of invalidating the layout (whether explicitly or behind the scenes) also caused issues with the placement of the other cells before or after the individual cell animation. This is the only answer that worked for me!

@chipbk10 2017-08-10 14:31:52

This works except on the case (tested on iPhone4S, iOS8): during the animation time, if you scroll the CollectionView, the cell will get hidden.

@Iulian Onofrei 2019-01-24 11:00:16

The downside is that the contentOffset changes.

@Andy Poes 2013-02-11 20:29:46

Animating the size of a cell works the same way for collection views as it does for table views. If you want to animate the size of a cell, have a data model that reflects the state of the cell (in my case, I just use a flag (CollectionViewCellExpanded, CollectionViewCellCollapsed) and return a CGSize accordingly.

When you call and empty performBathUpdates call, the view animates automatically.

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    [collectionView performBatchUpdates:^{
        // append your data model to return a larger size for
        // cell at this index path
    } completion:^(BOOL finished) {

    }];
}

@Dorian Roy 2013-02-20 15:29:37

Great answer. In my case, I just had to change the model, then call performBatchUpdates and within the block, call invalidateLayout.

@Ben Kreeger 2013-07-10 18:15:29

I've got a custom layout that holds a transient property regarding which index path is a "standout" index path, and when I set that index path, the view redraws itself and moves the item at the index path towards the top of the collection, away from the rest of the items (kinda like Passbook). Setting that property and doing with @DorianRoy suggested was a huge help.

@dezinezync 2014-04-27 16:25:58

This is far better solution especially considering that the changes are persisted after cell reuse.

Related Questions

Sponsored Content

26 Answered Questions

13 Answered Questions

[SOLVED] How do I animate constraint changes?

8 Answered Questions

[SOLVED] UICollectionView animate data change

0 Answered Questions

UICollectionView cell apparition animation

15 Answered Questions

[SOLVED] UICollectionView current visible cell index

1 Answered Questions

0 Answered Questions

1 Answered Questions

1 Answered Questions

Sponsored Content