I managed to get the desired rotation effect by subclassing UICollectionViewFlowLayout
and overriding the two methods: initialLayoutAttributesForAppearingItemAtIndexPath
and finalLayoutAttributesForDisappearingItemAtIndexPath
which are the two points of controls to respectively define the starting/final layout information for an item being inserted into the collection view.
See source code:
.h:
#import "UICollectionView.h"
@interface UITestCollectionViewFlowLayout : UICollectionViewFlowLayout
@end
.m:
#import "UITestCollectionViewFlowLayout.h"
@interface UITestCollectionViewFlowLayout ()
{
BOOL _isRotating;
}
@property (strong, nonatomic) NSIndexPath* lastDissappearingItemIndex;
@end
@implementation UITestCollectionViewFlowLayout
@synthesize lastDissappearingItemIndex = _lastDissappearingItemIndex;
// returns the starting layout information for an item being inserted into the collection view
- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{
UICollectionViewLayoutAttributes* attributes = (UICollectionViewLayoutAttributes *)[self layoutAttributesForItemAtIndexPath:itemIndexPath];
if (_isRotating) // we want to customize the cells layout only during the rotation event
{
if ([self.lastDissappearingItemIndex isEqual:itemIndexPath])
return nil; // do not animate appearing cell for the one that just dissapear
else
{
attributes.alpha = 0;
// setting the alpha to the new cells that didn't match the ones dissapearing is not enough to not see them so we offset them
attributes.center = CGPointMake(attributes.center.x, attributes.size.height * 2 + attributes.center.y);
}
}
return attributes;
}
// returns the final layout information for an item that is about to be removed from the collection view
- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath*)itemIndexPath
{
UICollectionViewLayoutAttributes* attributes = (UICollectionViewLayoutAttributes *)[self layoutAttributesForItemAtIndexPath:itemIndexPath];
if (_isRotating)
{
attributes.alpha = 1.0;
self.lastDissappearingItemIndex = itemIndexPath;
}
return attributes;
}
- (void) viewController:(UIViewController *)viewController didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
_isRotating = NO;
}
- (void) viewController:(UIViewController *)viewController willRotateToInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation duration:(NSTimeInterval)duration
{
_isRotating = YES;
}
Note that i am using a flag that i set from the viewcontroller who create this flowlayout to know when we are actually rotating or not; the reason being that i want this effect to happen only during rotation.
I am interested to hear feedbacks/improvement about this code.