初级入门学习，iOS拖动排序【UICollectionView】

项目中的需求，近期在做优化和版本迭代，就把这块的东西拎出来单独整理一下。

实现思路

新建一个类继承UICollectionView，并给这个View添加长按手势。 关于iOS中的手势，这篇文章写的很详细，可以参考。

监听手势事件。手势有很多的状态，这个系统文档中就可以看到，也有对应的说明。此处，监听四种状态，根据不同的状态做相应的操作。

1 2 3 4 5 6 7 8

- ( void )longPressed:(UILongPressGestureRecognizer *)tapGes { if (tapGes.state == UIGestureRecognizerStateBegan) {  //TODO } if (tapGes.state == UIGestureRecognizerStateChanged) { //TODO} if (tapGes.state == UIGestureRecognizerStateCancelled || tapGes.state == UIGestureRecognizerStateEnded){  //TODO } }

手势开始

1 2 3 4 5 6 7 8 9

根据手势按住cell的位置取出当前按住的cell，可以记为_originalCell。 _fromIndexPath = [self indexPathForItemAtPoint:[tapGes locationOfTouch: inView:tapGes.view]]; UICollectionViewCell *cell = [self cellForItemAtIndexPath:_fromIndexPath]; _originalCell截图得到一个_snapCell，我们看到的移动中的cell都是这个截图所得的_snapCell。实际上是一个view。这里涉及到自定义屏幕区域截图。可以参考一下下面的代码。 UIImage *snap; UIGraphicsBeginImageContextWithOptions(cell.bounds.size, Yes,  ); [cell.layer renderInContext:UIGraphicsGetCurrentContext()]; snap = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();

手势过程中

手势过程中需要，需要根据截图的_snapCell的移动来移动相应的cell。并且当_snapCell移动到边缘的时候，其它的cell依然可以跟着向上或者向下移动。所以当_snapCell准备移动的时候，开启一个边缘滚动的定时器来实时更新_snapCell的中点的位置，以及记录_snapCell移动的最后的X值(左右拖动)或Y值(上下拖动)。

根据最后停留的x和y的值，以及开始截图位置的x和y的值，可以算出_snapCell的偏移量的x和y的值。CGPointApplyAffineTransform转换点，使用一种transform映射得到偏移后的坐标。

1	_snapCell.center = CGPointApplyAffineTransform(_snapCell.center, CGAffineTransformMakeTranslation(tranX, tranY));

移动Cell，计算_snapCell与相邻的cell的偏移量，这是一个绝对值，因为可能向上移动也可能向下移动。如果_snapCell移动超过一半的则交换位置，否则不交换。记录下需要的信息。到达的位置_toIndexPath。更新数据源。

1 2 3 4

_toIndexPath = [self indexPathForCell:cell]; _originalCell = cell; [self moveItemAtIndexPath:_fromIndexPath toIndexPath:_toIndexPath]; _fromIndexPath = _toIndexPath;

更新数据源，要先获取原数据源，这个可以根据数据源协议暴露对外的接口，通过外部传递进来。更新数据源的时候要分清是分组的列表还是不分组的列表。更新好，把新的数据源通过代理传递给外面更新UI。

手势结束或取消

这里做一些清除的操作。比如定时器的关闭，_snapCell的移除等等。

关于抖动的效果

这里为了使编辑模式比较显眼，添加了一个抖动效果，这个抖动效果还是根据需求而定。实现的原理是核心帧动画CAKeyframeAnimation,具体不在这里详解。当然除了抖动之外，你也可以添加其他的效果，比如放大效果等。

1	[cell.layer addAnimation:anim forKey:@ "shake" ];

关于资源

关于完整的代码，这里我也有整理，但也是借鉴这个代码的，有兴趣的可以了解一下。

总结

上图实现的效果通过tableView也可以实现。但是collectionView的扩展性更好一些，改变cell的itemSize，以及滚动方向就可以实现不同的排序效果，所以选择了collectionView。collectionView通过自定义flowLayout可以实现很多比较炫酷的UI。