iOS 在CollectionView上做展开收起动画

Posted 2022-08-23 想名真难

在一个collectionView上有一个cell, cell上有一个按钮点击收起/展开, 根据用户的操作展示不同的高度.

实现效果如下:

 

 

使用reloadItemsAtIndexPaths,

Reloads just the items at the specified index paths.

Call this method to selectively reload only the specified items. This causes the collection view to discard any cells associated with those items and redisplay them.

重新加载指定数组内的indexPath的元素。

调用此方法可以选择性地仅重新加载指定的元素。这会导致collectionView视图取消与这些项关联的cell，并重新显示它们。

根据官方文档的注释和实际测试, 使用此方法只刷新一个分区数据, 系统会再次触发 - cellForItemAtIndexPath, 由于此时屏幕上已经有一个同类型的cell, 系统会在创建一个新的cell并添加到复用池中, 此时对旧的cell做任何动画都是无效的, 因为现在有一个更高层级的cell盖在上面.

 

使用performBatchUpdates:completion:

Animates multiple insert, delete, reload, and move operations as a group. 

将多个插入、删除、重新加载和移动操作作为一个组设置动画。

此方法不会触发- cellForItemAtIndexPath, 所以不会重新创建cell, 对cell本身做的动画能够正常显示. 

同时, 此方法会触发- sizeForItemAtIndexPath, 保证cell本身的高度是正确的, collectionView的整体高度和下面的cell会自动下移完成动画.

---

最后放上核心代码, 有删减,

/// 点击展开/收起按钮
- (void)memberCenterStatusCell:(ULMemberCenterStatusCell *)cell didClickFold:(UIButton *)button rowNode:(ULTopOpenMemberRowNode *)rowNode 

    if (rowNode.uiType == ULTopOpenMemberRowNodeUITypeMember) 
        NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];
        rowNode.isOpen = !rowNode.isOpen;
        ULMemberCenterSectionRowNode *sectionRowNode = [self.dataArray ul_safeObjectAtIndex:indexPath.section];
        sectionRowNode.itemSize = [rowNode currentSize];
        // 展开收起动画, 
        // 1.更新cell内部的数据;
        // 2.调用刷新cell高度的方法;
        // 3.collectionView进行layout
        [UIView animateWithDuration:0.3 animations:^

            [cell updateWithRowNode:rowNode];

           [self.collectionView performBatchUpdates:^

             completion:^(BOOL finished) 

            ];

            [self.collectionView layoutIfNeeded];
        ];
    



- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 

    CGSize result = CGSizeZero;
    ULMemberCenterSectionRowNode *sectionRowNode = [self.dataArray ul_safeObjectAtIndex:indexPath.section];
     result = sectionRowNode.itemSize;
    return result;


- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 
    UICollectionViewCell *resultCell = nil;
    ULMemberCenterSectionRowNode *sectionRowNode = [self.dataArray ul_safeObjectAtIndex:indexPath.section];
    if (sectionRowNode.type == ULMemberCenterSectionRowNodeTypeOpenMember) 
        ULMemberCenterStatusCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:[ULMemberCenterStatusCell reuseIdentifier] forIndexPath:indexPath];
        ULTopOpenMemberRowNode *openMemberRowNode = [sectionRowNode.rowNodeArray ul_safeObjectAtIndex:indexPath.item];
        cell.delegate = self;
        [cell updateWithRowNode:openMemberRowNode];
        resultCell = cell;
     
     return resultCell;