42

我有一个 UICollectionViewController 使用标准UICollectionViewFlowLayout来显示单个垂直列的单元格。我正在尝试在点击单元格时在单元格上创建展开/折叠动画。我使用以下代码来完成此操作：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath (NSIndexPath *)indexPath
{
    [self.feedManager setCurrentlySelectedCellIndex:indexPath.item];
    [self.collectionView performBatchUpdates:nil completion:nil];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //Return the size of each cell to draw
    CGSize cellSize = (CGSize) { .width = 320, .height = [self.feedManager heightForCellAtIndexPath:indexPath] };
    return cellSize;
}

我的管理对象上的“selectedCellIndex”属性告诉数据模型返回 heightForCellAtIndexpath 内的展开或折叠大小：

[self.collectionView performBatchUpdates:nil completion:nil];

然后该performBatchUpdates:completiong:方法很好地动画这个大小变化。然而！当动画发生时，扩展单元格可能会导致屏幕底部的部分可见单元格离开屏幕。

如果是这种情况，我随后折叠此单元格，现在屏幕外的单元格将在没有动画的情况下捕捉到其旧位置，而所有其他可见单元格将根据需要进行动画处理。我的直觉说这是正确的行为，因为在执行折叠动画时单元格不在屏幕上，并且不包含在动画渲染过程中。我的问题变成了，我该如何防止这种情况发生？

我希望所有单元格一起制作动画，无论它们是否在屏幕外。有什么想法吗？

4

1 回答 1

29

这是一个UICollectionViewFlowLayout错误，但有一个解决方法。问题是返回的属性initialLayoutAttributesForAppearingItemAtIndexPath:有错误的帧。具体来说，它们具有最终的屏幕上位置的帧，而不是初始的屏幕外位置的帧。您只需要覆盖此方法并返回正确的帧。覆盖的基本结构如下所示：

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath
{
    UICollectionViewLayoutAttributes *pose = [super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];
    if (<test for incorrect frame>) {
        CGRect frame = pose.frame;
        frame.origin.y = <calculate correct frame>;
        pose.frame = frame;
    }
    return pose;
}

您将负责确定需要调整框架的场景，这可能涉及保持您自己的内部状态。我还没有完成这个逻辑，但我确实做了一个粗略的测试，并且能够获得流畅的动画。

概括一下，根据我的经验，UICollectionViewFlowLayout如果您的项目在屏幕上和屏幕外移动以及任何插入、删除或移动相结合，那么存在如此多的错误，并且有太多的角落案例需要处理，我发现了它更容易滚动我自己的简单布局。如果您不打算进行任何插入、删除或移动，那么覆盖UICollectionViewFlowLayout可能是您最好的选择。

如果您需要更多帮助，请告诉我。

编辑

如果您有兴趣查看第 3 方布局，我开源了我的自定义网格布局VCollectionViewGridLayout并添加了一个示例项目，展示了平滑扩展单元格高度。尝试运行Expand 项目。还有一个带有动画排序和过滤功能的Sort & Filter 项目。这两个项目都允许您在流布局和网格布局之间切换，以便您看到改进。

于 2013-06-18T15:30:40.630 回答