UITableView load more data when scrolling to top?

Question

How could I load more data while scrolling to the top without losing the current offset oh the UITableView ?

Here is what I am trying to achieve:

This is the whole set of data:

row 1
row 2
row 3
row 4
row 5





row 11
row 12
row 13
row 14
row 15

Now, imagine that the user loaded the ones marked in bold and the offset is at row 8 , if the user scroll up and reached row 7 , I want to load and insert the rows from 1 to 5 without jumping from row 7 . Keeping in mind that the user may be scrolling so when data reached the phone it is at row 6 , so I can't jump it back to row 7 , but keep the scroll smooth and natural (just how happen when you load more data while scrolling down, that the data is reloaded without the tableview jumping from between rows).

By the way, by offset I mean the contentOffset property of the UITableView .

Thanks for your help, I do really appreciate it!

Answer 1

When you are updating your data, you need to get the current offset of the tableView first. Then, you can add the height of the added data to the offset and set the tableView's offset like so:

func updateWithContentOffsset(data: [String]) {
    guard let tableView = tableView else {
        return
    }
    let currentOffset = tableView.contentOffset
    let yOffset = CGFloat(data.count) * tableView.rowHeight // MAKE SURE YOU SET THE ROW HEIGHT OTHERWISE IT WILL BE ZERO!!!
    let newOffset = CGPoint(x: currentOffset.x, y: currentOffset.y + yOffset)
    tableView.reloadData()
    tableView.setContentOffset(newOffset, animated: false)
}

You can also take a look at the gist that I created. Simply open up a new iOS Playground and copy-paste the gist.

The only thing you have to be aware of is that make sure you know your row height to add to the offset.

Answer 2

@Pratik Patel Bellow answer is best one. Right down or call bellow function in the web-service response.

func updateWithScroll(data: [String]) {
    guard let tableView = tableView else {
        return
    }
    guard let currentVisibleIndexPaths = tableView.indexPathsForVisibleRows else {
        return
    }
    var updatedVisibleIndexPaths = [IndexPath]()
    for indexPath in currentVisibleIndexPaths {
        let newIndexPath = IndexPath(row: indexPath.row + data.count, section: indexPath.section)
        updatedVisibleIndexPaths.append(newIndexPath)
    }
    tableView.reloadData()
    tableView.scrollToRow(at: updatedVisibleIndexPaths[0], at: .top, animated: false)
}

Answer 3

Now, imagine that the user loaded the ones marked in bold and the offset is at row 8, if the user scroll up and reached row 7, I want to load and insert the rows from 1 to 5 without jumping from row 7.

Loading data into the table as its needed is one of the things that UITableView does for you automatically. Don't try to insert rows into the table because they'll soon be needed as the user scrolls toward them -- the table view will request those rows from its data source as they're needed. You just need to make sure that your data source has the information it needs in order to fulfill the tables requests for cells as they arrive.

Things get a little more complicated if populating the rows requires making a network request for each row. Given your use of "load" in the question, I don't think that's what you're talking about, but in case that's your situation, here are some tips:

• Request the data for as many rows as you reasonable can as early as you reasonably can. The amount of data displayed in a single row is typically small, so requesting a few hundred rows all at once shouldn't be a big deal.

• If you don't have the data you need for a given row, make the necessary request, but return a cell immediately. The cell you return could use a spinner or other indication that the data is pending. When the request completes, you can tell the table to reload the appropriate row so that the proper content will display.