Custom animation for resizing UITableViewCell

Question

I want to make a UITableViewCell height change animation with a UIView animation (in the future with spring animation).

So, I have a:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = (UITableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        cell.backgroundColor = [UIColor greenColor];
    }
    UILabel *viewLabel = [[UILabel alloc] initWithFrame:CGRectMake(10.0f, 10.0f, [[UIScreen mainScreen] bounds].size.width, 40.0f)];
    viewLabel.text = @"Test";
    viewLabel.backgroundColor = [UIColor clearColor];
    [cell.contentView addSubview:viewLabel];

    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView beginUpdates];
    [self animateCell:indexPath andTableView:tableView];
    [tableView endUpdates];
}


- (void)animateCell:(NSIndexPath*)indexPath andTableView:(UITableView*)tableView
{
    [UIView animateWithDuration:1.0f animations: ^
     {
         UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
         CGRect rect = cell.frame;
         rect.size.height = 90.0f;
         cell.frame = rect;
         NSLog(@"%f", cell.frame.size.height);
     }];
}

But that will not work. But if I add:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([indexPath isEqual:[tableView indexPathForSelectedRow]])
    {
        return 90.0f;
    }
    return 40.0f;
}

I see that the cell changes its height, and the animation is applied to the custom cell created in the animateCell method.

Answer 1

I think you should not use the beginUpdate/ methods endUpdatesand do the animation manually before calling reloadData. The final state of the cells (after the animation) is determined using the data source. Here is an example animation intableView:didSelectRowAtIndexPath:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    _selectedIndexPath = indexPath;

    [UIView animateWithDuration:1 animations:^{
        // move down cells which are below selected one
        for (UITableViewCell *cell in tableView.visibleCells) {
            NSIndexPath *cellIndexPath = [tableView indexPathForCell:cell];

            if (cellIndexPath.row > indexPath.row) {
                CGRect frame = cell.frame;
                frame.origin.y += kTargetHeight - tableView.rowHeight;
                cell.frame = frame;
            }
        }
        // expand selected cell
        UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];

        CGRect frame = cell.frame;
        frame.size.height = kTargetHeight;
        cell.frame = frame;
    } completion:^(BOOL finished) {
        [tableView reloadData];  // commit final state
    }];
}

The final state of the selected cell:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([indexPath isEqual:_selectedIndexPath]) {
        return kTargetHeight;
    }

    return tableView.rowHeight;
}