可拖拽重排的CollectionView
来源:wazrx
链接:http://www.jianshu.com/p/8f0153ce17f9
写在前面
这段时间都在忙新项目的事儿,没有时间倒腾,这两天闲下来,想着一直没有细细的研究CollectionView,一般最多用来做点循环滚动,所以花时间深入学习了一些东西,这次实现了CollectionView的拖动重排的效果,先请看图:(吐槽:不知道为啥从xcode7开始,模拟器变得很卡很卡,所以截图的效果不好,大家可以在真机上测试,效果还是非常不错的)
2月27日更新:
修复了拖拽滚动时抖动的一个bug,新增编辑模式,进入编辑模式后不用长按触发手势,且在开启抖动的情况下会自动进入抖动模式,如图:
配合瀑布流(我直接使用了上个项目的瀑布流模块做了集成实验)
我将整个控件进行了封装,名字是XWDragCellCollectionView使用起来非常方便,github地址:https://github.com/wazrx/XWDragCellCollectionView;使用也非常简单,只需3步,步骤如下:
1、继承于XWDragCellCollectionView;
2、实现必须实现的DataSouce代理方法:(在该方法中返回整个CollectionView的数据数组用于重排)
- (NSArray *)dataSourceArrayOfCollectionView:(XWDragCellCollectionView *)collectionView;
3、实现必须实现的一个Delegate代理方法:(在该方法中将重拍好的新数据源设为当前数据源)(例如 :_data = newDataArray)
- (void)dragCellCollectionView:(XWDragCellCollectionView *)collectionView newDataArrayAfterMove:(NSArray *)newDataArray;
详细的使用可以查看代码中的demo,支持设置长按事件,是否开启边缘滑动,抖动、以及设置抖动等级,这些在h文件里面都有详细说明,有需要的可以尝试一下,并多多提意见,作为新手,肯定还有很多不足的地方;
原理
在刚刚考虑这个效果的时候,我仔细分析了一下效果,我首先想到的就是利用截图大法,将手指要移动的cell截个图来进行移动,并隐藏该cell,然后在合适的时候交换cell的位置,造成是拖拽cell被拖拽到新位置的效果,我将主要实现的步骤分为如下步骤:
1、给CollectionView添加一个长按手势,用于效果驱动
- (void)xwp_addGesture{
UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(xwp_longPressed:)];
_longPressGesture = longPress;
//设置长按时间
longPress.minimumPressDuration = _minimumPressDuration;
[self addGestureRecognizer:longPress];
}
2、在手势开始的时候,得到手指所在的cell,并截图,并将原有cell隐藏
- (void)xwp_gestureBegan:(UILongPressGestureRecognizer *)longPressGesture{
//获取手指所在的cell
_originalIndexPath = [self indexPathForItemAtPoint:[longPressGesture locationOfTouch:0 inView:longPressGesture.view]];
UICollectionViewCell *cell = [self cellForItemAtIndexPath:_originalIndexPath];
//截图大法,得到cell的截图视图
UIView *tempMoveCell = [cell snapshotViewAfterScreenUpdates:NO];
_tempMoveCell = tempMoveCell;
_tempMoveCell.frame = cell.frame;
[self addSubview:_tempMoveCell];
//隐藏cell
cell.hidden = YES;
//记录当前手指位置
_lastPoint = [longPressGesture locationOfTouch:0 inView:longPressGesture.view];
}
3、在手势移动的时候,计算出手势移动的距离,并移动截图视图,当截图视图于某一个cell(可见cell)相交到一定程度的时候,我就让调用系统的api交换这个cell和隐藏cell的位置,形成动画,同时更新数据源(更新数据源是最重要的操作!)
- (void)xwp_gestureChange:(UILongPressGestureRecognizer *)longPressGesture{
//计算移动距离
CGFloat tranX = [longPressGesture locationOfTouch:0 inView:longPressGesture.view].x - _lastPoint.x;
CGFloat tranY = [longPressGesture locationOfTouch:0 inView:longPressGesture.view].y - _lastPoint.y;
//设置截图视图位置
_tempMoveCell.center = CGPointApplyAffineTransform(_tempMoveCell.center, CGAffineTransformMakeTranslation(tranX, tranY));
_lastPoint = [longPressGesture locationOfTouch:0 inView:longPressGesture.view];
//计算截图视图和哪个cell相交
for (UICollectionViewCell *cell in [self visibleCells]) {
//剔除隐藏的cell
if ([self indexPathForCell:cell] == _originalIndexPath) {
continue;
}
//计算中心距
CGFloat space = sqrtf(pow(_tempMoveCell.center.x - cell.center.x, 2) + powf(_tempMoveCell.center.y - cell.center.y, 2));
//如果相交一半就移动
if (space
/**
* 更新数据源
*/
- (void)xwp_updateDataSource{
NSMutableArray *temp = @[].mutableCopy;
//通过代理获取数据源,该代理方法必须实现
if ([self.dataSource respondsToSelector:@selector(dataSourceArrayOfCollectionView:)]) {
[temp addObjectsFromArray:[self.dataSource dataSourceArrayOfCollectionView:self]];
}
//判断数据源是单个数组还是数组套数组的多section形式,YES表示数组套数组
BOOL dataTypeCheck = ([self numberOfSections] != 1 || ([self numberOfSections] == 1 && [temp[0] isKindOfClass:[NSArray class]]));
//先将数据源的数组都变为可变数据方便操作
if (dataTypeCheck) {
for (int i = 0; i _originalIndexPath.item) {
for (NSUInteger i = _originalIndexPath.item; i _moveIndexPath.item ; i --) {
[orignalSection exchangeObjectAtIndex:i withObjectAtIndex:i - 1];
}
}
}else{
//在不同section之间移动的情况(原理是删除原位置所在section的cell并插入到新位置所在的section中)
NSMutableArray *orignalSection = temp[_originalIndexPath.section];
NSMutableArray *currentSection = temp[_moveIndexPath.section];
[currentSection insertObject:orignalSection[_originalIndexPath.item] atIndex:_moveIndexPath.item];
[orignalSection removeObject:orignalSection[_originalIndexPath.item]];
}
//将重排好的数据传递给外部,在外部设置新的数据源,该代理方法必须实现
if ([self.delegate respondsToSelector:@selector(dragCellCollectionView:newDataArrayAfterMove:)]) {
[self.delegate dragCellCollectionView:self newDataArrayAfterMove:temp.copy];
}
}
4、手势结束的时候将截图视图动画移动到隐藏cell所在位置,并显示隐藏cell并移除截图视图;
- (void)xwp_gestureEndOrCancle:(UILongPressGestureRecognizer *)longPressGesture{
UICollectionViewCell *cell = [self cellForItemAtIndexPath:_originalIndexPath];
//结束动画过程中停止交互,防止出问题
self.userInteractionEnabled = NO;
//给截图视图一个动画移动到隐藏cell的新位置
[UIView animateWithDuration:0.25 animations:^{
_tempMoveCell.center = cell.center;
} completion:^(BOOL finished) {
//移除截图视图、显示隐藏cell并开启交互
[_tempMoveCell removeFromSuperview];
cell.hidden = NO;
self.userInteractionEnabled = YES;
}];
}
关键效果的代码就是上面这些了,还有写细节的东西请大家自行查看源代码
写在最后
从iOS9开始,系统已经提供了重排的API,不用我们这么辛苦的自己写,不过想要只适配iOS9,还有一段时间,不过大家可以尝试去实现以下这几个API:
// Support for reordering
- (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0); // returns NO if reordering was prevented from beginning - otherwise YES
- (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition NS_AVAILABLE_IOS(9_0);
- (void)endInteractiveMovement NS_AVAILABLE_IOS(9_0);
- (void)cancelInteractiveMovement NS_AVAILABLE_IOS(9_0);
接下来,还准备研究一下CollectionView的转场和自定义布局,已经写了一些自定义布局效果了,总结好了再贴出来,CollectionView实在是一枚非常强大的控件,大家都应该去深入的研究一下,说不定会产生许多奇妙的想法!加油咯!最后复习一下github地址:https://github.com/wazrx/XWDragCellCollectionView,如果觉得有帮助,请给与一颗star鼓励一下,谢谢!
可拖拽重排的CollectionView的更多相关文章
- iOS之可拖拽重排的CollectionView
修复了拖拽滚动时抖动的一个bug,新增编辑模式,进入编辑模式后不用长按触发手势,且在开启抖动的情况下会自动进入抖动模式,如图: test.gif 图1:垂直滚动 drag1.gif 图2:水平滚动 d ...
- iOS-UICollectionView快速构造/拖拽重排/轮播实现
代码地址如下:http://www.demodashi.com/demo/11366.html 目录 UICollectionView的定义 UICollectionView快速构建GridView网 ...
- iOS开发之--storyboary下,拖拽一个tableview/collectionView/view 等,顶端下沉64个像素的处理方法
大家可能会发现,在sb或者xib里面拖拽一个tableview/collectionview/view的,顶端会自动下沉64个像素,也就是说,运行在模拟器上去,自导航下面又自动下沉了64个像素, 那是 ...
- Swift2.0下UICollectionViews拖拽效果的实现
文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...
- 【UWP】拖拽列表项的排序功能实现
在一些允许用户自定义栏目顺序的app(如:凤凰新闻.网易云音乐等),我们可以方便地拖拽列表项来完成列表的重新排序,进而完成对栏目顺序的重排.这个功能很人性化,而实现起来其实很简单(甚至都不用写什么后台 ...
- 干货之UICollectionViewFlowLayout自定义排序和拖拽手势
使用UICollectionView,需要使用UICollectionViewLayout控制UICollectionViewCell布局,虽然UICollectionViewLayout提供了高度自 ...
- Dev Grid拖拽移动行
效果图 源码下载 拖拽时带行截图效果实现代码 /// <summary> /// 拖拽帮助类 /// </summary> public static class DragHe ...
- 通过layout实现可拖拽自动排序的UICollectionView
文/CenturyGuo(简书作者)原文链接:http://www.jianshu.com/p/8d1bf1838882著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. Translat ...
- 【Swift 4.0】iOS 11 UICollectionView 长按拖拽删除崩溃的问题
正文 功能 用 UICollectionView 实现两个 cell 之间的位置交互或者拖拽某个位置删除 问题 iOS 11 以上拖拽删除会崩溃,在 iOS 9.10 都没有问题 错误 017-10- ...
随机推荐
- NOI2014 魔法森林
3669: [Noi2014]魔法森林 Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 106 Solved: 62[Submit][Status] ...
- c语言实用功能库函数#include<stdlib.h>
实用函数<stdlib.h> 在头文件<stdlib.h>中说明了用于数值转换.内存分配以及具有其他相似任务的函数. 1 atof #include <stdlib.h& ...
- Apache FileUpload实现文件上传
今天,我来介绍一个Apache FileUpload这个插件的使用. 首先,到官网下载相关jar包点击这里下载,这里提供是v1.2. 1.在项目中导入相关jar包commons-fileupload- ...
- Discuz!NT中集成Memcached分布式缓存
大约在两年前我写过一篇关于Discuz!NT缓存架构的文章,在那篇文章的结尾介绍了在IIS中如果开启多个应用程序池会造成多个缓存实例之间数据同步的问题.虽然给出了一个解决方案,但无形中却把压力转移到了 ...
- 社区商业试玩O2O:良渚文化村新街坊牵手阿里巴巴
在电商时代,越来越多的人选择便捷的网上购物,使得实体商业受到了不小的冲击,各种大型的购物中心.购物广场已经不再那么人气十足,因此一些特色商业街区.社区商业频频出现,也不乏一些新玩儿法. 阿里巴巴(专题 ...
- POJ 3169 Layout 差分约束系统
介绍下差分约束系统:就是多个2未知数不等式形如(a-b<=k)的形式 问你有没有解,或者求两个未知数的最大差或者最小差 转化为最短路(或最长路) 1:求最小差的时候,不等式转化为b-a>= ...
- SR4000笔记
长时间运行情况下需要有降温处理(40度以下) 建议使用触发模式而非连续模式 850nm波长的光(虽然无害,建议不要直视) 12V DC 滤波镜头(允许24个LED激光波长的通过) 快闪:获取数据 慢闪 ...
- [SCOI2009]游戏
Time Limit: 1 Sec Memory Limit: 162 MB Description windy学会了一种游戏.对于1到N这N个数字,都有唯一且不同的1到N的数字与之对应.最开始wi ...
- editpuls查找替换通配符
1 \t Tab character. tab符号 2 \n New line. 新的一行(换行符) 3 . Matches any ...
- 5 crucial optimizations for SSD usage in Ubuntu Linux
I bought my first SSD more than 5 years ago (late 2007), for my white MacBook Core2Duo 2.0 Ghz. It m ...