ios - Expand table view cell like Twitter app

Question

I want to have the same behavior as Twitter app when selecting a tweet that is : expanding the row and adding supplementary content.

So this is not only a basic row resize. I think i need 2 different custom cells, so i did something like that :

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([indexPath compare:self.selectedIndexPath] != NSOrderedSame) {
        FirstCell *cell = [tableView dequeueReusableCellWithIdentifier:@"FirstCell"];
        if (!cell) {
            cell = [[FirstCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"FirstCell"];
        }

        cell.firstnameLabel.text = [[self.items objectAtIndex:indexPath.row] objectForKey:@"firstname"];

        return cell;
    }
    else {
        SecondCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SecondCell"];
        if (!cell) {
            cell = [[SecondCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"SecondCell"];
        }

        cell.firstnameLabel.text = [[self.items objectAtIndex:indexPath.row] objectForKey:@"firstname"];
        cell.lastnameLabel.text = [[self.items objectAtIndex:indexPath.row] objectForKey:@"lastname"];

        return cell;
    }

}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if ([indexPath compare:self.selectedIndexPath] == NSOrderedSame) {
        return 80.0;
    } else {
        return 44.0;
    }
}

#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    self.selectedIndexPath = indexPath;

    [tableView reloadData];
}

My problem here is that i want to keep a fluid animation like Twitter app which is not my case because of [tableView reloadData] (which is mandatory i think since i have 2 different custom cell).

So anyone knows a workaround to my needed or maybe someone knows how Twitter app is handling this animation stuff ?

Answer 1

You want to reload that cell with an animation:

[tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
[tableView endUpdates];

Answer 2

It is actually rather easy to implement this using two custom cells like you originally intended by just combining your original code with rooster117's solution. Replace [tableView reloadData] in your tableView:didSelectRowAtIndexPath: with:

[tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
[tableView endUpdates];

and you should have your solution.

Answer 3

[tableView beginUpdates];
[tableView endUpdates];

this triggers an update of the cell row sizes for the whole tableView.... referenced from :iPhone - Smooth animation for UITableViewCell height change including content update

Happy Coding!