UITableView does row deletion and insertion in cascading animation
I'm interested in removing a batch of lines from UITableView
using an animation tableView.deleteRows(at: [singleIndexPath], with: .automatic)
. However, my goal is to cascade delete animations so that they are cascaded in an animated way, so that instead of deleting an entire batch of lines, the animation will delete them one by one.
I found a useful extension UITableView
where I got the completion block after the animation finished, as such:
extension UITableView {
/// Perform a series of method calls that insert, delete, or select rows and sections of the table view.
/// This is equivalent to a beginUpdates() / endUpdates() sequence,
/// with a completion closure when the animation is finished.
/// Parameter update: the update operation to perform on the tableView.
/// Parameter completion: the completion closure to be executed when the animation is completed.
func performUpdate(_ update: ()->Void, completion: (()->Void)?) {
CATransaction.begin()
CATransaction.setCompletionBlock(completion)
// Table View update on row / section
beginUpdates()
update()
endUpdates()
CATransaction.commit()
}
}
My problem is how to use a block to automate the animation of deleting a row (and later inserting a row). Right now, the following example code with two lines IndexPath
is still animating at the same time, which is not my goal.
let singleIndexPath = IndexPath(row: 0, section: 0)
let anotherIndexPath = IndexPath(row: 1, section: 0)
self.tableView.performUpdate({
self.tableView.deleteRows(at: [singleIndexPath, anotherIndexPath], with: .automatic)
self.tableView.insertRows(at: [singleIndexPath, anotherIndexPath], with: .left)
//Happening at the same time, which is not what I want
}, completion: {
})
Any advice would be greatly appreciated.
source to share
Cascading table row reduction
Application:
let indexPathsToDelete = [IndexPath(row: 1, section: 0), IndexPath(row: 4, section: 0), IndexPath(row: 6, section: 0)]
deleteRowsAt(indexPaths: indexPathsToDelete, in: tableView)
Code:
func deleteRowsAt(indexPaths: [IndexPath], in tableView: UITableView) {
var state = (0 ..< tableView.numberOfSections).map {
Array(0 ..< tableView.numberOfRows(inSection: $0))
}
func cascadeDeleteAt(indexPath indexPathToDelete: IndexPath) {
// Get the current row for the index path we wish to delete.
// It could be diffrent to its original index path if other rows have been deleted.
guard let currentRow = state[indexPathToDelete.section].index(of: indexPathToDelete.row) else { return }
let currentIndexPath = IndexPath(row: currentRow, section: indexPathToDelete.section)
print(currentIndexPath)
// --- IMPLEMENT THE DELETION FROM YOUR DATA SOURCE ---
source.remove(at: currentIndexPath.row)
state[indexPathToDelete.section].remove(at: currentIndexPath.row)
tableView.performUpdate({
tableView.deleteRows(at: [currentIndexPath], with: .left)
}, completion: {
guard var idx = indexPaths.index(of: indexPathToDelete) else { return }
idx += 1
if idx < indexPaths.count {
let nextIndexPathToDelete = indexPaths[idx]
cascadeDeleteAt(indexPath: nextIndexPathToDelete)
}
})
}
if let indexPath = indexPaths.first {
cascadeDeleteAt(indexPath: indexPath)
}
}
When deleting lines in a cascading fashion (i.e. deleting one line at a time, rather than all lines at once), the following elements are tricky:
- After deleting a row, other indices (pointing paths as well as indices in data sources) do not indicate where they were used.
- The function
performUpdate
must be called from a recursive function to allow the next line to be deleted only after the current line is deleted.
source to share