iOS7+ UICollectionView拖拽重排

UIcollectionView是开发中最常使用到的组件之一，然而其拖拽排序的功能直到iOS9才引入，iOS9以前的版本并没有原生的支持。为此我写了一个小型库 SortableCollectionView，方便地集成拖拽排序的功能。项目地址https://github.com/luowenxing/SortableCollectionView 只需要直接使用或者子类化SortableCollectionView，并实现简单的代理方法，就能方便地实现拖拽排序。同时支持自定义拖拽的视图，比如对拖拽中的Cell进行放大、设置背景颜色等等。

效果展示

• 普通的流式布局效果，仿支付宝主页的排序，可以看到对拖拽的视图做了一个放大1.2倍和设置背景为灰色两个操作。

  
  
  demoFlow.gif

• 瀑布流效果

  
  
  demoWaterfall.gif

使用

• 在你的工程中引入SortableCollectionView.swift
• 直接使用或者子类化SortableCollectionView，并在xib/storyboard中指定。如果是纯代码方式创建的，把awakeFromNib方法的代码作为初始化代码就行。这个问题之后会进行优化。
• 像往常一样实现UICollectionView的代理方法和布局类。
• 实现SortableCollectionViewDelegate并设置sortableDelegate

@objc protocol SortableCollectionViewDelegate:NSObjectProtocol {
    // 排序开始，定制拖拽排序的视图 
    optional func beginDragAndInitDragCell(collectionView:SortableCollectionView,dragCell:UIView)
    
    // 排序结束，重设排序视图
    optional func endDragAndResetDragCell(collectionView:SortableCollectionView,dragCell:UIView)
    
    // 排序结束，对排序完成后的真实Cell进行操作，比如类似支付宝的首页排序，对没有移动的Cell显示删除按钮
    optional func endDragAndOperateRealCell(collectionView:SortableCollectionView,realCell:UICollectionViewCell,isMoved:Bool)
    
    // 排序完成，交换数据源
    func exchangeDataSource(fromIndex:NSIndexPath,toIndex:NSIndexPath)
}

• 推荐在你的UICollectionViewCell中实现NSCopying协议，这样就可以更好地定制化拖拽的view。否则则会使用截图方法snapshotViewAfterScreenUpdates作为拖拽的view，它只是一个单独的view，没有相应的view层次结构。
• 如果是iOS9系统，并且你实现了

func collectionView(collectionView: UICollectionView, canMoveItemAtIndexPath indexPath: NSIndexPath) -> Bool 
func collectionView(collectionView: UICollectionView, moveItemAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath) 

则会使用系统原生的拖拽排序，目前原生排序是一个简单的版本，不支持自定义的拖拽view。你可以在Demo里面试一试，比较两种方式。

原理分析

• 使用长按手势识别UILongPressGestureRecognizer，这个方法可以监听长按、移动、结束，符合我们的需求。
• 长按后，拷贝或者截图选中的Cell，加入到superview，因为这样会方便处理之后的滚动。
• 移动过程中调用moveItemAtIndexPath方法交换相应的Cell。
• 比较难处理的地方就是滚动了。滚动原理其实比较简单，就是使用NSTimer并加入到RunLoop中，但是有一些细节的问题比较抓狂，比如流畅度优化，计算frame等，需要对UIScrollView有一定的理解，核心代码如下。

    func scrollAtEdge(){
        //计算拖动视图里边缘的距离，正比于滚动速度，并且判断是往上还是往下滚动
        let pinTop = dragView.frame.origin.y
        let pinBottom = self.frame.height - (dragView.frame.origin.y + dragView.frame.height)
        var speed:CGFloat = 0
        var isTop:Bool = true
        if pinTop < 0 {
            speed = -pinTop
            isTop = true
        } else if pinBottom < 0 {
            speed = -pinBottom
            isTop = false
        } else {
            self.timer?.invalidate()
            self.timer = nil
            return
        }
        if let originTimer = self.timer,originSpeed = (originTimer.userInfo as? [String:AnyObject])?["speed"] as? CGFloat{
            //计算滚动速度和原来相差是否过大，目的是防止频繁的创建定时器而使滚动卡顿
            if abs(speed - originSpeed) > 10 {
                originTimer.invalidate()
                NSLog("speed:\(speed)")
                // 60fps，滚动才能流畅
                let timer = NSTimer(timeInterval: 1/60.0, target: self, selector: #selector(SortableCollectionView.autoScroll(_:)), userInfo: ["top":isTop,"speed": speed] , repeats: true)
                self.timer = timer
                NSRunLoop.mainRunLoop().addTimer(timer, forMode: NSRunLoopCommonModes)
            }
        } else {
            let timer = NSTimer(timeInterval: 1/60.0, target: self, selector: #selector(SortableCollectionView.autoScroll(_:)), userInfo: ["top":isTop,"speed": speed] , repeats: true)
            self.timer = timer
            NSRunLoop.mainRunLoop().addTimer(timer, forMode: NSRunLoopCommonModes)
        }
    }
    
    
    func autoScroll(timer:NSTimer) {
        if let userInfo = timer.userInfo as? [String:AnyObject] {
            if let top =  userInfo["top"] as? Bool,speed = userInfo["speed"] as? CGFloat {
                //计算滚动位置，更新contentOffset
                let offset = speed / 5
                let contentOffset = self.contentOffset
                if top {
                    self.contentOffset.y -= offset
                    self.contentOffset.y = self.contentOffset.y < 0 ? 0 : self.contentOffset.y
                }else {
                    self.contentOffset.y += offset
                    self.contentOffset.y = self.contentOffset.y > self.contentSize.height - self.frame.height ? self.contentSize.height - self.frame.height  : self.contentOffset.y
                }
                let point = CGPoint(x: dragView.center.x, y: dragView.center.y + contentOffset.y)
                //滚动过程中，拖拽视图位置不变，因此手势识别代理不会调用，需要手动调用移动item
                self.moveItemToPoint(point)
            }
        }
    }

待改进

• 增加代理方法，对显示中的Cell进行操作，比如增加抖动动画等。
• 极少数情况下滚动会短时间掉帧，可能是RunLoop操作的问题。
  目前正在完善中，各位小伙伴有好的意见建议都可以留言评论，喜欢的小伙伴给个Star呗！~