Animating scrollView offsets in a UICollectionView / UITableView causes prematurely fading cells

Question

We have a UICollectionView with a custom layout very similar to a UITableView (it scrolls vertically). UICollectionView displays only 3 cells at a time, and one of them is an active cell:

[ 1 ] [*2*] [ 3 ] 

(The active cell is here # 2.) The cells are located approximately 280 points, so only the active cell is fully visible on the screen. The user does not directly scroll the view for navigation; instead, it moves the active cell horizontally to advance to the next cell. Then we make some fancy animations and scroll through the UICollectionView so that the next cell is in the “active” position, thereby making it active, moving the old one and raising the next cell in the queue:

 [ 2 ] [*3*] [ 4 ] 

The problem is setting the offset of the UICollectionView. We are currently setting it in the UIView animation block ( self.collectionView.contentOffset = targetOffset; ) along with three other animation properties that basically work fine, but make the first cell (previously active, in the latter case, No. 2) disappear, as soon as the animation starts to work, even before the end of the delay interval. This is definitely not perfect.

I thought of some solutions, but can't find a better one:

• Absolutely increase the UICollectionView frame to five cells instead of three, thereby forcing it to store cells in memory, even if they are behind the scenes. I tried this and it works, but it sounds like a terribly dirty hack.

• Take a snapshot of the contents of a disappearing cell, place it in a UIImageView, add a UIImageView as a scrollView subview just before the cell leaves in the same place of the old cell, deleting it after the animation is completed. It sounds less juicy than the previous version (at least from memory), but still pretty hacky. I also do not know how best to do this, please point me in the right direction.

• • Switch to UIScrollView setContentOffset:animated: We really used this, and he fixed the cell fading problem, but running it in parallel with other UIView animations seems to be competing for mainstream attention, thereby creating incredibly mutable animations on single-core devices (iPhone 3GS / 4). It also does not allow us to change the duration or attenuation of the animation, so it does not feel in sync with the rest. Another option, if we can find a way to make it work in harmony with the animation of the UIView block.

  • Switch to UICollectionView scrollToItemAtIndexPath:atScrollPosition:animated: I have not tried this, but it has a big flaw: for the scroll position, only 3 possible constants (which apply to this case) are UICollectionViewScrollPositionTop : UICollectionViewScrollPositionTop , UICollectionViewScrollPositionCenteredVertically and UICollectionViewScrollPositionBottom . The active cell can change its height, but it should always be 35 points from the top of the window, and these parameters do not provide enough control to complete the design. It can also be as problematic as 3.1. Another option, because there may be a way around the position of the scroll position, which I do not know about, and it may not have the same problem with the main thread, which seems unlikely.

Any help would be greatly appreciated. Please ask if you need clarification. Many thanks!

Answer 1

I went with number 2. Here's a snippet that renders and saves:

 UIGraphicsBeginImageContext(theCell.bounds.size); [theCell.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *renderedCellImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

The rest of the method was pretty much, as I described above, with one caveat: this needs to be done before the image is actually used and in the background stream, since rendering can take up to 1 full second on iPhone 4 Hope this helps someone that.

Answer 2

I got the cells to remain visible, reloading them immediately after setting the content offset in the animation block.

 UIView.animateWithDuration(0.3) { self.collectionView.contentOffset = newOffset self.collectionView.reloadItemsAtIndexPaths(willDisappearIndexPaths) } 

Answer 3

LongShot: try setting the parameters of the UIView animation block to UIViewAnimationOptionBeginFromCurrentState .

 [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{ } completion:^(BOOL completed){ } ];