美文网首页iOS学习征服iOSiOS 开发每天分享优质文章
iOS9之前collectionView拖拽重排的实现

iOS9之前collectionView拖拽重排的实现

作者: 大熊孩子 | 来源:发表于2017-08-22 10:17 被阅读163次

    最近因需要实现一个标签类的 demo, 需要支持拖拽重排, 首先想到的便是 collectionView, 并且很快就在 API 文档中找到了类似的接口:

    - (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
    - (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition NS_AVAILABLE_IOS(9_0);
    - (void)endInteractiveMovement NS_AVAILABLE_IOS(9_0);
    - (void)cancelInteractiveMovement NS_AVAILABLE_IOS(9_0);
    

    用系统提供的这几个接口很快便能实现我们的需求, 代码见 gitbub地址.
    但是你有没有发现上面的方法后面跟着的NS_AVAILABLE_IOS(9_0), iOS9才开始支持, 这就尴尬了.
    那iOS9之前怎么手动实现这个需求呢, 于是边分析边开始列出实现步骤:

    1. 长按 cell 进入拖拽模式
    2. 隐藏当前 cell, 并添加一个当前 cell 的截图到 collectionView 上
    3. 随手势移动截图, 当截图的center 进入到另一个 cell2 的范围内的时候, 将隐藏的 cell 移动到cell2的位置, 并移动 cell2及cell2之后的 cell
    4. 若继续移动, 则执行(3)
    5. 若松开手指结束移动, 则移除掉截图, 并显示之前隐藏的 cell

    过程理顺了, 那么接下来便是代码的实现了.

    1. 长按 cell 进入拖拽模式

    我这里直接给 collectionView添加了一个长按手势

    UILongPressGestureRecognizer *longG = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPress:)];
    longG.minimumPressDuration = 0.2f;
    [self.collectionView addGestureRecognizer:longG];
    
    - (void)longPress:(UILongPressGestureRecognizer *)lpGesture
    {
        switch(lpGesture.state) {
            case UIGestureRecognizerStateBegan:
            {
                [self collectionViewCellDidBeginChange:lpGesture];
                break;
            }
            case UIGestureRecognizerStateChanged:
            {
                [self collectionViewCellDidChange:lpGesture];
                break;
            }
            case UIGestureRecognizerStateEnded:
            {
                [self collectionViewCellDidEndChange:lpGesture];
                break;
            }
            default:
                if (AVAILABLE_IOS_9_0)
                {
                    [self.collectionView cancelInteractiveMovement];
                }
                break;
        }
    }
    
    2. 隐藏当前 cell, 并添加一个当前 cell 的截图到 collectionView 上
    - (void)collectionViewCellDidBeginChange:(UILongPressGestureRecognizer *)lpGesture
    {
        self.beginIndexPath = [self.collectionView indexPathForItemAtPoint:[lpGesture locationInView:self.collectionView]];
        self.beginCell = (CollectionViewCell *)[self.collectionView cellForItemAtIndexPath:self.beginIndexPath];
        
        if (AVAILABLE_IOS_9_0)
        {
            [self.collectionView beginInteractiveMovementForItemAtIndexPath:self.beginIndexPath];
        }
        else
        {
            // 截图  并隐藏原 cell
            self.tempView = [self.beginCell snapshotViewAfterScreenUpdates:YES];
            self.tempView.frame = self.beginCell.frame;
            [self.collectionView addSubview:self.tempView];
            
            self.beginPoint = [lpGesture locationInView:self.collectionView];
            self.beginCell.hidden = YES;
        }
    }
    
    
    3. 移动截图
    - (void)collectionViewCellDidChange:(UILongPressGestureRecognizer *)lpGesture
    {
        CGPoint targetPosion = [lpGesture locationInView:lpGesture.view];
        
        if (AVAILABLE_IOS_9_0)
        {
            [self.collectionView updateInteractiveMovementTargetPosition:targetPosion];
        }
        else
        {
            CGFloat tranX = [lpGesture locationOfTouch:0 inView:self.collectionView].x - self.beginPoint.x;
            CGFloat tranY = [lpGesture locationOfTouch:0 inView:self.collectionView].y - self.beginPoint.y;
            
            // 设置截图视图位置
            self.tempView.center = CGPointApplyAffineTransform(self.tempView.center, CGAffineTransformMakeTranslation(tranX, tranY));
            self.beginPoint = [lpGesture locationOfTouch:0 inView:_collectionView];
            
            // 计算截图视图和哪个cell相交
            for (UICollectionViewCell *cell in [_collectionView visibleCells])
            {
                //跳过隐藏的cell
                if ([_collectionView indexPathForCell:cell] == self.beginIndexPath)
                {
                    continue;
                }
                //计算中心距
                CGFloat space = sqrtf(pow(self.tempView.center.x - cell.center.x, 2) + powf(self.tempView.center.y - cell.center.y, 2));
                
                //如果相交一半且两个视图Y的绝对值小于高度的一半就移动
                if (space <= self.tempView.bounds.size.width * 0.5 && (fabs(self.tempView.center.y - cell.center.y) <= self.tempView.bounds.size.height * 0.5))
                {
                    NSIndexPath *nextIndexPath = [_collectionView indexPathForCell:cell];
                    
                    [self updateDataWithSourceIndexPath:self.beginIndexPath toIndexPath:nextIndexPath];
                    
                    [_collectionView moveItemAtIndexPath:self.beginIndexPath toIndexPath:nextIndexPath];
                    
                    //设置移动后的起始indexPath
                    self.beginIndexPath = nextIndexPath;
                    
                    break;
                }
            }
        }
    }
    

    数据源的改动

    - (void)updateDataWithSourceIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
    {
        if (sourceIndexPath.section == destinationIndexPath.section) // 同一个 section 间移动
        {
            if (destinationIndexPath.item > sourceIndexPath.item) {
                for (NSUInteger i = sourceIndexPath.item; i < destinationIndexPath.item ; i ++) {
                    [self.dataArray[sourceIndexPath.section] exchangeObjectAtIndex:i withObjectAtIndex:i + 1];
                }
            }else{
                for (NSUInteger i = sourceIndexPath.item; i > destinationIndexPath.item ; i --) {
                    [self.dataArray[sourceIndexPath.section] exchangeObjectAtIndex:i withObjectAtIndex:i - 1];
                }
            }
        }
        else // 不同 section 之间移动 ,  删除 sourceData, 插入到 destinationData
        {
            NSMutableArray *sourceArr = self.dataArray[sourceIndexPath.section];
            NSMutableArray *destinationArr = self.dataArray[destinationIndexPath.section];
            
            id obj = [sourceArr objectAtIndex:sourceIndexPath.row];
            
            [sourceArr removeObjectAtIndex:sourceIndexPath.row];
            
            [destinationArr insertObject:obj atIndex:destinationIndexPath.row];
        }
        
    }
    
    4. 若继续移动, 则执行(3)
    5. 若松开手指结束移动, 则移除掉截图, 并显示之前隐藏的 cell
    - (void)collectionViewCellDidEndChange:(UILongPressGestureRecognizer *)lpGesture
    {
        if (AVAILABLE_IOS_9_0)
        {
            [self.collectionView endInteractiveMovement];
        }
        else
        {
            [UIView animateWithDuration:0.25 animations:^{
                
                self.tempView.center = self.beginCell.center;
                
            }completion:^(BOOL finished) {
                
                [self.tempView removeFromSuperview];
                self.beginCell.hidden = NO;
            }];
        }
    }
    

    好了, 到此就完成了 iOS9以下的适配, 实现起来也不是很复杂, 主要的是实现之前把思路理顺, 那实现起来就不难了.

    详细的代码见gitbub地址.如果有收获,欢迎 star!

    相关文章

      网友评论

        本文标题:iOS9之前collectionView拖拽重排的实现

        本文链接:https://www.haomeiwen.com/subject/unbkdxtx.html