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呗！~
