Infinite scroll is one of the basic requirements of the modern apps. It is a design pattern where content is continually loaded into the interface as the user scrolls downwards. Also called endless scroll, the point is that the user never reaches the end of the page. Instead they are presented with a perpetual content stream without having to click or spend cognitive load on paginated navigation.
Sound familiar? It should do. Most people use infinite scroll on the daily in their social media browsing — think Facebook, Instagram or Twitter.
Advantages of using Infinite Scroll
Infinite scrolling definitely has its upsides; if it didn’t, big tech giants wouldn’t be using the pattern. For example:
- Users consume vastly more content on an infinite scroll page.
- Interaction costs are basically zero, and cognitive load is commensurately low.
- Scrolling is a intuitive action for mobile users
- Infinite scroll works well on ‘discovery interfaces’, those where the objective is to keep users consuming more and more of the same type of content
So UI and UX designers should consider infinite scroll if all the items on a page are of the same hierarchy and are conceptually related (think, episodes in a podcast), and if the objective of the design is to keep users engaged with content.
“Long, endless pages are good for time-killing activities because users are in the mindset for serendipitous exploration and discovery. The advantage of not having to acquire and click “next page” keeps audiences engaged with the content.” Hoa Loranger, NN Group
How to implement infinite scroll in iOS using swift
In our iOS app we had to implement pagination/infinite scroll in all of the table views; and this task was assigned to me, let me think, they were six if I am not wrong.
Well, I am good at imagining things 😅 following image is the closest I could find to my imagination.
It felt wrong to add pagination in every view controller so I decided to do something different. Something which would same time and effort, less duplication and single place where we could fix bugs, change design, or add features etc.
So I decided to make a PaginatedTableView library.
PaginatedTableView library to the rescue
salmaanahmed/PaginatedTableView
Assign this class to your UITableView and it will be equipped with pull to refresh as well as infinite scroll along with a callback where you don’t have to worry about page number/size stuff. Thats why libraries exist ❤️🙂
Stepwise guide to setup PaginatedTableView
Step 1: Assign custom class
<a href="https://medium.com/media/5ca4bd536876d1952f622f9b8e1066da/href">https://medium.com/media/5ca4bd536876d1952f622f9b8e1066da/href</a>
Step 2: Remember to assign paginated delegate and data source ONLY, DO NOT assign tableViewDelegate or tableViewDataSource
<a href="https://medium.com/media/d4f9b0f65cd7c117c04a74b342f31c46/href">https://medium.com/media/d4f9b0f65cd7c117c04a74b342f31c46/href</a>
Step 3: On ViewDidLoad call the load method with refresh true optional parameter
<a href="https://medium.com/media/41428fb24078dbd500189ae641aa68f4/href">https://medium.com/media/41428fb24078dbd500189ae641aa68f4/href</a>
Step 4: Implement stub and call api
<a href="https://medium.com/media/4c2f0eaf4678c8fc81e0ad76e61410b0/href">https://medium.com/media/4c2f0eaf4678c8fc81e0ad76e61410b0/href</a>
Step 5: EnjoyYeah! Thats all. You now have paginated table view with infinite scroll along with pull to refresh ❤️Simple, isn't it? ✋ 😉
PaginatedTableView
PaginatedTableView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'PaginatedTableView'
Your claps on the stars to this library on github are huge motivation for me ❤️
So the point is not to work hard, instead work smart
P.S. It is my first library for iOS as I have been working on android before. I shared my experience of platform switching in the article below.
A journey from android development to iOS development in 2018 — Kotlin and Swift
<a href="https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href">https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href</a>