转载

iOS拖动排序【UICollectionView】

项目中的需求，近期在做优化和版本迭代，就把这块的东西拎出来单独整理一下。实现的效果大概如下图所示。

实现思路

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

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

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

手势开始

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

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

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

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

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

手势结束或取消

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

关于抖动的效果

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

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

关于资源

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

总结

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

正文到此结束

所属分类：移动开发

本文标签： 协议需求代码 IOS API 文章数据 http UI src id expat 总结 Collection cat key IO tab App ORM
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

iOS拖动排序【UICollectionView】

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流