CODEWITHSUNDEEP
iosobjective-canimationuicollectionviewuicollectionviewlayout
Hashem Aboonajmi
Hashem Aboonajmi

Reputation: 13890

UICollectionView change layout with custom animation

I have two collectionViewLayout, verticalFlowLayout and fullScreenHorizontalFlowLayout.

@implementation VerticalFlowLayout
- (instancetype)init
{
    if (self = [super init]) {
        self.sectionInset = UIEdgeInsetsMake(12, 0, 0, 0);
        self.minimumLineSpacing = 10;
        self.minimumInteritemSpacing = 0;
        self.itemSize = CGSizeMake(CGRectGetWidth([UIScreen mainScreen].bounds), 244);
    }
    return self;
}
@end

@implementation FullScreenFlowLayout
- (instancetype)init
{
    if (self = [super init]) {
        self.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
        self.minimumLineSpacing = 10;
        self.minimumInteritemSpacing = 0;
        self.itemSize = CGSizeMake(CGRectGetWidth([UIScreen mainScreen].bounds), CGRectGetHeight([UIScreen mainScreen].bounds));
        self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    }
    return self;
}

when I select a cell I want to change collectionView layout with custom animation. default animation is a linear animation with 0.33 duration.

    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    if ([_collectionView.collectionViewLayout isKindOfClass:[FullScreenFlowLayout class]]) {
        VerticalFlowLayout *flowLayout = [VerticalFlowLayout new];
        [_collectionView setCollectionViewLayout:flowLayout animated:YES completion:^(BOOL finished) {

        }];
    }
    else
        [_collectionView setCollectionViewLayout:[FullScreenFlowLayout new] animated:YES];

}

How can I do that?

Upvotes: 3

Views: 7366

Answers (1)

Colin
Colin

Reputation: 576

Just wrap _collectionView.collectionViewFlowLayout = flowLayout in a UIView animation block.

[UIView animateWithDuration:5.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
    self.collectionView.collectionViewLayout = flowLayout;
} completion:^(BOOL finished) {
    if (finished) {
        // Do Something
    }
}];

Upvotes: 5

Related Questions