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 ?

score 7 · Accepted Answer · answered Feb 19 '13 at 21:30

7

You want to reload that cell with an animation:

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

answered Feb 19 '13 at 21:30

rooster117

5,502
1
21
19

the problem here is that when i select a row, the other ones are keeping the `SecondCell` class since they are not reloaded (only the cell size changed). This is why i called `[tableView reloadData]`. But if I surround `[tableView reloadData]` with `beginUpdates/endUpdates`, there's no animation at all. Any solution for this ? – Yaman Feb 19 '13 at 21:38
well is it possible to just have the same type of cell and do some dynamic calculations on height and layout? I wrote this a little while ago: http://www.roostersoftstudios.com/2011/04/14/iphone-uitableview-with-animated-expanding-cells/ – rooster117 Feb 19 '13 at 21:41
Actually i saw your blog before posting but this is not exactly what i want to do because, you're just resizing a label according to the text then resizing the cell according to the label size. But in my case, i want to add some UIButton, UIImageView, etc. This is why i think 2 custom cells are needed. – Yaman Feb 19 '13 at 21:47
Adding a UIButton and UIImageView dynamically may be easier than creating two unique cells but because I don't know your cell layout maybe I'm wrong. Why not have every cell have all of the UI Elements you need and just hide them and show them when needed. – rooster117 Feb 19 '13 at 21:58
Ye i had this solution in mind but I thought using 2 custom cells would be easier. It seems not :(. Thx for your help man. – Yaman Feb 19 '13 at 22:17

score 4 · Answer 2 · edited May 23 '17 at 10:27

4

[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!

edited May 23 '17 at 10:27

Community

1
1

answered Feb 19 '13 at 21:26

Orbitus007

685
6
12

score 1 · Answer 3 · answered Jul 29 '13 at 03:58

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.

ios - Expand table view cell like Twitter app

3 Answers3

Linked

Related