UICollectionView moveItemAtIndexPath: toIndexPath: problems moving items off-screen

Question

I am trying to revive the re-sorting of elements in a UICollectionView on iOS 6.

I wrote this code:

NSMutableDictionary *from = [NSMutableDictionary dictionaryWithCapacity:self.count]; for (int ii = 0; ii < self.count; ii++) { MyItem item = [self getItemAtIndex:(NSInteger)ii]; [from setObject:[NSNumber numberWithInt:ii] forKey:[NSNumber numberWithInt:item.id]]; } [self sort]; [self.collectionView performBatchUpdates:^{ for (int ii = 0; ii < self.count; ii++) { MyItem item = [self getItemAtIndex:(NSInteger)ii]; NSNumber *prevPos = (NSNumber *)[from objectForKey:[NSNumber numberWithInt:item.id]]; if ([prevPos intValue] != ii) { NSIndexPath *from = [NSIndexPath indexPathForItem:prevPos.intValue inSection:0]; NSIndexPath *to = [NSIndexPath indexPathForItem:ii inSection:0]; [self.collectionView moveItemAtIndexPath:from toIndexPath:to]; } } } completion:nil]; 

So, firstly, I save all the current locations of elements in the dictionary, then sort the elements in new positions, then I look through all the elements and move them from the old position to the new one.

This works fine when all the elements are displayed on the screen, but if the list is longer than 10, which makes some elements that are not currently visible (because they are above or below the visible section of the list), it causes these elements to suddenly appear in visible indices and animate in other places, and when the animation stops, they are hidden. It looks really weird because there are objects that appear on top of others ...

Is this a problem with iOS 6 UICollectionView and am I doing something wrong here?

Answer 1

It looks like UICollectionView reusing cells in such a way that your animation looks bad. Any cells that go beyond the screen become available for reuse.

So why does your animation look funky?

The starting and ending location of the cell, and if it is hidden or not, everything is automatically processed when the cells are moved. In order for these animations to look good, you also need to update the data source, as the code appears to use this to determine where cells should start and end during the animation.

Before you invoke the index update block, make sure your data source is updated with the new index locations. Thus, the Apple code has the information needed to move your cells in a more, say, aesthetically pleasing manner.

From Apple Documentation on UICollectionViews :

To insert, delete, or move a single section or item, you must do the following:

• Update the data in the data source object.
• Call the appropriate collection view method to insert or delete a section or item.

It is very important that you update your data source before notifying the collection of any changes. Collection collection methods assume that your data source contains the correct data. If this is not the case, the collection view may receive the wrong set of elements from your data source or request elements that do not exist there and your application may crash.