Animate `UITableView` headers when animating `tableHeaderView` in

Question

For an answer for "How to resize a tableHeaderView of a UITableView?" I created a small project on github, which adds a header view to a UITableView and animates both the newly added header view and the cells underneath it.

However, as soon as I add header cells I get a nasty UI glitch because the headers don't animate along with the cells of the UITableView:

When I add the header the following steps happen:

1. Problem: The topmost header jumps to the original position
2. The tableHeaderView and the UITableViewCells animate together to their final position.

So my question is, how I can make sure that the headers also animate.

You can see the effect here, where the Section-1 is at the final position, while the cells and the header view are still animating:

This is the method, where I do the animation:

- (void) showHeader:(BOOL)show animated:(BOOL)animated{

    CGRect closedFrame = CGRectMake(0, 0, self.view.frame.size.width, 0);
    CGRect newFrame = show?self.initialFrame:closedFrame;

    if(animated){
        // The UIView animation block handles the animation of our header view
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.3];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

        // beginUpdates and endUpdates trigger the animation of our cells
        [self.tableView beginUpdates];
    }

    self.headerView.frame = newFrame;
    [self.tableView setTableHeaderView:self.headerView];

    if(animated){
        [self.tableView endUpdates];
        [UIView commitAnimations];
    }
}

Answer 1

this will fix it, but I'm not sure if you need the beginUpdates and endUpdates in another part of this class. Because your dataSource don't really change in this example.

- (void)showHeader:(BOOL)show animated:(BOOL)animated {

    CGRect closedFrame = CGRectMake(0, 0, self.view.frame.size.width, 0);
    CGRect newFrame = show?self.initialFrame:closedFrame;

    if(animated){
        // The UIView animation block handles the animation of our header view
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:0.3];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

        // beginUpdates and endUpdates trigger the animation of our cells
        //[self.tableView beginUpdates];
    }

    self.headerView.frame = newFrame;
    [self.tableView setTableHeaderView:self.headerView];

    if(animated){
        //[self.tableView endUpdates];
        [UIView commitAnimations];
    }
}