Reloading UITableView while Animating Scroll in iOS 11
Calling reloadData
on UITableView
may not be the most efficient way to update your cells, but sometimes it’s easier to ensure the data you are storing is in sync with what your UITableView
is showing. In iOS 10 reloadData
could be called at any time and it would not affect the scrolling UI of UITableView
. However, in iOS 11 calling reloadData
while your UITableView
is animating scrolling causes the UITableView
to stop its scroll animation and not complete. We noticed this is only true for scroll animations triggered via one of the UITableView
methods (such as scrollToRow(at:at:animated:)
) and not for scroll animations caused by user interaction. This can be an issue when server responses trigger a reloadData
call since they can happen at any moment, possibly when scroll animation is occurring.
Solution
If you don’t want to switch to updating cells individually, one solution is to defer your reloadData
call until all scroll animations are complete. We use a utility class to encapsulate interactions with aUITableView.
class TableViewUtility { let tableView: UITableView
var data: Data?
init(tableView: UITableView) {
self.tableView = tableView
} func showData(_ data: Data) {
self.data = data
tableView.reloadData()
} // Other UITableViewDataSource and UITableViewDelegate methods
}
Now we add:
- A method to animate scrolling (here we use scrolling an index path to the bottom of the
UITableView
as an example)
func scrollIndexPathToBottom(indexPath: IndexPath) {
isAnimatingScroll = true
tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
}
- A variable to keep track of whether or not scroll is being animated
var isAnimatingScroll = false
- A variable to store any
Data
we need to load once scroll animations have completed
var pendingData: Data?
- Update
showData
to storeData
if scroll animation is occurring when we try to reload the table
func showData(_ data: Data) {
guard !isAnimatingScroll else {
pendingData = data
return
} self.data = data
tableView.reloadData()
}
Altogether it looks like:
class TableViewUtility {
... var isAnimatingScroll = false
var pendingData: Data? func scrollIndexPathToBottom(indexPath: IndexPath) {
isAnimatingScroll = true
tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
} func showData(_ data: Data) {
guard !isAnimatingScroll else {
pendingData = data
return
} self.data = data
tableView.reloadData()
}
}
Now we need to figure out when scroll animations are finished so we can show any pendingData
. Unfortunately the scroll methods that give us scroll animations for UITableView
don’t take completion blocks. We found that putting these calls into a CATransaction
and setting a completion block didn’t work either, so we used the UIScrollViewDelegate
method scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView)
func scrollViewDidEndScrollingAnimation(_ scroll: UIScrollView) {
isAnimatingScroll = false
if let pendingData = pendingData {
showData(pendingData)
pendingData = nil
}
}
There is one gotcha with this. If tableView.scrollToRow(at:at:animated:)
is called when the given IndexPath
is already at the specified position, scrollViewDidEndScrollingAnimation
does not get triggered since no scrolling animation occurred. To make sure our isAnimatingScroll
flag doesn’t get stuck with a value of true
, we have to make sure the IndexPath
we’re scrolling to is not already in position:
func scrollIndexPathToBottom(indexPath: IndexPath) {
let scrollPadding: CGFloat = 1.0
let indexRect = tableView.rectForRow(at: indexPath)
let targetScrollYOffset = indexRect.origin.y - tableView.frame.height + indexRect.size.height + tableView.contentInset.bottom guard fabs(tableView.contentOffset.y - targetScrollYOffset) > scrollPadding else {
return
} isAnimatingScroll = true
tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
}
We use a scrollPadding
of 1.0
here to account for small inconsistencies in view placements.
The final thing to watch out for is if you are updating cells individually as well, make sure your pendingData
is updated appropriately otherwise you may get stale data being loaded after scroll animations. This means all potential properties of your data should be up to date. For example, if a scroll animation gets triggered and two separate properties of your data get updates, the pendingData
should have both of these changes. This may seem obvious, but it can be subtle depending on your app architecture.
The Result
With this, we get smooth scroll animations even when we try to reload the data mid-animation.
If you’ve encountered this problem as well, feel free to leave a comment on how you solved it or if this method was helpful!