Can you animate a height change on a UITableViewCell when selected?

Question

I'm using a UITableView in my iPhone app, and I have a list of people that belong to a group. I would like it so that when the user clicks on a particular person (thus selecting the cell), the cell grows in height to display several UI controls for editing the properties of that person.

Is this possible?

Answer 1

To my knowledge, the height of the cell itself cannot be animated, however the contentView of the cell, is allowed to be bigger than the cell itself. You may want to animate the size cell's contentView frame and have it draw over the cell below or above it.

Answer 2

This doesn't answer your question, but if you're working on an app you're hoping to put in the App Store it's worth noting you might get rejected for non-standard UI. There is precedent: http://blogs.oreilly.com/iphone/2009/01/thinking-about-table-selection.html

Answer 3

Get the indexpath of the row selected. Reload the table. In the heightForRowAtIndexPath method of UITableViewDelegate, set the height of the row selected to a different height and for the others return the normal row height

Answer 4

reloadData is no good because there's no animation...

This is what I'm currently trying:

NSArray* paths = [NSArray arrayWithObject:[NSIndexPath indexPathForRow:0 inSection:0]];
[self.tableView beginUpdates];
[self.tableView insertRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
[self.tableView deleteRowsAtIndexPaths:paths withRowAnimation:UITableViewRowAnimationFade];
[self.tableView endUpdates];

It almost works right. Almost. I'm increasing the height of the cell, and sometimes there's a little "hiccup" in the table view as the cell is replaced, as if some scrolling position in the table view is being preserved, the new cell (which is the first cell in the table) ends up with its offset too high, and the scrollview bounces to reposition it.

Answer 5

You can try reloadRowsAtIndexPath:, but I've never been able to get it to work for more than one cell at a time - on the second selection, junk inevitably presents itself.

Answer 6

I just resolved this problem with a little hack:

static int s_CellHeight = 30;
static int s_CellHeightEditing = 60;

- (void)onTimer {
    cellHeight++;
    [tableView reloadData];
    if (cellHeight < s_CellHeightEditing)
     heightAnimationTimer = [[NSTimer scheduledTimerWithTimeInterval:0.001 target:self selector:@selector(onTimer) userInfo:nil repeats:NO] retain];
}

- (CGFloat)tableView:(UITableView *)_tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
     if (isInEdit) {
      return cellHeight;
     }
     cellHeight = s_CellHeight;
     return s_CellHeight;
}

When I need to expand the cell height I set isInEdit = YES and call the method [self onTimer] and it animates the cell growth until it reach the s_CellHeightEditing value :-)

Answer 7

I found a REALLY SIMPLE solution to this as a side-effect to a table view I was working on.....

Store the cell height in a variable that reports the original height normally via the heightForCellAt..etc etc then when you want to animate a height change, simply change the value of the variable and call this...

[tableView beginUpdates];
[tableView endUpdates];

You will find it doesn't do a full reload but is enough for the table to know it has to redraw the cells, grabbing the new height value for the cell.... and guess what? It ANIMATES the change for you. Sweet.

Answer 8

Simon Lee's answer works great. Just keep an array of rowHeights. Change the one you want and then do his beginUpdates/endUpdates trick.