How to easily animate updates of a tableview in Swift

Currently I work on a side project that uses a lot of UITableViews for all the different settings within the app. Whenever you change the the datasource of your tableview you need to update it. Here I want to show you a simple way (probably the easiest) how to easily animate updates of your tableview in Swift.

Updating UITableView without animations

If you do not want to have any animations when updating your UITableView you can just call reloadData() as you probably know. You can read more about it here: https://developer.apple.com/documentation/uikit/uitableview/1614862-reloaddata. This approach does the job but it does not look very nice:

Updating your tableview without any animations does not look very nice. You should avoid that.

Luckily, there is a very simple way to trigger animated updates in a UITableView. Here come’s reloadSections(_:with:) (see: https://developer.apple.com/documentation/uikit/uitableview/1614954-reloadsections).

As the first parameter you pass in an IndexSet which basically is an array of integers for the sections you want to update. With the second parameter (UITableView.RowAnimation) you define the animation of the updates. Here you can see the documentation for all the available animations: https://developer.apple.com/documentation/uikit/uitableview/rowanimation.

If you want to update the whole UITableView simply pass in an array of all the sections. For this purpose I just created an instance of IndexSet like that:

IndexSet(integersIn: 0...tableView.numberOfSections - 1)Code language: Swift (swift)

In the next two chapters I give you a litte preview how some of the animations can look like.

Animate tableview updates using .automatic argument

There is an .automatic animation that looks pretty nice for a lot of use cases. Here you can see how it looks in my UITableView from the first example:

Animate tableview updates using .left and . right argument with UISegmentedControl

When you animate your tableview updates with .automatic, the updates look already way better than without any animations. However I decided to make it look more connected to the UISegmentedControl that triggers the updates. I wanted to visually reference to the sliding animation of the UISegmentedControl by making the updates slide in and out from left and right. To achieve this, I used the .left and .right animation parameter.

All I had to do is to pick the right animation based on the selected segment index:

@objc func changedSegmentedControl(_ sender: UISegmentedControl) {
// Here you do your updates
  tableView.reloadSections(IndexSet(integersIn: 0...tableView.numberOfSections - 1), with: sender.selectedSegmentIndex == 0 ? .left : .right)
}
Code language: Swift (swift)

This is how it looks now:

Happy Coding!

---

References

• https://developer.apple.com/documentation/uikit/uitableview/1614862-reloaddata
• https://developer.apple.com/documentation/uikit/uitableview/1614862-reloaddata
• https://developer.apple.com/documentation/uikit/uitableview/rowanimation