UICollectionView Help

Hello Devs, I am trying to make a UICollectionview cell expand when taped however I can't find a solution for this. I have been able to expand the cells using:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

if expandedRow == indexPath {

return CGSize(width: UIScreen.main.bounds.width - 20, height: 150)

} else {

return CGSize(width: UIScreen.main.bounds.width - 20, height: 65)

}

}

but it's not a smooth animation it just jumps to the expanded size what I need is a smooth animation from collapsed size to expanded size when taped, thanks in advance.

Replies

Try the following :


in didSelect (when you click on cell), add


myTable.beginUpdates
myTable.endUpdates


In beginUpdates() documentation:

Call this method if you want subsequent insertions, deletion, and selection operations (for example, cellForRow(at:) and indexPathsForVisibleRows) to be animated simultaneously. You can also use this method followed by the endUpdates() method to animate the change in the row heights without reloading the cell. This group of methods must conclude with an invocation of endUpdates(). These method pairs can be nested. If you do not make the insertion, deletion, and selection calls inside this block, table attributes such as row count might become invalid. You should not call reloadData() within the group; if you call this method within the group, you must perform any animations yourself.


That's for tableView, but I hope it works the same with collectionView


See further discussion here

https://stackoverflow.com/questions/460014/can-you-animate-a-height-change-on-a-uitableviewcell-when-selected

I tried it but UICollectionView does not have beginUpdates() 😟

Effectively. Try and use:

performBatchUpdates(_:completion:)


You can use this method in cases where you want to make multiple changes to the collection view in one single animated operation, as opposed to in several separate animations. You might use this method to insert, delete, reload, or move cells or use it to change the layout parameters associated with one or more cells. Use the block passed in the

updates
parameter to specify all of the operations you want to perform.

If the collection view's layout is not up to date before you call this method, a reload may occur. To avoid problems, you should update your data model inside the

updates
block or ensure the layout is updated before you call
performBatchUpdates(_:completion:)
.

Deletes are processed before inserts in batch operations. This means the indexes for the deletions are processed relative to the indexes of the collection view’s state before the batch operation, and the indexes for the insertions are processed relative to the indexes of the state after all the deletions in the batch operation.


This should help:

h ttps://blog.undabot.com/simplifying-animations-using-batch-updates-on-ios-6ad5064bec93

I also tried that but it dose not animate it just jumps to the expanded height with no animation 😟

So you could 'roll your own' animation by calling your function repeatedly with ever increasing parameters either explicitly or in a loop. Something like:


[self performSelector:@selector(expand) withObject:nil afterDelay:.05f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.1f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.15f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.20f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.25f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.30f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.35f];
[self performSelector:@selector(expand) withObject:nil afterDelay:.4f];


and in a function "expand" detect the current size and make it larger by 1/8 of the full size.