Make one specific cell on top of others in UICollectionView - ios

Question

In my UICollectionView, one of the cells contains an animation will go out of the cell's bounds, and now it is covered by other cells nearby. Is it possible to make this special cell on top of others, so it can present animation perfectly?
Thanks.

Answer 1

I had this same need
Specifically, I want to present a modal view controller based on the cell within the collection view that was selected. You can see this sort of behavior in iBooks when you are looking at the library. Select a "book" from the collection, and it "pops out" and opens to the book.
Simply scaling the cell "as is" may have it overlaid by other cells, which is not desirable.
To get this to work, you simply remember the cell's superview (it may not be the UICollectionView directly!) and its original center point. Then you remove it from its superview, add it to your main view (optionally bringing it to the front), perform your animation. In the completion block, reset your transform to Identity (no transform), remove it from your main view, and add it back to its original parent and center point.
I have example code below, but there are a few caveats:
I use IVARS for animation state information because I use the information in multiple methods in my actual implementation
I'm also using QuartzCore 3D transformations due to additional transformations my code does that is outside the scope of this answer
I added an "animating" property to my cell to have it alter its appearance during the animation (so it will scale nicer)
Finally, I switched my code to do a standard modal presentation at the end in this example, rather than calling a non-standard presentation controller which I did in my actual app for the actual launching of the next VC in the scene
There are probably other tweaks you will need to do as well, but the basic technique I outlined above will definitely work.
// Assume: UIView *cell == cell we are animating
// Assume: UIViewController *vc == View controlelr we will launch
// Assume: IVAR CGPoint _animationCellOrigCenter
// Assume: IVAR UIView *_animationCellParent
// Assume: IVAR UIView *_animationCell;
// Save "before" state before animating:
_animationCellOrigCenter = cell.center;
_animationCellParent = cell.superview;
_animationCell = cell;
// Where is the cell currently in the main view?
CGPoint cellViewLoc = [self.view convertPoint:_animationCellOrigCenter fromView:_animationCellParent];
// OK. Hoist the cell into the main view:
[cell removeFromSuperview];
cell.center = cellViewLoc;
[self.view addSubview:cell];
[self.view bringSubviewToFront:cell];
CGSize cellSize = cell.bounds.size;
CGSize newSize = CGSizeMake(600,600); // YMMV
[cell.superview bringSubviewToFront:cell];
// Get ready to do some animating:
CGSize viewSize = collectionView.bounds.size;
CGPoint destination = CGPointMake(viewSize.width / 2, viewSize.height / 2);
CGFloat scaleX = newSize.width / cellSize.width;
CGFloat scaleY = newSize.height / cellSize.height;
cell.animating = YES;
[UIView animateWithDuration:.2
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
animations:^{
cell.layer.transform = CATransform3DMakeScale(scaleX, scaleY, 1);
cell.center = destination;
}
completion:^(BOOL finished) {
[self presentViewController:vc
animated:YES
completion:^{
// Put everything back the way we found it!
[_animationCell removeFromSuperview];
[_animationCellParent addSubview:_animationCell];
_animationCell.center = _animationCellOrigCenter;
_animationCell.layer.transform = CATransform3DIdentity;
_animationCell.animating = NO;
}
];
}
];

Answer 2

This is fairly straightforward. Just add the cell to the collectionview's scrollview before you expand it on top of the others, and then remove it when you're no longer wanting it on top. Below I've done this and then added an animation on each cell itself to have it expand on top the others. I've left that animation out for simplicity.
override func collectionView(collectionView: UICollectionView, shouldSelectItemAtIndexPath indexPath: NSIndexPath) -> Bool {
let cell = collectionView.cellForItemAtIndexPath(indexPath)
self.collectionView?.addSubview(cell!)
return true
}
override func collectionView(collectionView: UICollectionView, shouldDeselectItemAtIndexPath indexPath: NSIndexPath) -> Bool {
let cell = collectionView.cellForItemAtIndexPath(indexPath)
if (cell?.superview != nil) {
cell?.removeFromSuperview()
}
return true
}