Smooth table animation while replacing similar cells

Question

I want to replace table cell with another cell having similar contents with animation.

e.g. one cell has label central aligned and other bigger cell with some other contents has same label(with same text, font and color) in top left corner . Any idea how to achieve it?

I have tried:

Standard table cell animations with reloadSections: and reloadRowsAtIndexPath: functions. But I am not able to achieve smooth effect i.e. central aligned label should move to top left corner with animation while cell replace
[self.tableView beginUpdates]; [self.tableView endUpdates];

only gives me height change animation.

Have you tried option 2 but without changing the cell, just update the cell to layout the subviews in new positions? — Wain, Aug 16 '14 at 05:50
Not yet, I have designed two different table cells because expanded cell has other extra elements too, which are distinct from first one. — Atul, Aug 18 '14 at 04:33
I think you will have a hard time for a smooth transition between different cells. You probably look for alpha blending here? Have you thought about reconfiguring the same cell? This gives you much more control. — Eiko, Aug 18 '14 at 07:38
I'm going to go out of my depths here and suggest something a *bit* radical. You can call reload rows with animation, which will do the height change. Simultaneously, you can add a temporary `UIView` on top of your table view, right above your cell, which looks initially like your cell before update. Then animate this view's contents to the final look, while the cell is being reloaded. Once the animations are complete, you remove this view from the superview. To the user it will seem like the cell has animated. The animation durations here must be same. — n00bProgrammer, Aug 21 '14 at 06:13

score 1 · Answer 1 · answered Aug 21 '14 at 04:29

In tableView:willDisplayCell:forRowAtIndexPath: delegate method, you can retrieve current displaying (i.e. old) cell with cellForRowAtIndexPath: method.
Using this, you can do that with reloadRowsAtIndexPaths:withRowAnimation: method.
What you have to do is:

match new cell's label position with old cell
animate both cell's label to new position

like:

- (void)tableView:(UITableView *)tableView willDisplayCell:(BaseCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    BaseCell *oldCell = (BaseCell *)[self.tableView cellForRowAtIndexPath:indexPath];
    if(oldCell != nil && oldCell != cell) {
        CGRect oldFrame = oldCell.titleLabel.frame;
        CGRect newFrame = cell.titleLabel.frame;

        cell.titleLabel.frame = (CGRect){oldFrame.origin, newFrame.size};
        [UIView animateWithDuration:0.25 animations:^{
            oldCell.titleLabel.frame = (CGRect){newFrame.origin, oldFrame.size};
            cell.titleLabel.frame = (CGRect){newFrame.origin, newFrame.size};
        } completion:^(BOOL finished) {
            // reset oldCell's titleLabel position for reuse
            oldCell.titleLabel.frame = oldFrame;
        }];
    }
}

A few things you have to care about:

Do not use autolayout for cell nib. that will make things too complicated.
Be sure to reset label's position for reuse.
Use UITableViewRowAnimationFade for reloadRowsAtIndexPaths:withRowAnimation:.

score 0 · Answer 2 · answered Aug 18 '14 at 08:09

Table cells only have a few predefined possible animations.

You should animate your label manually by changing its frame inside the cell inside a [UIView animateWithDuration:animations:]. Just the way you would animate any other view.

Also you will have to keep track of the state of the label when reusing/reconfiguring the cell at tableView:cellForRowAtIndexPath:.

Weeman360 · Answer 3 · 2014-08-18T09:05:42.150

you can perform animations on a cell with the

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

delegate method. For instance you can fade cells in by using UIView animations or CABasicAnimation like this:

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    [cell setAlpha:0.1];
    [UIView animateWithDuration:0.5f animations:^{
        [cell setAlpha:1];
    }];
}

Smooth table animation while replacing similar cells

3 Answers3