手风琴表格单元格 - 如何动态扩展/收缩uitableviewcell？ [英] Accordion table cell - How to dynamically expand/contract uitableviewcell?

问题描述

我正在尝试创建一个手风琴类型的uitableviewcell，当用户选择单元格时，它会展开以显示内联的详细信息视图，类似于digg应用程序的工作方式。我最初尝试用cellForRowAtIndex中的customcell替换当前的tablecell但是动画看起来有点不稳定，因为你可以看到被替换的单元格，整体效果不好。

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 doesnt work to well.

如果你看看digg应用程序以及其他已经完成此操作的应用程序，似乎它们不会替换当前的单元格，而是可能在单元格中添加子视图？然而原始单元似乎根本没有动画，只有新视图符合表格。

If you look at the digg app and others who have done this it seems that they arent replacing the current cell but instead perhaps adding a subview to the cell? The original cell however doesnt 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?

更新：
我已经使用下面的neha方法取得了一些进展，同时单元格以正确的方式制作动画它正在对表中的其他细胞造成严重破坏。我所做的是使用自定义类子类化UITableViewCell，该自定义类包含一个实际绘制视图的UIView实例，然后我将其添加到表格单元内容视图中。

Update: 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 cells 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 arent being shown. They do however show up when i scroll the cell off and on the screen.

任何想法？

推荐答案

Apple的做法是相当的简单。

The Apple way to do is quite simple.

首先，您需要保存选定的indexPath行：

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.

然后，当您拥有当前选择的索引时，您可以告诉tableView它应该为该行提供更多空间。

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;
}

这将返回所选单元格的高度100。

This will return height 100 for the selected cell.

现在我们可以回到开始/结束更新。该块触发重载所有tableView几何体。此外，该块是动画的，最终给出了行扩展的影响。

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 impresions of the row expanding.

希望这有用，
Pawel

Hope this was helpful, Pawel

这篇关于手风琴表格单元格 - 如何动态扩展/收缩uitableviewcell？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！