Animating changes in UITableView and UICollectionView
Most of our apps present lists or grids of some data by using UITableView or UICollectionView. Often users can update this list by using Pull-to-Refresh technique or by pressing the update button. Everybody knows how to update UITableView by calling the reloadData method on the tableView instance. But what about animation? ReloadData method is invalidating the current items provided by data source and draws new ones without any animation. Today we will talk about animating data changes in UITableView and UICollectionView.
The all-in-one macOS app that enhances App Store Connect, supercharging your app updates, localization, and ASO with AI-powered tools. Save 25% and try now!
UICollectionView/UITableView animation API
iOS SDK provides particular methods like insertRows, deleteRows, and moveRow which give us an opportunity to animate changes in our data source. But only a few apps use this technique to update UITableView and here are two reasons for that.
- It’s hard to calculate what kind of changes applied to your data after the update.
- There is a particular order on animating changes. You should call deletions first and insertions next, and after that make your movement changes.
I think it’s a little bit complicated, and that’s why not so many apps use this API. But we are going to find an easy way of animating changes.
Understanding the changes
There are a lot of third-party libraries which provide fast diffing algorithm implementations. Here is a list of the most famous.
I prefer the second one. It works super fast with my dataset. As a part of this post, we will use Differ library, but you can choose any library you want because usually, it provides a similar API.
let old = ["1", "2", "3"]
let new = ["4", "3", "2"]
let diff = old.diff(new)
Hashable
First of all, we have to implement Hashable protocol on our model types, thanks to Swift it is super easy, all you need to do is adding Hashable protocol to your type declaration and compiler will generate all required code. Here is a sample from my pet project which is a TV show tracking app.
struct Show: Hashable {
let title: String
let year: Int
let ids: Ids
let overview: String
let runtime: Int
let certification: String
let network: String
let country: String
let trailer: String?
let homepage: String?
let status: String
let rating: Double
let votes: Int
let commentCount: Int
let updatedAt: Date
let language: String
let availableTranslations: [String]
let genres: [String]
let airedEpisodes: Int
}
Animation API
Most of the diffing libraries provide UICollectionView and UITableView extensions, which takes oldData, newData, and animate the changes from one state to another. All you need to do is put new data to your data source and instead of calling the reloadData method call animateRowChanges method. This method will handle all the animations based on your changes.
First of all, let’s use the technique which we discussed before to hide our third-party dependencies with extensions.
import UIKit
import Differ
extension UICollectionView {
func reloadChanges<T: Collection>(from old: T, to new: T) where T.Element: Equatable {
animateItemChanges(oldData: old, newData: new)
}
}
extension UITableView {
func reloadChanges<T: Collection>(from old: T, to new: T) where T.Element: Equatable {
animateRowChanges(oldData: old, newData: new)
}
}
We create an extension which adds a reloadChanges method to UICollectionView and UITableView. With the help of this extension, you can easily switch libraries or your implementation by making changes in a single file.
func render(_ newData: [Show]) {
let oldData = dataSource.posters
dataSource.posters = newData
collectionView.reloadChanges(from: oldData, to: newData)
}
Conclusion
Today we discussed how it is easy to add delight to our apps by animating changes. This kind of animations makes apps feel natural and fluid. Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next week!