{"id":275,"date":"2020-05-02T16:26:01","date_gmt":"2020-05-02T14:26:01","guid":{"rendered":"https:\/\/mic.st\/blog\/?p=275"},"modified":"2020-05-02T16:26:03","modified_gmt":"2020-05-02T14:26:03","slug":"how-to-easily-animate-updates-of-a-tableview-in-swift","status":"publish","type":"post","link":"https:\/\/mic.st\/blog\/how-to-easily-animate-updates-of-a-tableview-in-swift\/","title":{"rendered":"How to easily animate updates of a tableview in Swift"},"content":{"rendered":"\n

Currently I work on a side project that uses a lot of UITableViews<\/code> 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.<\/p>\n\n\n\n

Updating UITableView<\/code> without animations<\/h2>\n\n\n\n

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

Updating UITableView<\/code> without animations using reloadData()<\/code>.<\/figcaption><\/figure>\n\n\n\n

Updating your tableview without any animations does not look very nice. You should avoid that.<\/p>\n\n\n\n

\"Animate<\/figure>\n\n\n\n

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

As the first parameter you pass in an IndexSet<\/code> which basically is an array of integers for the sections you want to update. With the second parameter (UITableView.RowAnimation<\/code>) 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<\/a>.<\/p>\n\n\n\n

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

IndexSet<\/span>(integersIn: 0<\/span>...tableView.numberOfSections - 1<\/span>)<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
In the next two chapters I give you a litte preview how some of the animations can look like.<\/p>\n\n\n\n
Animate tableview updates using .automatic<\/code> argument<\/h2>\n\n\n\n
There is an .automatic<\/code> animation that looks pretty nice for a lot of use cases. Here you can see how it looks in my UITableView<\/code> from the first example:<\/p>\n\n\n\n
Updating UITableView<\/code>‘s datasource with .automatic<\/code> animation.<\/figcaption><\/figure>\n\n\n\n
Animate tableview updates using .left<\/code> and . right<\/code> argument with UISegmentedControl<\/code><\/h2>\n\n\n\n
When you animate your tableview updates with .automatic<\/code>, the updates look already way better than without any animations. However I decided to make it look more connected to the UISegmentedControl<\/code> that triggers the updates. I wanted to visually reference to the sliding animation of the UISegmentedControl<\/code> by making the updates slide in and out from left and right. To achieve this, I used the .left<\/code> and .right<\/code> animation parameter.<\/p>\n\n\n\n
All I had to do is to pick the right animation based on the selected segment index:<\/p>\n\n\n
@objc<\/span> func<\/span> changedSegmentedControl<\/span>(_<\/span> sender: UISegmentedControl)<\/span><\/span> {\n<\/span><\/span>\/\/ Here you do your updates<\/span>\n<\/span><\/span>  tableView.reloadSections(IndexSet<\/span>(integersIn: 0<\/span>...tableView.numberOfSections - 1<\/span>), with: sender.selectedSegmentIndex == 0<\/span> ? .left<\/span> : .right<\/span>)\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
This is how it looks now:<\/p>\n\n\n\n
References<\/h2>\n\n\n\n