重新加载数据时 TableViewCell 中的动画答案

【问题标题】：Animation in TableViewCell at reloading data time重新加载数据时 TableViewCell 中的动画
【发布时间】：2015-05-04 04:09:08
【问题描述】：

我有 UITableViewCell 带有指向顶部或向下的详细箭头。

点击此单元格后，我想将其展开。所以我会重新加载UITableView and I want to animate rotation ofUIImageView`。

问题 - 是否可以在 UITableView 重新加载数据的同时为 UIImageView 的旋转设置动画？

【问题讨论】：

是的，可以同时为图像视图和扩展单元格设置动画。要动画扩展单元格，请使用UITableView 的- (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation: (UITableViewRowAnimation)animation 方法。对于图像动画，使用UITableViewCell 的自定义子类并在该类中处理点击和动画。
Akhilrajtr，谢谢，如何保存单元格状态的最佳方法（简单/详细）？在VC的数组中？
如果您有一个数据源对象数组（从中填充了 tableview），请将单元格的状态保存在该对象本身中。那将是最好的解决方案。如果您没有对象的数据源数组，请保留 NSMutableArray 以保存/添加 NSIndexPath 的展开单元格。

标签： ios objective-c uitableview animation uiimageview

【解决方案1】：

是的，您可以创建一个包含可展开/可接触单元格的表格，同时展开时您可以为单元格的容器设置动画。

但是，除非需要重新加载表格，否则我会建议您在同时执行动画的情况下重新加载行。

此外，正如您在评论中询问的那样，跟踪单元格是需要显示简单还是详细的最佳方法是什么，我认为这取决于您的要求，例如，如果您一次只需要显示一个展开的单元格，那么您只需将当前扩展单元格的索引保留在类中，否则如果您需要一次显示多个扩展单元格，则可以使用数据源来保留单元格是否需要显示为简单或详细的信息。如果您没有数据源，则可以通过创建单元格的索引路径列表来跟踪详细单元格来执行相同操作。

您需要以编程方式执行以下操作以显示简单/详细的单元格-

注意：我假设一次只显示一个展开的单元格。

1) 创建一个成员变量来跟踪展开的单元格。

NSIndexPath *expandedCellIndexPath;

2) 返回展开单元格的高度（如果展开），否则返回简单单元格

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if([expandedCellIndexPath compare:indexPath] == NSOrderedSame)
       return 100.0f;

    return 50.0f;
}

3) 将单元格创建为-

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"cellId";

    CustomCell *customCell = nil;

    customCell = (CustomCell *) [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    if(customCell == nil)
    {
        NSString *nibName = @"CustomCell_iPhone";

        customCell = (CustomCell *)[[[NSBundle mainBundle] loadNibNamed:nibName owner:self options:nil] lastObject];

        customCell.selectionStyle = UITableViewCellSelectionStyleNone;
    }

    if([expandedCellIndexPath compare:indexPath] == NSOrderedSame)
    {
        [customCell.m_arrowImageView setImage:[UIImage imageNamed:DOWN_ARROW_KEY]];
        [self showSelectedCellAnimations:customCell];
    }
    else
    {
        [customCell.m_arrowImageView setImage:[UIImage imageNamed:UP_ARROW_KEY]];
        [self showUnSelectedCellAnimations:customCell];
    }

    // you can also set default up arrow image and rotate it with down arrow image and vice versa

    return customCell;
}

4) 旋转向上/向下箭头图像使用-

- (void)rotateImage:(UIImageView *)image duration:(NSTimeInterval)duration
              curve:(int)curve degrees:(CGFloat)degrees
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:duration];
    [UIView setAnimationCurve:curve];
    [UIView setAnimationBeginsFromCurrentState:YES];

    CGAffineTransform transform =
    CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(degrees));
    image.transform = transform;

    [UIView commitAnimations];
}

5) 将上述方法调用为-

[self rotateImage:customCell.m_helpImage duration:0.25
                            curve:UIViewAnimationCurveEaseIn degrees:0.0];

6) 在didSelectRowAtIndexPath:里面设置expandedCellIndexPath为当前需要展开的索引路径，重新加载之前展开的行来收缩，重新加载当前的expandedCellIndexPath行来展开，如-

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:NO];

    CustomCell *customCell = nil;

    customCell = (CustomCell *)[tableView cellForRowAtIndexPath:indexPath];

    NSIndexPath *previousIndexPath = expandedCellIndexPath;

    if([expandedCellIndexPath compare:indexPath] != NSOrderedSame)
          expandedCellIndexPath = indexPath;

    [self.m_tableView reloadRowsAtIndexPaths:@[previousIndexPath]
                            withRowAnimation:UITableViewRowAnimationFade];

    [self.m_tableView reloadRowsAtIndexPaths:@[expandedCellIndexPath]
                            withRowAnimation:UITableViewRowAnimationFade];

    [self.m_tableView scrollToRowAtIndexPath:indexPath
                            atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}

【讨论】：