web-dev-qa-db-ja.com

UICollectionViewアニメーション（アイテムの挿入/削除）

UICollectionViewCellが挿入および/または削除されたときにアニメーションスタイルをカスタマイズしたいと思います。

これが必要な理由は、デフォルトでは、セルを挿入するとアニメーションがスムーズにフェードインしますが、セルを削除すると、左に移動するアニメーションとフェードアウトするアニメーションが組み合わされるためです。 1つの問題がなければ、これに非常に満足しています。

セルを削除した後、新しいセルを追加すると、セルは引き続き再利用され、再利用すると、デフォルトのフェードイン効果ではなく、左に移動+フェードインの組み合わせで追加されます。

アニメーションでこのような矛盾が発生している理由はわかりません。これが既知のバグ/問題/愚かさ（私の側で:)）修正方法を教えてください。

それ以外の場合は、セルが削除されたときにカスタムアニメーションを設定する方法を教えてください（またはチュートリアルを参照してください）。

ありがとう

[〜＃〜] update [〜＃〜]

UICollectionViewFlowLayoutをサブクラス化し、このコード行を追加することにより、奇妙なアニメーション動作を修正しました

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

      return nil;
}

それでおしまい！ :)

iphoneiosobjective-cuicollectionviewuicollectionviewcell
23
Serghei Catraniuc

UICollectionViewLayoutの独自のサブクラスを使用する場合、メソッドを実装できます。

  • initialLayoutAttributesForAppearingItemAtIndexPath:挿入用

  • finalLayoutAttributesForDisappearingItemAtIndexPath:削除用

ドキュメントによると、返される属性はアニメーションの開始点として使用され、終了点はレイアウトによって返される通常の属性（または削除の場合は反対）です。レイアウト属性には、位置、アルファ、変換などがあります。もちろん、提供されたフローレイアウトAppleを使用するよりも、独自のレイアウトクラスを記述する方が手間がかかります。

編集：コメントで質問に答えるために、すべて同じサイズのアイテムの行のレイアウトの超基本的な実装を示します。

セルにはframeがあり、デフォルトでは1.0のalpha（layoutAttributesForItemAtIndexPath:で定義）があります。削除されると、そのプロパティは、同じframeと0.0alphaに対応するfinalLayoutAttributesForDisappearingItemAtIndexPath:で設定されたプロパティへの削除前の現在の状態からアニメーション化されます。そのため、移動しませんが、フェードアウトします。ただし、右側のセルは左側に移動します（indexPathが変更されたため、layoutAttributesForItemAtIndexPath:で設定されたframeになります）。

- (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;
}
30
Guillaume

circle Layout をダウンロードします。使用するのはサンプルのカスタムレイアウトです

initialLayoutAttributesForAppearingItemAtIndexPath:  
finalLayoutAttributesForDisappearingItemAtIndexPath:

それはあなたにとって良い作業材料になります。

6
Anil Varghese