UICollectionView 动画(插入/删除项目) [英] UICollectionView animations (insert/delete items)

问题描述

我想在插入和/或删除 UICollectionViewCell 时自定义动画样式.

I'd like to customize the animation styles when a UICollectionViewCell is inserted and/or deleted.

我需要这个的原因是，默认情况下，我看到插入单元格具有平滑的动画淡入淡出，但是删除单元格具有向左移动 + 淡出动画的组合.如果不是因为一个问题，我会对此感到非常高兴.

The reason why I need this is that by default I see that inserting a cell has a smooth fade in animation, however deleting a cell has a combination of move-to-the-left + fade out animation. I would be very happy with this if not for one problem.

删除一个单元格后，当我添加新单元格时，它仍然会被重用，而当它被重用时，它不是以默认淡入效果添加的，而是向左移动 + 淡入的组合.

After I delete a cell, it is still reused when I add new ones, and when it's reused it's added not with the default fade in effect, but instead it's a combination of move-to-the-left + fade in.

我不确定为什么我会在动画中出现这种不一致的情况.如果这是一个已知的错误/问题/愚蠢(在我这边:))请告诉我如何解决它.

I'm not sure why I'm getting this inconsistency in animations. If this is a known bug/problem/stupidity(on my side :)) please let me know how to fix it.

否则，请告诉我如何在删除单元格时设置自定义动画(或指向我的教程).

Otherwise, let me know how to set custom animations when the cell is deleted (or point me towards a tutorial).

谢谢

更新

通过继承 UICollectionViewFlowLayout 并添加这行代码来修复奇怪的动画行为

Fixed the weird animation behavior by subclassing UICollectionViewFlowLayout and adding this line of code

- (UICollectionViewLayoutAttributes *) initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath {

      return nil;
}

就是这样！:)

推荐答案

如果使用自己的UICollectionViewLayout子类，可以实现方法:

If you use your own subclass of UICollectionViewLayout, you can implement the methods:

• initialLayoutAttributesForAppearingItemAtIndexPath: 用于插入

finalLayoutAttributesForDisappearingItemAtIndexPath: 用于删除

根据文档，您返回的属性用作动画的起点，终点是您的布局返回的正常属性(或相反的删除).布局属性包括位置、alpha、transform...当然，编写自己的布局类比使用 Apple 提供的流式布局需要更多的工作.

According to the documentation, the attributes you return are used as starting points for the animation, and the end point are the normal attributes returned by your layout (or the opposite for deletion). Layout attributes include position, alpha, transform... Of course, it is more work to write your own layout class than to use the Apple provided flow layout.

要在评论中回答您的问题，这里是一个超级基本的布局实现，用于所有相同大小的项目行.

To answer your question in the comments, here is a super basic implementation of a layout for rows of items which are all the same size.

一个单元格有一个 frame，默认情况下，一个 alpha 为 1.0(由 layoutAttributesForItemAtIndexPath: 定义).当它被删除时，它的属性会从删除前的当前状态动画到由finalLayoutAttributesForDisappearingItemAtIndexPath:设置的属性，对应同一个frame和一个alpha 为 0.0.所以它不会移动，但会淡出.但是，右侧的单元格将向左移动(因为它们的 indexPath 已更改，因此它们的 frame 由 layoutAttributesForItemAtIndexPath:).

A cell has a frame and, by default, an alpha of 1.0 (as defined by layoutAttributesForItemAtIndexPath:). When it is deleted, its properties will be animated from its current state before the deletion to the properties set by finalLayoutAttributesForDisappearingItemAtIndexPath:, which correspond to the same frame and an alpha of 0.0. So it won't move but it will fade out. However, the cells to the right are going to be moved to the left (because their indexPath has changed, and thus their frame as set by layoutAttributesForItemAtIndexPath:).

- (CGSize)collectionViewContentSize
{
    NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:0];
    return CGSizeMake(numberOfItems * ITEM_WIDTH, ITEM_HEIGHT);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSUInteger index = [indexPath indexAtPosition:0];
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attributes.frame = CGRectMake(index * ITEM_WIDTH, 0, ITEM_WIDTH, ITEM_HEIGHT);
    return attributes;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *attributes = [NSMutableArray new];
    NSUInteger firstIndex = floorf(CGRectGetMinX(rect) / ITEM_WIDTH);
    NSUInteger lastIndex = ceilf(CGRectGetMaxX(rect) / ITEM_WIDTH);
    for (NSUInteger index = firstIndex; index <= lastIndex; index++) {
        NSIndexPath *indexPath = [[NSIndexPath alloc] initWithIndexes:(NSUInteger [2]){ 0, index } length:2];
        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
    return attributes;
}

- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
    attributes.alpha = 0.0;
    return attributes;
}

这篇关于UICollectionView 动画(插入/删除项目)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！