3

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:

header glitch

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];
    }
}
Community
  • 1
  • 1
Besi
  • 22,579
  • 24
  • 131
  • 223
  • Change the tableview style to grouped and verify. It may solve the issue. – Dee Mar 15 '13 at 12:55
  • @Dee This does not solve the issue for me, since I need the floating table view headers – Besi Mar 15 '13 at 13:20
  • Found this question, by implementing your animating header and then running into the exact same issue. I'm looking to fix as well, but dont have too much of an idea. – hatunike Apr 11 '13 at 22:09
  • I meant Reproduceable, any way to edit bounty message? – hatunike Apr 11 '13 at 22:12

1 Answers1

6

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];
    }
}
  • This does indeed fix the issue for adding a tableview.tableheader, but when you remove the tableview header the original issue persists. – hatunike Apr 11 '13 at 22:54
  • Ok I verified on original project and this does indeed fix the issue entirely. I'm now looking into why my implemented solution only works while showing the header and not while hiding. – hatunike Apr 11 '13 at 23:10
  • if you're doing more stuff like updating/adding cells you can try to move the `beginUpdates`/`endUpdates` out of this `viewAnimation`. Either entirely without animation or a different animation block. Maybe this helps ;) –  Apr 11 '13 at 23:12
  • Weird. I'm not doing anything else that I can see. Only difference I see between the tableviews is that mine has a custom section header view. That and, the projects tableview is a static tableview and mine's a dynamic one. – hatunike Apr 11 '13 at 23:23
  • Got it fixed! Looked through and there WAS in fact some unrelated code affecting the issue. I'm considering this issue as solved. Thanks. Can't give bounty for 22 hours. – hatunike Apr 11 '13 at 23:36
  • 2
    This does not work for me.... It animates the table view but the header just appears over on top. I am using layout constraints on my custom table header view, if that might affect anything. – LightningStryk Jun 06 '14 at 16:53