Infinite scrolling UITableView with numbers - ios

Question

I need to create infinite table with numbers, that is, when scrolling, new cells with numbers should be created.
I create APICaller with counter, pagination, arrays and while loop.
Also I create UITableView with func scrollViewDidScroll(_ scrollView: UIScrollView) which append new values in a table.
My ViewController with UITableView
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UIScrollViewDelegate {
private let apiCaller = APICaller()
private let tableView: UITableView = {
let tableView = UITableView(frame: .zero, style: .grouped)
tableView.register(UITableViewCell.self,
forCellReuseIdentifier: "cell")
return tableView
}()
private var data = [Int]()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(tableView)
tableView.dataSource = self
tableView.delegate = self
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
tableView.frame = view.bounds
apiCaller.fetchData(pagination: false, completion: { [weak self] result in
switch result {
case.success(let data):
self?.data.append(contentsOf: data)
DispatchQueue.main.async {
self?.tableView.reloadData()
}
case.failure(_):
break
}
})
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = String(describing: data[indexPath.row])
return cell
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let position = scrollView.contentOffset.y
if position > (tableView.contentSize.height-100-scrollView.frame.size.height) {
guard !apiCaller.isPaginating else { return }
apiCaller.fetchData(pagination: true) { [weak self] result in
switch result {
case .success(let moreData):
self?.data.append(contentsOf: moreData)
DispatchQueue.main.async {
self?.tableView.reloadData()
}
case .failure(_):
break
}
}
}
}
}
In this case of APICaller I have only 100 cells, which corresponds to the loop constraint (but if i remove break from the while loop, nothing appears)
class APICaller {
private var counter = 0
var isPaginating = false
func fetchData(pagination: Bool = false, completion: #escaping (Result<[Int], Error>) -> Void) {
if pagination {
isPaginating = true
}
DispatchQueue.global().asyncAfter(deadline: .now() + (pagination ? 3 : 2), execute: {
var newData: [Int] = [0]
var originalData: [Int] = [0]
while true {
self.counter += 1
originalData.append(self.counter)
if self.counter == 100 {
break
}
}
completion(.success(pagination ? newData : originalData))
if pagination {
self.isPaginating = false
}
})
}
}
So, how can i get a table with infinite numbers?

Answer 1

The basic idea is right. When you scroll to a point where more rows are needed, fetch them. But doing this in the UIScrollViewDelegate is an expensive place to do that. I.e., that method is called for every pixel of movement and will result in many redundant calls.
Personally, I would advise moving this logic to the appropriate table view methods. For example, at a bare minimum, you might do it in the UITableViewDataSource method (i.e., if you are handling a row more than n rows from the end of your data set, fetch more data). E.g.,
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return data.count + 1 // NB: one extra for the final “busy” cell
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if (indexPath.row + 50) >= data.count { // scrolled within 50 rows of end
fetch()
}
if indexPath.row >= data.count { // if at last row, show spinner
return tableView.dequeueReusableCell(withIdentifier: "busy", for: indexPath)
}
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = String(describing: data[indexPath.row])
return cell
}
}
A few things to note there:
I'm reporting one more row than I have thus far. This is for my “busy” cell (a cell with a spinning UIActivityIndicatorView). That way, if the user ever scrolls faster than the network response can handle, we at least show the user a spinner to let them know that we are fetching more data.
Thus, the cellForRowAt checks the row, and shows the “busy cell” if necessary.
And in this case, when I'm within 50 items of the end, I will initiate a fetch of the next batch of data.
Even better than the above, I would also marry the UITableViewDataSource implementation with a UITableViewDataSourcePrefetching. Thus, set the tableView.prefetchDataSource and then implement prefetchRowsAt:
extension ViewController: UITableViewDataSourcePrefetching {
func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) {
guard
let maxIndexPath = indexPaths.max(by: { $0.row < $1.row }), // get the last row, and
maxIndexPath.row >= data.count // see if it exceeds what we have already fetched
else { return }
fetch(pagination: true)
}
}
By the way, a few notes on fetch:
func fetch(pagination: Bool = false) {
apiCaller.fetchData(pagination: pagination) { [weak self] result in
guard
let self = self,
case .success(let values) = result
else { return }
let oldCount = self.data.count
self.data.append(contentsOf: values)
let indexPaths = (oldCount ..< self.data.count).map { IndexPath(row: $0, section: 0) }
self.tableView.insertRows(at: indexPaths, with: .automatic)
}
}
Note, I would advise not “reloading” the whole table view, but rather just “inserting” the appropriate rows. I've also moved the “am I busy” logic into the APICaller, where it belongs:
class APICaller {
private var counter = 0
private var isInProgress = false
func fetchData(pagination: Bool = false, completion: #escaping (Result<[Int], Error>) -> Void) {
guard !isInProgress else {
completion(.failure(APIError.busy))
return
}
isInProgress = true
DispatchQueue.main.asyncAfter(deadline: .now() + (pagination ? 3 : 2)) { [weak self] in
guard let self = self else { return }
let oldCounter = self.counter
self.counter += 100
self.isInProgress = false
let values = Array(oldCounter ..< self.counter)
completion(.success(values))
}
}
}
extension APICaller {
enum APIError: Error {
case busy
}
}
I not only simplified the APICaller, but also made it thread-safe (by moving all state mutation and callbacks on the the main queue). If you start some asynchronous task on a background queue, dispatch the updates and callback to the main queue. But do not mutate objects from background threads (or if you must, add some synchronization logic).