登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

DraggingSort

[复制链接]
来自: littleRed 分类: iOS精品源码 上传时间: 2016-11-25 11:44:04

项目介绍:

DraggingSort

https://github.com/HelloYeah/DraggingSort

导读

拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等。拖拽排序是一个交互体验非常好的设计,简单,方便。

今日头条的拖拽排序界面

今日头条的拖拽排序界面.png

我实现的长按拖拽排序效果

长按拖拽排序.gif

实现方案

1.给CollectionViewCell添加一个长按手势,通过协议把手势传递到collectionView所在的控制器中。

- (void)awakeFromNib{
    self.layer.cornerRadius = 3;
    self.layer.masksToBounds = YES;
    //给每个cell添加一个长按手势
    UILongPressGestureRecognizer * longPress =[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPress:)];
    longPress.delegate = self;
    [self addGestureRecognizer:longPress];
}

- (void)longPress:(UILongPressGestureRecognizer *)longPress{
    if (self.delegate && [self.delegate respondsToSelector:@selector(longPress:)]) {
        [self.delegate longPress:longPress];
    }
}

2.开始长按时对cell进行截图,并隐藏cell。

- (void)longPress:(UILongPressGestureRecognizer *)longPress{
    //记录上一次手势的位置
    static CGPoint startPoint;
    //触发长按手势的cell
    MovingCell * cell = (MovingCell *)longPress.view;
    //开始长按
    if (longPress.state == UIGestureRecognizerStateBegan) {
        [self shakeAllCell];
        //获取cell的截图
        _snapshotView  = [cell snapshotViewAfterScreenUpdates:YES];
        _snapshotView.center = cell.center;
        [_collectionView addSubview:_snapshotView];
        _indexPath= [_collectionView indexPathForCell:cell];
        _originalCell = cell;
        _originalCell.hidden = YES;
        startPoint = [longPress locationInView:_collectionView];
    }

3、在手势移动的时候,移动截图视图,用遍历的方法求出截图移动到哪个cell的位置,再调用系统的api交换这个cell和隐藏cell的位置,并且数据源中的数据也需要调整顺序

    //手势移动的时候
    else if (longPress.state == UIGestureRecognizerStateChanged){
    CGFloat tranX = [longPress locationOfTouch:0 inView:_collectionView].x - startPoint.x;
    CGFloat tranY = [longPress locationOfTouch:0 inView:_collectionView].y - startPoint.y;
    //设置截图视图位置
    _snapshotView.center = CGPointApplyAffineTransform(_snapshotView.center, CGAffineTransformMakeTranslation(tranX, tranY));
    startPoint = [longPress locationOfTouch:0 inView:_collectionView];
    //计算截图视图和哪个cell相交
    for (UICollectionViewCell *cell in [_collectionView visibleCells]) {
        //跳过隐藏的cell
        if ([_collectionView indexPathForCell:cell] == _indexPath) {
            continue;
        }
        //计算中心距
        CGFloat space = sqrtf(pow(_snapshotView.center.x - cell.center.x, 2) + powf(_snapshotView.center.y - cell.center.y, 2));

        //如果相交一半且两个视图Y的绝对值小于高度的一半就移动
        if (space <= _snapshotView.bounds.size.width * 0.5 && (fabs(_snapshotView.center.y - cell.center.y) <= _snapshotView.bounds.size.height * 0.5)) {
            _nextIndexPath = [_collectionView indexPathForCell:cell];
            if (_nextIndexPath.item > _indexPath.item) {
                for (NSUInteger i = _indexPath.item; i < _nextIndexPath.item ; i ++) {
                    [self.array exchangeObjectAtIndex:i withObjectAtIndex:i + 1];
                }
            }else{
                for (NSUInteger i = _indexPath.item; i > _nextIndexPath.item ; i --) {
                    [self.array exchangeObjectAtIndex:i withObjectAtIndex:i - 1];
                }
            }
            //移动
            [_collectionView moveItemAtIndexPath:_indexPath toIndexPath:_nextIndexPath];
            //设置移动后的起始indexPath
            _indexPath = _nextIndexPath;
            break;
        }
    }

4.手势停止时,移除截图的view,显示隐藏cell

//手势停止时
}else if(longPress.state == UIGestureRecognizerStateEnded){
    [self stopShake];
    [_snapshotView removeFromSuperview];
    _originalCell.hidden = NO;
}

其他

代码还可以进一步封装,写一个数据管理类dataTool,dataTool作为collectionView的数据源,所有的数据源方法都写到dataTool类中。手势的代理方法也在里面实现,这样控制器会简洁很多,控制器就不需要关注拖拽排序的具体逻辑了。大家有空可以自己写写看,也许你们有更好的处理方案,可以评论交流一下。

code4app

相关源码推荐:

我来说两句
*滑动验证:
所有评论(96)
phoiu 2016-11-28 09:48:02
不错不错,楼主辛苦了。。。
回复
code4app热心网友 2016-11-28 10:46:05
很给力,Code4App有你更精彩!
回复
code4app热心网友 2016-11-28 10:46:44
虽不明,但觉厉!
回复
code4app热心网友 2016-11-28 10:49:14
楼主威武啊,Code4App有你更给力!
回复
code4app热心网友 2016-11-28 10:55:39
楼主用心了,内容非常精彩。
回复
code4app热心网友 2016-11-28 11:47:59
我只是路过打酱油的。
回复
huanbao800 2016-11-28 11:51:06
正需要啊,感谢楼主无私分享!
回复
code4app热心网友 2016-11-28 13:09:10
很给力,Code4App有你更精彩!
回复
code4app热心网友 2016-11-28 15:29:47
楼主用心了,内容非常精彩。
回复
提取码:  下载次数:96 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
1102 0 96
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表