Can UIView frame be animated during UITableView update? - iphone

Question

I have a table view with a fairly complex cell. The cell includes a button that when pressed, should expand the cell and present some extra controls. I thought this would be pretty simple, so I wrote the following code (in my class derived from UITableViewCell):
self.extraView = [[MyView alloc] initWithFrame:CGRectMake(0,100,300,200)];
self.extraView.clipsToBounds = YES;
[self addSubview:self.extraView];
self.extraView.transform = CGAffineTransformMakeScale(1, 0.1f);
[UIView animationWithDuration:0.5 animations:^{
[tableView beginUpdates];
[tableView endUpdates];
self.extraView.transform = CGAffineTransformIdentity;
}];
Surprisingly, this makes extraView flash briefly on screen and then disappear. If I remove the calls to beginUpdates and endUpdates then extraView animates exactly as I expected. However, the table cell is not large enough to display it. I tried setting alpha to 0 and then fading it in during the table update, and that seems to work fine. Unfortunately, I am supposed to make the extraView grow in place and not fade.
I have played with various ways of modifying extraView such as changing the frame, but the table updates always produce some side effect. I also tried chaining the scale change in the completion handler, which of course didn't work either. I think that is because the table view is not done animating when the completion block is executed.
Is there any way to animate the frame of a view in a cell during a table update?

Answer 1

It appears that the answer is no. At least, I have not found anything that will look visually correct when modifying the view frame during the table view update. What I do instead now is wait a bit and then grow the view's frame. This is how the code looks:
extraView.alpha = 0; // hide the view immediately after adding it
[tableView beginUpdates];
[tableView endUpdates];
[UIView animateWithDuration:0.5 animations:^{
button.alpha = 0; // fade out old button
} completion:^(BOOL finished) {
extraView.alpha = 1; // reappear, but not fading in
extraView.transform = CGAffineTransformMakeScale(1, 0.01f);
[UIView animateWithDuration:0.5 animations:^{
extraView.transform = CGAffineTransformIdentity; // animate scale back to original size
}];
}];
This not exactly the effect I was trying to create, but it is the closest I have been able to get. I'm posting it as the answer in case anyone else encounters a similar issue.

Answer 2

I had a similar issue, and wanted to open / close and change specific elements in a cell by animation based on selection.
I did this by first of all creating a subclass for the uitableviewcell.
Each tableviewcell has an open and close method which does an animation of the backgroundcolor and the size (among other things).
The open and close methods of the tableviewcell look like this:
- (void)open {
[UIView animateWithDuration:0.3
animations:^{
[self.customBackgroundView setHeight:76];
self.deleteButton.alpha = 1;
self.selectedIndicator.transform = CGAffineTransformMakeRotation(M_PI);
[self.selectedIndicator setY:60];
}
];
}
- (void)close {
[UIView animateWithDuration:0.3
animations:^{
[self.customBackgroundView setHeight:40];
self.deleteButton.alpha = 0;
self.selectedIndicator.transform = CGAffineTransformMakeRotation(0);
[self.selectedIndicator setY:24];
}
];
}
It also has a setSelected method, so when the cell is selected it opens:
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
if (selected) {
[self open];
} else {
[self close];
}
}
Now, only thing left, is to make sure to close other cells, when this cell is selected.
And call the tableview beginUpdates and tableview endUpdates:
- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (_currentSelection == indexPath.row) {
_currentSelection = -1;
SOColumnTableViewCell *cell = (SOColumnTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
[cell close];
} else {
_currentSelection = (int)indexPath.row;
}
[tableView beginUpdates];
[tableView endUpdates];
}
}