iOS 可拖拽排序的UICollectionView
迪丽瓦拉
2025-06-01 15:53:46
0

系统的UICollectionView和UITableView有提供在编辑态拖拽排序的功能,但是需要指定的EditStyle,而且还只能拖动排序按钮区域,大部分时候效果很难满足业务需求,因此我们需要定制可拖拽Cell的SDMovableCellCollectionView。文章最后附有Demo的Git地址,可查看完整代码。

实现思路

  1. 首先要给CollectionView添加长按手势;
  2. 然后手势开始时,找到当前手势坐标所在的startIndexPath,对cell生成snapshot,并隐藏此cell,接下来手势改变时都是改变snapshot在CollectionView中的位置;
  3. 手势改变时,snapshot的center跟随手势坐标变化,获取手势坐标所在的indexPath,并和startIndexPath交换位置;
  4. 手势结束时,cell显示,snapshot从父视图移除;
  5. 考虑拖拽边界情况;

手势核心代码

- (void)gestureBegan:(UILongPressGestureRecognizer *)gesture {CGPoint point = [gesture locationInView:gesture.view];NSIndexPath *selectedIndexPath = [self indexPathForItemAtPoint:point];if (!selectedIndexPath) {return;}UICollectionViewCell *cell = [self cellForItemAtIndexPath:selectedIndexPath];cell.alpha = 1.0;if (self.dataSource && [self.dataSource respondsToSelector:@selector(collectionView:canMoveItemAtIndexPath:)]) {if (![self.dataSource collectionView:self canMoveItemAtIndexPath:selectedIndexPath]) {//It is not allowed to move the cell, then shake it to prompt the user.if (self.canHintWhenCannotMove) {CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];shakeAnimation.duration = 0.25;shakeAnimation.values = @[@(-20), @(20), @(-10), @(10), @(0)];[cell.layer addAnimation:shakeAnimation forKey:@"shake"];}if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:tryMoveUnmovableCellAtIndexPath:)]) {[self.delegate collectionView:self tryMoveUnmovableCellAtIndexPath:selectedIndexPath];}UICollectionViewCell *cell = [self cellForItemAtIndexPath:selectedIndexPath];cell.alpha = 0.7;return;}}if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:willMoveCellAtIndexPath:)]) {[self.delegate collectionView:self willMoveCellAtIndexPath:selectedIndexPath];}if (_canEdgeScroll) {[self startEdgeScroll];}//Get a data source every time you moveif (self.dataSource && [self.dataSource respondsToSelector:@selector(dataSourceArrayInCollectionView:)]) {_tempDataSource = [self.dataSource dataSourceArrayInCollectionView:self];}_selectedIndexPath = selectedIndexPath;_startIndexPath = selectedIndexPath;if (self.canFeedback) {[self.generator prepare];[self.generator impactOccurred];}if (self.dataSource && [self.dataSource respondsToSelector:@selector(snapshotViewWithCell:)]) {UIView *snapView = [self.dataSource snapshotViewWithCell:cell];_snapshot = [self snapshotViewWithInputView:snapView];} else {_snapshot = [self snapshotViewWithInputView:cell];}if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:customizeMovalbeCell:)]) {[self.delegate collectionView:self customizeMovalbeCell:_snapshot];} else {_snapshot.layer.shadowColor = [UIColor grayColor].CGColor;_snapshot.layer.masksToBounds = NO;_snapshot.layer.cornerRadius = 0;_snapshot.layer.shadowOffset = CGSizeMake(-5, 0);_snapshot.layer.shadowOpacity = 0.4;_snapshot.layer.shadowRadius = 5;}//    _snapshot.frame = CGRectMake((cell.frame.size.width - _snapshot.frame.size.width)/2.0f, cell.frame.origin.y + (cell.frame.size.height - _snapshot.frame.size.height)/2.0, _snapshot.frame.size.width, _snapshot.frame.size.height);_snapshot.frame = cell.frame;[self addSubview:_snapshot];// 记录手势中心偏移self.gesturePointOffsetX = point.x - _snapshot.center.x;self.gesturePointOffsetY = point.y - _snapshot.center.y;cell.hidden = YES;if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:customizeStartMovingAnimation:fingerPoint:)]) {[self.delegate collectionView:self customizeStartMovingAnimation:_snapshot fingerPoint:point];} else {[UIView animateWithDuration:0.3 animations:^{self.snapshot.transform = CGAffineTransformScale(self.snapshot.transform, 1.1, 1.1);}];}
}- (void)gestureChanged:(UILongPressGestureRecognizer *)gesture {CGPoint point = [gesture locationInView:gesture.view];point.x -= self.gesturePointOffsetX;point.y -= self.gesturePointOffsetY;point = CGPointMake([self limitSnapshotCenterX:point.x], [self limitSnapshotCenterY:point.y]);//point = CGPointMake(_snapshot.center.x, [self limitSnapshotCenterY:point.y]);//Let the screenshot follow the gesture_snapshot.center = point;NSIndexPath *currentIndexPath = [self indexPathForItemAtPoint:point];if (!currentIndexPath) {return;}UICollectionViewCell *selectedCell = [self cellForItemAtIndexPath:_selectedIndexPath];selectedCell.hidden = YES;if (self.dataSource && [self.dataSource respondsToSelector:@selector(collectionView:canMoveItemAtIndexPath:)]) {if (![self.dataSource collectionView:self canMoveItemAtIndexPath:currentIndexPath]) {return;}}if (currentIndexPath && ![_selectedIndexPath isEqual:currentIndexPath]) {//Exchange data source and cell[self updateDataSourceAndCellFromIndexPath:_selectedIndexPath toIndexPath:currentIndexPath];if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:didMoveCellFromIndexPath:toIndexPath:)]) {[self.delegate collectionView:self didMoveCellFromIndexPath:_selectedIndexPath toIndexPath:currentIndexPath];}_selectedIndexPath = currentIndexPath;}
}- (void)gestureEndedOrCancelled:(UILongPressGestureRecognizer *)gesture {if (_canEdgeScroll) {[self stopEdgeScroll];}if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:endMoveCellAtIndexPath:)]) {[self.delegate collectionView:self endMoveCellAtIndexPath:_selectedIndexPath];}UICollectionViewCell *cell = [self cellForItemAtIndexPath:_selectedIndexPath];cell.alpha = 0.7;[UIView animateWithDuration:0.3 animations:^{self.snapshot.transform = CGAffineTransformIdentity;self.snapshot.frame = cell.frame;
//        self.snapshot.frame = CGRectMake((cell.frame.size.width - self.snapshot.frame.size.width)/2.0f, cell.frame.origin.y + (cell.frame.size.height - self.snapshot.frame.size.height)/2.0, self.snapshot.frame.size.width, self.snapshot.frame.size.height);} completion:^(BOOL finished) {cell.hidden = NO;[self.snapshot removeFromSuperview];self.snapshot = nil;}];// 延时后更新整个数据源dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{[self reloadData];});
}

Demo Git地址

SDMovableCellCollectionView

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...