How to simultaneously animate a cell and table change in iOS? - ios

Question

I am trying to simultaneously animate a custom UITableViewCell and the UITableView that contains it.
When clicked, the subviews of the UITableViewCell slightly re-arrange such that the height of the cell increases. I want the re-arrangement within the cell to happen concurrently with the resizing of the UITableView's slot for that cell, so that it doesn't overlap with the cell below it.
When clicked again, the reverse is to happen.
This is what I've tried so far.
The UITableView
When the UITableView is clicked, I use didSelectRowAtIndexPath to update a selectedPath property:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
if (self.selectedPath && indexPath.row == self.selectedPath.row) {
self.selectedPath = nil;
} else {
self.selectedPath = indexPath;
}
[tableView reloadData];
}
Note, it calls reloadData, which triggers each visible cell to re-fetch the prototype and configure it based on whether it is selected or not:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
QueueItemTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"QueueCell" forIndexPath:indexPath];
[cell setImage:[UIImage imageNamed:[self.imageList objectAtIndex:indexPath.row]]];
if (self.selectedPath && indexPath.row == self.selectedPath.row) {
[cell makeSelected:YES];
} else {
[cell makeSelected:NO];
}
return cell;
}
- (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*) indexPath {
CGFloat height = 210;
if (indexPath.row == [self.imageList count] - 1) {
height += 10;
}
if (self.selectedPath && indexPath.row == self.selectedPath.row) {
height += 35;
}
return height;
}
The UITableViewCell subclass
In the custom cell class, its animation happens when it is made selected or not selected:
- (void)makeSelected:(BOOL)selected {
if (selected) {
[UIView animateWithDuration:0.5 animations:^{
self.customImage.frame = CGRectMake(5, 5, 310, 210);
}];
} else {
[UIView animateWithDuration:0.5 animations:^{
self.customImage.frame = CGRectMake(10, 10, 300, 200);
}];
}
}
What is happening
The table view immediately snaps to the new the allotted height for the cell, and then the cell's contents slowly animate to the new state. I want the two things to happen concurrently, and smoothly.

Answer 1

You might want to call
[UIView animateWithDuration:0.5 animations:^{
[self.tableView reloadData];
}];
and re-write the custom cell as following:
- (void)makeSelected:(BOOL)selected {
if (selected) {
self.customImage.frame = CGRectMake(5, 5, 310, 210);
} else {
self.customImage.frame = CGRectMake(10, 10, 300, 200);
}
}
I hope it helps.

Answer 2

try this... reload particular cell insteade
NSIndexPath* indexPath1 = [NSIndexPath indexPathForRow:selectedRowIndexPath inSection:section];
// Add them in an index path array
NSArray* indexArray = [NSArray arrayWithObjects:indexPath1, nil];
// Launch reload for the two index path
[self.tableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationFade];

Answer 3

[self.tableView beginUpdates];
[self.tableView reloadRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationNone];
[self.tableView endUpdates];
You need to reload particular cell while tap use like this..
- (void)makeSelected:(BOOL)selected {
if (selected) {
self.customImage.frame = CGRectMake(5, 5, 310, 210);
} else {
self.customImage.frame = CGRectMake(10, 10, 300, 200);
}
}
Declare BOOl isSelect; as Global
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
if (self.selectedPath && indexPath.row == self.selectedPath.row) {
isSelect = NO;
} else {
self.selectedPath = indexPath;
isSelect = YES;
}
[self.tableView beginUpdates];
[self.tableView reloadRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationNone];
[self.tableView endUpdates];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
QueueItemTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"QueueCell" forIndexPath:indexPath];
[cell setImage:[UIImage imageNamed:[self.imageList objectAtIndex:indexPath.row]]];
if (self.selectedPath && indexPath.row == self.selectedPath.row && isSelect) {
[cell makeSelected:YES];
} else {
[cell makeSelected:NO];
}
return cell;
}
- (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*) indexPath {
CGFloat height = 210;
if (indexPath.row == [self.imageList count] - 1) {
height += 10;
}
if (self.selectedPath && indexPath.row == self.selectedPath.row && isSelect) {
height += 35;
}
return height;
}
It reload the cell with animation.. I hope it will help you.. Now you check it will work as you want...