ios - CollectionView 中的自定义单元格重新排序行为

标签 ios swift uicollectionview

我可以像这样重新排序我的 collectionView:

enter image description here

但是,我不想让所有单元格都水平移动,而是想交换以下行为(即单元格的混洗较少):

enter image description here

我一直在使用以下委托(delegate)方法:

func collectionView(_ collectionView: UICollectionView, targetIndexPathForMoveFromItemAt originalIndexPath: IndexPath, toProposedIndexPath proposedIndexPath: IndexPath) -> IndexPath

但是,我不确定如何实现自定义重新排序行为。

最佳答案

我设法通过创建 UICollectionView 的子类并向交互式移动添加自定义处理来实现这一点。在查看有关如何解决问题的可能提示时,我找到了本教程:http://nshint.io/blog/2015/07/16/uicollectionviews-now-have-easy-reordering/ . 最重要的部分是交互式重新排序不仅可以在 UICollectionViewController 上完成。相关代码如下所示:

var longPressGesture : UILongPressGestureRecognizer!

override func viewDidLoad() {
    super.viewDidLoad()

    // rest of setup        

    longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(ViewController.handleLongGesture(_:)))
    self.collectionView?.addGestureRecognizer(longPressGesture)

}

func handleLongGesture(gesture: UILongPressGestureRecognizer) {

    switch(gesture.state) {

    case UIGestureRecognizerState.Began:
        guard let selectedIndexPath = self.collectionView?.indexPathForItemAtPoint(gesture.locationInView(self.collectionView)) else {
            break
        }
        collectionView?.beginInteractiveMovementForItemAtIndexPath(selectedIndexPath)
    case UIGestureRecognizerState.Changed:
        collectionView?.updateInteractiveMovementTargetPosition(gesture.locationInView(gesture.view!))
    case UIGestureRecognizerState.Ended:
        collectionView?.endInteractiveMovement()
    default:
        collectionView?.cancelInteractiveMovement()
    }
}

这需要在放置 Collection View 的 View Controller 中。我不知道这是否适用于 UICollectionViewController,可能需要一些额外的修补。是什么让我对 UICollectionView 进行子类化是因为我意识到所有其他相关的类/委托(delegate)方法只被告知第一个和最后一个索引路径(即源和目标),没有关于所有其他的信息重新排列的细胞,因此需要在核心停止。

SwappingCollectionView.swift:

import UIKit

extension UIView {
    func snapshot() -> UIImage {
        UIGraphicsBeginImageContext(self.bounds.size)
        self.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

extension CGPoint {
    func distanceToPoint(p:CGPoint) -> CGFloat {
        return sqrt(pow((p.x - x), 2) + pow((p.y - y), 2))
    }
}

struct SwapDescription : Hashable {
    var firstItem : Int
    var secondItem : Int

    var hashValue: Int {
        get {
            return (firstItem * 10) + secondItem
        }
    }
}

func ==(lhs: SwapDescription, rhs: SwapDescription) -> Bool {
    return lhs.firstItem == rhs.firstItem && lhs.secondItem == rhs.secondItem
}

class SwappingCollectionView: UICollectionView {

    var interactiveIndexPath : NSIndexPath?
    var interactiveView : UIView?
    var interactiveCell : UICollectionViewCell?
    var swapSet : Set<SwapDescription> = Set()
    var previousPoint : CGPoint?

    static let distanceDelta:CGFloat = 2 // adjust as needed

    override func beginInteractiveMovementForItemAtIndexPath(indexPath: NSIndexPath) -> Bool {

        self.interactiveIndexPath = indexPath

        self.interactiveCell = self.cellForItemAtIndexPath(indexPath)

        self.interactiveView = UIImageView(image: self.interactiveCell?.snapshot())
        self.interactiveView?.frame = self.interactiveCell!.frame

        self.addSubview(self.interactiveView!)
        self.bringSubviewToFront(self.interactiveView!)

        self.interactiveCell?.hidden = true

        return true
    }

    override func updateInteractiveMovementTargetPosition(targetPosition: CGPoint) {

        if (self.shouldSwap(targetPosition)) {

            if let hoverIndexPath = self.indexPathForItemAtPoint(targetPosition), let interactiveIndexPath = self.interactiveIndexPath {

                let swapDescription = SwapDescription(firstItem: interactiveIndexPath.item, secondItem: hoverIndexPath.item)

                if (!self.swapSet.contains(swapDescription)) {

                    self.swapSet.insert(swapDescription)

                    self.performBatchUpdates({
                        self.moveItemAtIndexPath(interactiveIndexPath, toIndexPath: hoverIndexPath)
                        self.moveItemAtIndexPath(hoverIndexPath, toIndexPath: interactiveIndexPath)
                        }, completion: {(finished) in
                            self.swapSet.remove(swapDescription)                                
                            self.dataSource?.collectionView(self, moveItemAtIndexPath: interactiveIndexPath, toIndexPath: hoverIndexPath)
                            self.interactiveIndexPath = hoverIndexPath

                    })
                }
            }
        }

        self.interactiveView?.center = targetPosition
        self.previousPoint = targetPosition
    }

    override func endInteractiveMovement() {
        self.cleanup()
    }

    override func cancelInteractiveMovement() {
        self.cleanup()
    }

    func cleanup() {
        self.interactiveCell?.hidden = false
        self.interactiveView?.removeFromSuperview()
        self.interactiveView = nil
        self.interactiveCell = nil
        self.interactiveIndexPath = nil
        self.previousPoint = nil
        self.swapSet.removeAll()
    }

    func shouldSwap(newPoint: CGPoint) -> Bool {
        if let previousPoint = self.previousPoint {
            let distance = previousPoint.distanceToPoint(newPoint)
            return distance < SwappingCollectionView.distanceDelta
        }

        return false
    }
}

我确实意识到那里发生了很多事情,但我希望一切都会在一分钟内清楚。

  1. UIView 的扩展,带有辅助方法以获取单元格的快照。
  2. CGPoint 的扩展,使用辅助方法计算两点之间的距离。
  3. SwapDescription 帮助器结构 - 需要它来防止同一对项目的多次交换,这会导致出现故障动画。它的 hashValue 方法可以改进,但对于这个概念证明来说已经足够好了。
  4. beginInteractiveMovementForItemAtIndexPath(indexPath: NSIndexPath) -> Bool - 移动开始时调用的方法。一切都在这里设置。我们获取我们的单元格的快照并将其添加为 subview ——该快照将是用户实际在屏幕上拖动的内容。细胞本身被隐藏。如果您从此方法返回 false,则交互运动将不会开始。
  5. updateInteractiveMovementTargetPosition(targetPosition: CGPoint) - 每次用户移动后调用的方法,有很多。我们检查与前一点的距离是否足够小以交换项目——这可以防止用户在屏幕上快速拖动并且多个项目会交换不明显结果的问题。如果交换可能发生,我们检查它是否已经发生,如果没有发生,我们交换两个项目。
  6. endInteractiveMovement(), cancelInteractiveMovement(), cleanup() - 移动结束后,我们需要将助手恢复为默认值状态。
  7. shouldSwap(newPoint: CGPoint) -> Bool - 检查移动是否足够小以便我们可以交换单元格的辅助方法。

这是它给出的结果:

result

让我知道这是否是您所需要的和/或您是否需要我澄清一些事情。

这是一个demo project .

关于ios - CollectionView 中的自定义单元格重新排序行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39172207/

相关文章:

ios - 切换 UI 元素图形问题

iphone - 使用 IB 创建的自定义单元在调用 reloadSections :withRowAnimation: 后隐藏

ios - 如何允许选择和取消选择多个 UICollectionViewCell?

Swift 3 UICollectionView 错误

ios - 转换 UICollectionViewCell 导致无法捕获触摸事件

ios - 检测到 UIScrollview 底部

ios - 当不在相机视野中时停止 SKVideoNode 播放

ios - View 框架在运行时不遵守约束

ios - 如何向 VPN 添加代理配置?

swift - Flutter:Cocoapods 'Pods-Runner' 目标具有传递依赖项,包括静态二进制文件:Flutter.framework