用Swift实现在iOS中实现拖动排序CollectionView

2024-01-08 03:51:03

项目背景

在最近的版本迭代中，我需要实现一个可以拖动排序的CollectionView。效果如下图所示：

[图片]

解决方案

1. 创建一个继承UICollectionView的类

首先，我们需要创建一个继承UICollectionView的类。这个类将负责处理拖动排序功能。

class DraggableCollectionView: UICollectionView {

    // 初始化长按手势识别器
    private let longPressGestureRecognizer = UILongPressGestureRecognizer()

    // 初始化
    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)

        // 添加长按手势识别器
        addGestureRecognizer(longPressGestureRecognizer)

        // 设置长按手势识别器的响应者
        longPressGestureRecognizer.delegate = self

        // 设置长按手势识别器的最小长按时间
        longPressGestureRecognizer.minimumPressDuration = 0.5
    }

    // 编码器初始化
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 监听手势事件

接下来，我们需要监听长按手势事件。当用户长按一个项目时，我们将交换项目的位置。

extension DraggableCollectionView: UIGestureRecognizerDelegate {

    // 是否允许手势识别器同时识别多个手势
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }

    // 当手势识别器开始时调用
    func gestureRecognizerDidBegin(_ gestureRecognizer: UIGestureRecognizer) {
        guard let indexPath = indexPathForItem(at: gestureRecognizer.location(in: self)) else {
            return
        }

        // 开始拖动项目
        beginDraggingItem(at: indexPath)
    }

    // 当手势识别器移动时调用
    func gestureRecognizerDidChange(_ gestureRecognizer: UIGestureRecognizer) {
        guard let indexPath = indexPathForItem(at: gestureRecognizer.location(in: self)) else {
            return
        }

        // 移动项目
        moveItem(at: indexPath, to: indexPath)
    }

    // 当手势识别器结束时调用
    func gestureRecognizerDidEnd(_ gestureRecognizer: UIGestureRecognizer) {
        // 结束拖动项目
        endDraggingItem()
    }
}

3. 交换项目的位置

最后，我们需要交换项目的位置。

private func beginDraggingItem(at indexPath: IndexPath) {
    // 获取项目视图
    guard let itemCell = cellForItem(at: indexPath) else {
        return
    }

    // 启动项目视图的长按动画
    itemCell.startAnimation()

    // 存储项目的原始位置
    dragStartPosition = indexPath
}

private func moveItem(at indexPath: IndexPath, to newIndexPath: IndexPath) {
    // 获取项目视图
    guard let itemCell = cellForItem(at: indexPath) else {
        return
    }

    // 交换项目数据源
    dataSource?.collectionView?(self, moveItemAt: indexPath, to: newIndexPath)

    // 交换项目视图
    itemCell.frame = frameForItem(at: newIndexPath)

    // 更新项目的原始位置
    dragStartPosition = newIndexPath
}

private func endDraggingItem() {
    // 获取项目视图
    guard let itemCell = cellForItem(at: dragStartPosition) else {
        return
    }

    // 停止项目视图的长按动画
    itemCell.stopAnimation()

    // 重新加载数据
    reloadData()
}

代码示例

import UIKit

class ViewController: UIViewController {

    // 创建CollectionView
    private let collectionView: DraggableCollectionView = {
        let layout = UICollectionViewFlowLayout()
        let collectionView = DraggableCollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.register(ItemCell.self, forCellWithReuseIdentifier: "ItemCell")
        return collectionView
    }()

    // 初始化数据源
    private var dataSource: [String] = [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        // 设置CollectionView的代理
        collectionView.dataSource = self

        // 添加CollectionView到视图中
        view.addSubview(collectionView)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // 设置CollectionView的布局
        collectionView.frame = view.bounds
    }
}

// 定义项目视图的单元格
class ItemCell: UICollectionViewCell {

    // 创建标签
    private let label: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 14)
        label.textAlignment = .center
        return label
    }()

    // 初始化
    override init(frame: CGRect) {
        super.init(frame: frame)

        // 添加标签到单元格中
        addSubview(label)
    }

    // 编码器初始化
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // 设置标签的文本
    func setText(_ text: String) {
        label.text = text
    }

    // 启动项目视图的长按动画
    func startAnimation() {
        // 设置单元格的背景色
        backgroundColor = .lightGray

        // 创建动画
        let animation = CABasicAnimation(keyPath: "transform.scale")
        animation.fromValue = 1.0
        animation.toValue = 1.2
        animation.duration = 0.25
        animation.autoreverses = true
        animation.repeatCount = .infinity

        // 添加动画到单元格中
        layer.add(animation, forKey: "scale")
    }

    // 停止项目视图的长按动画
    func stopAnimation() {
        // 移除动画
        layer.removeAnimation(forKey: "scale")

        // 设置单元格的背景色
        backgroundColor = .white
    }
}

// 符合UICollectionViewDataSource协议
extension ViewController: UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataSource.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ItemCell", for: indexPath) as! ItemCell
        cell.setText(dataSource[indexPath.item])
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
        let item = dataSource[sourceIndexPath.item]
        dataSource.remove(at: sourceIndexPath.item)
        dataSource.insert(item, at: destinationIndexPath.item)
    }
}