Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to animate UITableView header view

I need to animate the insertion of a tableview header view. I want that the table rows to slide down while the header view expands its frame.
So far the best result I got is by using the following code:

[self.tableView beginUpdates];  
[self.tableView setTableHeaderView:self.someHeaderView];  
[self.tableView endUpdates];

The problem with this solution is that the header itself doesn't get animated, its frame doesn't expand.

So the effect I'm getting is that the table rows slide down (as I want) but the header view is immediately shown, and I want it to expand it's frame with animation.

Any ideas?

Thanks.

like image 494
Mario Avatar asked May 13 '13 09:05

Mario


Video Answer


2 Answers

have the header frame at CGRectZero and set its frame using animation

[self.tableView beginUpdates];  
[self.tableView setTableHeaderView:self.someHeaderView];  

[UIView animateWithDuration:.5f animations:^{
  CGRect theFrame = someBigger.frame;
  someHeaderView.frame = theFrame;
}];

[self.tableView endUpdates];  
like image 198
Bonnie Avatar answered Sep 22 '22 08:09

Bonnie


Here's what I got to work in Swift, with an initial frame height of zero and updating it to its full height in the animations closure:

// Calculate new frame size for the table header
var newFrame = tableView.tableHeaderView!.frame
newFrame.size.height = 42

// Get the reference to the header view
let tableHeaderView = tableView.tableHeaderView

// Animate the height change
UIView.animate(withDuration: 0.6) {
    tableHeaderView.frame = newFrame
    self.tableView.tableHeaderView = tableHeaderView
})
like image 33
prolfe Avatar answered Sep 21 '22 08:09

prolfe