现在很多项目都会用到类似拖动的效果,比如今日头条和网易新闻之类的资讯类产品,都有用该技术设置模块顺序的操作。

在iOS9.0之后,苹果提供相关的方法,非常方便。

设定三个私有属性
@property(nonatomic,strong) NSMutableArray *arr; @property(nonatomic,weak) UICollectionView *colView; @property(nonatomic,strong) UILongPressGestureRecognizer *longPress;
//数据源
- (NSMutableArray *)arr{ if (!_arr) {
_arr = [NSMutableArray arrayWithObjects:@(1),@(2),@(3),@(4),@(5),@(6),@(7),@(8),@(9), nil];
}
return _arr;
}
  1. 先创建UICollectionView
//创建布局对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
//view
UICollectionView *colView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
//背景色
colView.backgroundColor = [UIColor whiteColor];
colView.delegate = self;
colView.dataSource = self;
//控制布局
colView.contentInset = UIEdgeInsetsMake(30, 20, 0, 20);
CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
CGFloat space = 20;
NSInteger col = 3;
CGFloat itemSize = (screenW - (( col + 1 ) * space) - 6) / 3; flowLayout.itemSize = CGSizeMake(itemSize, itemSize);
flowLayout.minimumInteritemSpacing = space;
flowLayout.minimumLineSpacing = space;
//添加长按手势
_longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressMoving:)];
[colView addGestureRecognizer:_longPress];
//属性连接
self.colView = colView;
//注册cell,记得先创建一个自定义cell
[colView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"cell"];
[self.view addSubview:colView]; --------------------------------------数据源方法--------------------------------------------- - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.arr.count;
} // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; cell.num.text = [NSString stringWithFormat:@"%@",self.arr[indexPath.row]]; return cell; }

2.长按手势响应事件

- (void)longPressMoving:(UILongPressGestureRecognizer *)longPress{
// 筛选长按手势状态
switch (_longPress.state) {
// 开始
case UIGestureRecognizerStateBegan: {
{
//手势作用的位置
NSIndexPath *selectIndexPath = [self.colView indexPathForItemAtPoint:[_longPress locationInView:self.colView]];
// 找到当前的cell
MyCollectionViewCell *cell = (MyCollectionViewCell *)[self.colView cellForItemAtIndexPath:selectIndexPath];
// 拽起变大动画效果
[UIView animateWithDuration:0.3 animations:^{
[cell setTransform:CGAffineTransformMakeScale(1.2, 1.2)];
}];
//开始移动
[_colView beginInteractiveMovementForItemAtIndexPath:selectIndexPath];
}
break;
}
case UIGestureRecognizerStateChanged: {
//更新移动的位置
[self.colView updateInteractiveMovementTargetPosition:[longPress locationInView:_longPress.view]];
break;
}
case UIGestureRecognizerStateEnded: {
//结束移动
[self.colView endInteractiveMovement];
break;
}
default: [self.colView cancelInteractiveMovement];
break;
}
}

3.实现苹果官方的代理方法

- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath{
return YES;
} - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{ NSLog(@"%zd---%zd",sourceIndexPath.row,destinationIndexPath.row);
NSIndexPath *selectIndexPath = [self.colView indexPathForItemAtPoint:[_longPress locationInView:self.colView]];
//交换数据源的内容
[self.arr exchangeObjectAtIndex:sourceIndexPath.item withObjectAtIndex:destinationIndexPath.item];
// [self.colView reloadData]; NSLog(@"%@",self.arr);
}

实现完以上的方法,可以快速构建一个可拖拽排序的cell界面。

iOS | 实现拖拽CollectionViewCell排序的更多相关文章

  1. VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序

    Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...

  2. 通过layout实现可拖拽自动排序的UICollectionView

    文/CenturyGuo(简书作者)原文链接:http://www.jianshu.com/p/8d1bf1838882著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. Translat ...

  3. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ios 为什么拖拽的控件为weak 手写的strong

    ib拖拽的控件自动声明为weak  而平时自己手写的为strong 在ios中,对象默认都是强引用,不是强引用赋值后会立即释放 ib声明weak 不立即被释放 简单说就是 1.声明的弱引用指向强引用 ...

  5. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. IOS view拖拽(触摸事件)

    • iOS中的事件可以分为3大类型 触摸事件 加速计事件 远程控制事件 响应者对象 • 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事 件.我们称之为“响应 ...

  7. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  8. vue中基于sortablejs与el-upload实现文件上传后拖拽排序

    今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...

  9. Android 仿今日头条频道管理(上)(GridView之间Item的移动和拖拽)

    前言 常常逛今日头条.发现它的频道管理功能做的特别赞.交互体验很好.如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fo ...

随机推荐

  1. IIS7部署网站出现500.19错误(权限不足)的解决方案

    错误摘要 HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息 模块 IIS Web Core 通知 未知 处理 ...

  2. 2、弹出窗口 Alert

    1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...

  3. IE9下JQuery发送ajax请求失效

    最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案:   解决方案一: 设置浏览 ...

  4. Django之(URL)路由系统

    路由系统 简而言之,django的路由系统作用就是使views里面处理数据的函数与请求的url建立映射关系.使请求到来之后,根据urls.py里的关系条目,去查找到与请求对应的处理方法,从而返回给客户 ...

  5. javascript实现数据结构与算法系列

    1.线性表(Linear list) 线性表--简单示例及线性表的顺序表示和实现 线性表--线性链表(链式存储结构) 线性表的静态单链表存储结构 循环链表与双向链表 功能完整的线性链表 线性链表的例子 ...

  6. 使用 Python 设置数据的路径

    使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...

  7. C#设计模式之代理模式(二)

    15.3 代理模式应用实例 下面通过一个应用实例来进一步学习和理解代理模式.        1. 实例说明        某软件公司承接了某信息咨询公司的收费商务信息查询系统的开发任务,该系统的基本需 ...

  8. web端 调试 手机混合应用中的h5部分(chrome浏览器的devtool使用)

    Learning Hybird App Test–Appium Java(Leyden) 浏览器的远程调试工具,使得我们可以通过PC上开启的控制台,调试手机浏览器中正在运行的代码.运行于 Androi ...

  9. 时间序列算法理论及python实现(2-python实现)

    如果你在寻找时间序列是什么?如何实现时间序列?那么请看这篇博客,将以通俗易懂的语言,全面的阐述时间序列及其python实现. 时间序列算法理论详见我的另一篇博客:时间序列算法理论及python实现 - ...

  10. 第二次作业(Git and Github)

       第二次作业(Git and Github) 1.Github项目地址: https://github.com/YanSiJu/JavaWebProject.git 具体介绍详见READ.md 2 ...