iOS 列表拖拽cell排序

先看效果:

拖拽cell排序

一、 UITableView有自带的cell拖拽排序功能,但是有个缺点,拖拽平移的手势只能在cell的最右侧,拖拽按钮上的图标也不方便更换,在此不在细说;

二、使用UICollectionView实现cell拖拽排序

视频中的效果是使用UICollectionView实现的;

UICollectionView部分的代码不再写了,就是常规的实现;以下只把拖拽手势实现的逻辑贴出来,仅供参考:

1、在listView: UICollectionView!上添加PanGesture手势:

复制代码
        self.listView.register(UINib(nibName: "RecordListCVCell", bundle: nil), forCellWithReuseIdentifier: "RecordListCVCell")
        self.listView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: ScreenWidth - 32, height: 55)
        self.listView.collectionViewLayout = layout
        self.listView.reloadData()
        
        panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
        panGesture!.isEnabled = true
        panGesture!.delegate = self
        self.listView.addGestureRecognizer(panGesture!)片

2、在UIGestureRecognizerDelegate代理方法中限制手势的作用范围:

这一步主要是防止 panGesture 与 listView滚动冲突

复制代码
//限制拖拽手势的作用范围:仅左侧60pt宽度区域有效
    func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        guard gestureRecognizer == panGesture,
              let pan = gestureRecognizer as? UIPanGestureRecognizer else {
            return true
        }
        // 1. 获取触摸点坐标
        let touchPoint = pan.location(in: listView)
        // 2. 区域限制:仅左侧60pt宽度区域有效
        guard touchPoint.x < 60 else {
            return false // 超出区域不响应
        }
        return true
    }

3、cell的平移操作:

复制代码
//平移
    @objc func handlePanGesture(_ panPress: UIPanGestureRecognizer) {
        switch panPress.state {
        case .began:
            // 手势作用的位置
            if let selectIndexPath = listView.indexPathForItem(at: panPress.location(in: listView)) {
                // 找到当前的 cell
                if let _ = listView.cellForItem(at: selectIndexPath) as? RecordListCVCell {
                    // 开始移动
                    listView.beginInteractiveMovementForItem(at: selectIndexPath)
                }
            }
            break
        case .changed:
            // 更新移动的位置:只移动Y,移动时cell的中心点X会跑到0点位置,所以要 x = (ScreenWidth - 32) / 2.0  纠正过来
            listView.updateInteractiveMovementTargetPosition(CGPoint(x: (ScreenWidth - 32) / 2.0, y: panPress.location(in: panPress.view).y))
            break
        case .ended:
            // 结束移动
            listView.endInteractiveMovement()
            break
        default:
            listView.cancelInteractiveMovement()
            break
        }
    }

4、在UICollectionViewDataSource代理中实现数据源的重新排序:

复制代码
func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath){
        //拖拽排序:更新数据源顺序
        let element = dataList.remove(at: sourceIndexPath.row)
        dataList.insert(element, at: destinationIndexPath.row)
        self.listView.reloadData()
    }
相关推荐
VicLi13 小时前
把常用 iOS 调试操作放进一个 macOS 控制台: iCATBox
ios
茶底世界之下13 小时前
雾景需要更强反差吗?用 Awaking 检查树影与雾气的平衡
ios
终端安全笔记15 小时前
下一个大版本要动的三处:更新指令、传输要求、策略写法
网络安全·ios·1024程序员节·移动设备管理
法的空间17 小时前
AI 编程时代,为什么 Dart 分析会拖慢大型项目的开发
android·flutter·ios
season_zhu17 小时前
Skills For Real Engineers 系列之二:grill,把需求想清楚,也别把自己问进死胡同
ios·ai编程
美狐美颜SDK开放平台1 天前
准备开发直播APP?视频美颜SDK接入前的十项检查清单
android·ios·音视频·直播美颜sdk·视频美颜sdk
承渊政道2 天前
iOS远程控制电脑用什么好?iPhoneiPad远程控制Windows电脑最佳方案2026横评
windows·ios·远程控制·1024程序员节·iphone ipad
茶底世界之下2 天前
彩色建筑适合转黑白吗?用 Awaking 检查颜色消失后的层次
ios
黑科技iOS上架2 天前
App Store 26年10月新应用审核放缓大量应用不进审
ios·审核
OxYGC2 天前
手机为什么能“自动跳过“开屏广告?李跳跳、GKD 与 iOS 代理软件原理盘点
android·ios·开屏广告·广告屏蔽