iOS拖动排序【UICollectionView】

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


S.gif

实现思路

  1. 新建一个类继承UICollectionView,并给这个View添加长按手势。 关于iOS中的手势,这篇文章写的很详细,可以参考。
  2. 监听手势事件。手势有很多的状态,这个系统文档中就可以看到,也有对应的说明。此处,监听四种状态,根据不同的状态做相应的操作。
- (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的移除等等。

  1. 关于抖动的效果
    这里为了使编辑模式比较显眼,添加了一个抖动效果,这个抖动效果还是根据需求而定。实现的原理是核心帧动画CAKeyframeAnimation,具体不在这里详解。当然除了抖动之外,你也可以添加其他的效果,比如放大效果等。
 [cell.layer addAnimation:anim forKey:@"shake"];
  1. 关于资源
    关于完整的代码,这里我也有整理,但也是借鉴这个代码的,有兴趣的可以了解一下。

总结

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

推荐阅读更多精彩内容

  • 前言 iOS里的UI控件其实没有几个,界面基本就是围绕那么几个控件灵活展开,最难的应属UICollectionVi...
    alenpaulkevin阅读 23,777评论 9 157
  • 你爸妈 你 和你老公 还有你们的宝贝儿子 除此之外 你没有告诉我其他 不过,写一首诗 有这些就够了 幸福的一家人 ...
    吻章阅读 119评论 0 1
  • 参考文档中方法二实现 添加信任 定义接口:NSURLRequest+DummyInterface.h 定义实现:
    topwqp阅读 1,147评论 13 0
  • TCP常见状态 LISTEN: 侦听来自远方的TCP端口的连接请求 SYN-SENT: 再发送连接请求后等待匹配的...
    yiduyangyi阅读 422评论 0 0
  • 调整情绪的四种方法:1,适当的焦虑。2,延迟满足感。3,自我效能感。4,心流状态。 适当的焦虑起到的是自我鞭策的作...
    咨询师加油站阅读 824评论 0 0