UICollectionViewCell flip and grow on tap

ios, uicollectionview

Solution

Here is what I used in another project and it was working well :

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    if (cell.selected) {
        [collectionView deselectItemAtIndexPath:indexPath animated:YES];
        [UIView transitionWithView:cell
                          duration:0.2
                           options:UIViewAnimationOptionTransitionFlipFromLeft
                        animations:^{
                            [cell setFrame:self.selectedCellDefaultFrame];
                            cell.transform = self.selectedCellDefaultTransform;
                        }
                        completion:^(BOOL finished) {
                            self.selectedCellDefaultFrame = CGRectZero;
                            [collectionView reloadItemsAtIndexPaths:@[indexPath]];
                        }];
        return NO;
    }
    else {
        return YES;
    }
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    [cell.superview bringSubviewToFront:cell];
    self.selectedCellDefaultFrame = cell.frame;
    self.selectedCellDefaultTransform = cell.transform;
    [UIView transitionWithView:cell
                      duration:0.2
                       options:UIViewAnimationOptionTransitionFlipFromRight
                    animations:^{
                        [cell setFrame:collectionView.bounds];
                        cell.transform = CGAffineTransformMakeRotation(0.0);
                    }
                    completion:^(BOOL finished) {}];
}

Different things here :

- The `bringSubviewToFront:` message call is used to prevent the cell to animate behind the other cells

- We use two properties declared in the controller : `selectedCellDefaultFrame`and `selectedCellDefaultTransform` to save the default state of the cell and reinitialize it when deselecting

- When deselecting, we call the `reloadItemsAtIndexPaths:` method of `UICollectionView` to be sure that the reset of the position is totally complete

Let me know if you have any trouble with this.

Good luck,

Problem

Original source