Animating a UITableView's header and footer

Question

I'm struggling to animate the removal of a tableview's header/footer content with animation. I believe I can call either removeFromSuperview on the header contents itself, or just assign the header to nil, but I don't know how to animate this. A simple animation block doesn't do anything - how do I fade a view (a label in this case) in/out?

Solution 1

I wrote an example of how to remove the header view altogether using animation blocks.

[UIView beginAnimations:nil context:NULL];
[self.tableView setTableHeaderView:nil];
[UIView commitAnimations];

This of course assumes that this animation is being called upon inside of your UITableViewController class.

Simply removing the header view from the superview doesn't work because the table view doesn't know to resize itself to fill up what used to be the header view. The setting of the header view causes the table view to animatedly refresh itself.

If this doesn't work, check your assignment(s) of the tableView instance.

Solution 2

I ended up with the following simple solution. It animates the removal of the header.

[self.tableView beginUpdates];
self.tableView.tableHeaderView = nil;
[self.tableView endUpdates];

I realize this is mentioned in WINSergey's response, but I found his explanation a bit confusing.

Solution 3

I found the following two options to both work ok:

option 1

[UIView animateWithDuration:0.15
                      delay:0.0
        options: UIViewAnimationCurveEaseOut
                 animations:^{deleteLabel.alpha = 0;}
             completion:nil];

option 2

[UIView beginAnimations:nil context:nil];
deleteLabel.alpha = 0.0;
[UIView commitAnimations];

Solution 4

I had the same problem, I wanted to control how the header is removed, here is my method :

At ViewDidLoad :

UIView *transView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, 320.f, 200.f)];
transView.backgroundColor = [UIColor clearColor];
self.headerView = transView;
[transView release];

[self.tableView setTableHeaderView:self.headerView];

Then when you need to remove header :

[UIView animateWithDuration:.3f
                      delay:.0f
                    options: UIViewAnimationOptionBeginFromCurrentState
                 animations:^{
                     self.headerView.frame = CGRectMake(0.0f, 0.0f, 320.f, 0.0f);
                 }
                 completion:^(BOOL finished) {
                       [tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:section] atScrollPosition:UITableViewScrollPositionTop animated:YES];
                 }];

View more solutions

Comments

[WINSergey]

Sorry, but it works for headers (don't know about cells). I use this in my recent project and all are worked. Can you provide source-code?

[Kudit]

It did not work for inserting a table header view. Using storyboards and auto layout. The view just appears. It does not animate in.

[WINSergey]

the work code '- (void)updateAITrackerStatus{' ' AITracker *tracker = [[[DataSingleton sharedSingleton] theAgenda] aiTracker];' if (tracker) { [_aiTrackerVC setTracker:tracker]; [_tableView beginUpdates]; [[self tableView] setTableHeaderView:[_aiTrackerVC view]]; [_tableView endUpdates]; }else{ [[self tableView] setTableHeaderView:nil]; } }'

[Danny Sung]

Just a minor note for anyone following this, the option above should be UIViewAnimationOptionCurveEaseOut