Animate [tableView reloadData]

Question

I have a UITableViewCell that expands and adds a label on click.

Logic:

I added a label in cellForRowAtIndexPath to the selected cell, and in didSelectRow... I reloaded the tableView. In heightForRow... the selected cell expands. Hope you get the picture.

In didSelectRow... I have to reloadData, and not begin/end update. What I want to do is reloadData and have it animate. I can do like this:

[UIView transitionWithView: tableView
                  duration: 0.40f
                   options: UIViewAnimationOptionTransitionCrossDissolve
                animations: ^(void)
 {
   [self.tableView reloadData];
 }
                completion: nil
 }];

So that does a cross dissolve of the cells that is changing. What I want is UITableViewRowAnimationTop, but apparently that is not possible in the transition options. Is there a way to reloadData and use UITableViewRowAnimationTop?

Solution 1

[UITablewView reloadData:] is not animatable. However, you may want to try reloading tableView by reloading all sections with animation.

NSIndexSet *sections = [NSIndexSet indexSetWithIndexesInRange:NSMakeRange(0, [tableView numberOfSections])];

[self.tableView reloadSections:sections withRowAnimation:UITableViewRowAnimationAutomatic];

---

OK, I lied. It may be animatable but it requires much knowledge about how QuartzCore Framework operates on UI components.

@import QuartzCore;

---

[self.tableView reloadData];

CATransition *transition = [CATransition animation];
transition.type = kCATransitionPush;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.fillMode = kCAFillModeForwards;
transition.duration = 0.6;
transition.subtype = kCATransitionFromTop;

[self.tableView.layer addAnimation:transition forKey:@"UITableViewReloadDataAnimationKey"];

Solution 2

A much simpler solution that doesn't require CoreAnimation.

Swift 3:

UIView.transition(with: self.view,
                  duration: 0.15,
                  options: [.curveEaseInOut, .transitionCrossDissolve],
                  animations: {
                      self.tableView.reloadRows(at: self.tableView.indexPathsForVisibleRows!, with: .none)
}, completion: nil)

Solution 3

Swift 4 solution with QuartzCore

import QuartzCore

---

tableView.reloadData()

let transition = CATransition()
transition.type = kCATransitionPush
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
transition.fillMode = kCAFillModeForwards
transition.duration = 0.6
transition.subtype = kCATransitionFromBottom
    
tableView.layer.add(transition, forKey: "UITableViewReloadDataAnimationKey")

---

Swift 5

tableView.reloadData()
let transition = CATransition()
transition.type = .push
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
transition.fillMode = .forwards
transition.duration = 0.6
transition.subtype = .fromBottom

Solution 4

Or this:

    NSIndexSet *sections = [NSIndexSet indexSetWithIndexesInRange: NSMakeRange(0, [self numberOfSectionsInTableView: self.tableView])];
    [self.tableView reloadSections: sections withRowAnimation: UITableViewRowAnimationTop];

Personally, I think UITableViewRowAnimationFade looks much better tho.

View more solutions

Comments

[Admin]

There isn't animation a xcodes intelligent inspector.

[Ozgur Vatansever]

I didn't understand what you meant. CATransition has a class method named transition. Are you sure you are not writing CATransaction?

[Admin]

You're right, I was using CATransaction. I just tried it, and what happens is, the whole tableView goes down then back up, and the table doesn't even reload?

[fivewood]

This approach uses reloadData() so that it allows animation of updates to the tableView structure (not just row or section insertions, deletions or updates but also refetching or otherwise changing the data source).