Smooth scrolling on iOS
A brief roadmap on how I’ve reached smooth scrolling on iOS.
The article contains 2 main goals I want to share with you.
The First Goal
My first goal was to create something like Facebook’s news feed page on iOS. Each cell can have texts, multiple images, videos, audios, documents, and polls. So, I decided to make it with Apple’s UIKit framework. After a while I did everything. Yeah, UIKit is a good framework and I love it, I used UITableView.
If you have a tableview, each cell height can be different depending on how long the text is and how many media files are attached to the post. If you don’t know the exact height of the cell, you can use tableview’s rowHeight property and set UITableView.automaticDimension. As a result, iOS calculates the cell height itself depending on the cell’s content.
I did so and everything worked fine. But one thing didn’t satisfy me. It wasn’t as smooth as it is on Facebook or Pinterest. In some cases, when the cell appears, it’s a little bit lagging. Scrolling performance was like on LinkedIn’s News screen (not perfectly smooth). Pinterest and Facebook have much smoother scrolling than LinkedIn. What was the reason? So what did I do wrong?
The Second Task
The second task was to make it as smooth as on Pinterest or Facebook. I read some articles, used tableviews estimatedRowHeight to help UIKit learn estimated row height. But it didn’t help. My scrolling performance didn’t become perfect. So I read more articles and found out that Pinterest doesn’t use UIKit for their Home screen. With UIKit you can’t reach perfect smooth scrolling.
- Pinterest created and since has been using Texture (https://github.com/texturegroup/texture). Texture is also known as AsyncDisplayKit. You can read about Texture history here.
- Facebook is using ComponentKit (https://github.com/facebook/componentkit).
- Instagram is using IGListKit (https://github.com/Instagram/IGListKit).
All of them are written in Objective-C. It will be good to see one written in Swift.
I researched all of them in detail, wrote some code with all of them, and finally decided to carry on with Pinterest’s Texture.
Texture has well organized documentation.
So, I learnt how to create node’s on it and after some time I achieved my goal. I finally have perfect smooth scrolling as Pinterest has. And now I am extremely happy and thrilled about that.
I hope the above presented was useful and/or informative. Let me know in the comments whether I need to write one more article about Texture with code examples.