Accordion table cell - How to dynamically expand/contract uitableviewcell?

Question

I am trying create an accordion type of uitableviewcell that, when the user selects the cell, it expands to display a detailed info view inline similar to how the digg app works. I initially tried replacing the current tablecell with a customcell in cellForRowAtIndex, however the animation looks a bit choppy as you can see the cell being replaced and overall the effect doesn't work too well.

If you look at the digg app and others who have done this it seems that they aren't replacing the current cell but instead perhaps adding a subview to the cell? The original cell however doesn't seem to animate at all and only the new view accordions into the table.

Does anyone have any ideas how to accomplish a similar effect?

I have made some progress using neha's method below and while the cell is animating the correct way it is wreaking havoc with the other cells in the table. What I have done is subclassed UITableViewCell with a custom class which contains an instance of a UIView which actually draws the view which I then add to the table cell's contentview.

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {  if (selected) {      [self expandCell]; } }  -(void)expandCell {      self.contentView.frame = CGRectMake(0.0, 0.0, self.contentView.bounds.size.width, 110); } 

Here are all the table delegate methods I am using:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {      if (isSearching && indexPath.row == selectedIndex) {          static NSString *CellIdentifier = @"SearchCell";     CustomTableCell *cell = (CustomTableCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];     if (cell == nil) {         cell = [[[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];     }          [cell setCustomTitle:[timeZoneNames objectAtIndex:indexPath.row] detail:[timeZoneNames objectAtIndex:indexPath.row]];      UILabel *theText = [[UILabel alloc] initWithFrame:CGRectMake(10.0, 10.0, cell.contentView.bounds.size.width -20, 22.0)];     theText.text = @"Title Text";     [cell.contentView addSubview:theText];       UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(10.0, 10 + 46.0, cell.contentView.bounds.size.width - 20, 40.0)];     textField.borderStyle = UITextBorderStyleLine;     [cell.contentView addSubview:textField];              UILabel *testLabel = [[UILabel alloc] initWithFrame:CGRectMake(5.0, 88.0, cell.contentView.bounds.size.width - 20, 22.0)];     testLabel.text = [NSString stringWithFormat:@"Some text here"];     [cell.contentView addSubview:testLabel];      [theText release];     [textField release];     [testLabel release];      return cell;         } else {          static NSString *CellIdentifier = @"Cell";     CustomTableCell *cell = (CustomTableCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];     if (cell == nil) {         cell = [[[CustomTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];     }      [cell setCustomTitle:[timeZoneNames objectAtIndex:indexPath.row] detail:[timeZoneNames objectAtIndex:indexPath.row]];     return cell;  }   - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {  [tableView deselectRowAtIndexPath:indexPath animated:NO];     selectedIndex = indexPath.row; isSearching = YES;   [tableView beginUpdates]; [tableView endUpdates];  }   - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {         if (isSearching && indexPath.row == selectedIndex) {     return 110; } return rowHeight;            }  

It seems now that the cell is expanding but not actually being refreshed so the labels, and textfield aren't being shown. They do however show up when I scroll the cell off and on the screen.

Any ideas?

Answer 1

The Apple way to do is quite simple.

First, you'll need to save the selected indexPath row:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {    self.selectedRowIndex = [indexPath retain];    [tableView beginUpdates];    [tableView endUpdates]; } 

I'll explain the begin/end updated part later.

Then, when you have the currently selected index, you can tell the tableView that it should give that row more space.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {    //check if the index actually exists    if(selectedRowIndex && indexPath.row == selectedRowIndex.row) {         return 100;    }    return 44; } 

This will return height 100 for the selected cell.

Now we can go back to the begin/end updates. That block triggers the reload of all tableView geometry. Moreover, that block is animated, which eventually gives the impressions of the row expanding.