Collectionview 交互式单元格交换

Question

我已经实现了一个集合视图，如here 所述。如您所见，它使用了 iOS 9 中提供的 collectionview 单元格的交互式重新排序。但问题是，我无法控制单元格的重新排序。

说细胞是这样的 -

1  2  3  4
5  6  7  8
9  10 11 12

我只想交换单元格 6 和 4。所以重新排序后单元格将是

1  2  3  6
5  4  7  8
9  10 11 12

这里，在教程中，在程序开始的时候，collection view是这样的——

如果我把 Starbuck 放在 Rose Tyler 上面，就会发生这种情况 -

请注意，Sarah Connor 的位置是 Starbuck。

我想控制单元格的重新排序，以便在此处交换 Rose Tyler 和 Starbuck 的位置。

我该怎么做？

Answer 1

听起来好像您只是在移动一个物体，或者在您的情况下是星巴克。

当您这样做时，列表将自行重新排序；基于此，Rose Tyler 将在逻辑上处于您所展示的位置。

如果您将其视为在主题公园中排队等候骑行，那么您所表现出的行为非常合理。 Sam、Dana 和 Rose 排在第 2 位和第 3 位，Sarah、Starbuck 和 River 排在第 4、5 和第 6 位。如果 Rose 然后让星巴克排在她前面，那么 Rose 排在第四位，而 Sarah 现在排在第五位。

要获得您想要的东西，您需要保留 Rose 在列表中的位置以及 Starbuck 在列表中的位置的参考。然后，您需要逐个移动需要移动的每个人，而不是像现在这样移动星巴克。

Answer 2

为了重新排序集合视图项目，我们需要在集合视图上添加长按手势。为了使用特定的 indexPath 重新排序集合视图项，UICollectionViewDelegate 提供了“targetIndexPathForMoveFromItemAt”方法。 为了获得完整的教程，您可以按照Reordering CollectionView Item

Answer 3

我会按照以下步骤进行...

第一步创建这样的模型

class CrewMembersModel {
    var name: String?
    var position: Int?

    fileprivate init (name: String, position: Int) {
        self.name = name
        self.position = position
    }

    static var crewMembersDataList: [CrewMembersModel]? = nil

    class func getMembersList() -> [CrewMembersModel] {
        if (self.crewMembersDataList == nil) {
            self.crewMembersDataList = [CrewMembersModel]()
            self.crewMembersDataList?.append(CrewMembersModel(name: "Sam Carter", position: 0))
            self.crewMembersDataList?.append(CrewMembersModel(name: "Dana Scully", position: 1))
            self.crewMembersDataList?.append(CrewMembersModel(name: "Rose Taylor", position: 2))
            self.crewMembersDataList?.append(CrewMembersModel(name: "Sarah Conor", position: 3))
            self.crewMembersDataList?.append(CrewMembersModel(name: "Starbuck", position: 4))
            self.crewMembersDataList?.append(CrewMembersModel(name: "River Tam", position: 5))
            self.crewMembersDataList?.append(CrewMembersModel(name: "Sarah Jane", position: 6))

        }
        return crewMembersDataList!.sorted(by: { $0.position! < $1.position!})
    }
}

请注意 在这里您可以添加模型的其他属性，例如图像等...

第二步在ViewControllerviewDidLoad方法中获取模型列表

self.crewMembersDataList = CrewMembersModel.getMembersList()

第三步在func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell解析模型数据

let crewMembersData: CrewMembersModel = self.crewMembersDataList[indexPath.row - 1]
cell.name = crewMembersData.name!

最后在第 4 步中，每当您进行更改时，更改所选单元格的位置并调用 collectionView.reloadData()

func changePositions(selectedModelOne: CrewMembersModel, selectedModelTwo: CrewMembersModel) {
    let tmpPosition = selectedModelOne.position!
    selectedModelOne.position = selectedModelTwo.position!
    selectedModelTwo.position = tmpPosition

    self.crewMembersDataList.sorted(by: { $0.position! < $1.position!})
    self.collectionView.reloadData()
}

请注意我没有检查整个代码，可能是一些语法问题

Answer 4

简单的解决方案是实现您自己的交互式单元格排序行为，只需沿着屏幕中的平移移动单元格并在手势结束于另一个单元格的位置时交换（使用您自己的动画和数据源更新）。这是一个工作示例：

class ViewController: UIViewController, UICollectionViewDataSource {

    var arr: [String] = (0...100).map { return "\($0)" }

    lazy var collectionView: UICollectionView =  {
        let layout = UICollectionViewFlowLayout()
        let cv: UICollectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
        cv.register(Cell.self, forCellWithReuseIdentifier: Cell.id)
        layout.itemSize = CGSize(width: view.bounds.width/3.5, height: 100)
        cv.dataSource = self
        cv.addGestureRecognizer(longPressGesture)
        return cv
    }()

    lazy var longPressGesture: UILongPressGestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(self.handleLongGesture(gesture:)))

    private var movingCell: MovingCell?

    override func viewDidLoad() {
        super.viewDidLoad()
        view = collectionView
    }

    @objc func handleLongGesture(gesture: UILongPressGestureRecognizer) {

        var cell: (UICollectionViewCell?, IndexPath?) {
            guard let indexPath = collectionView.indexPathForItem(at: gesture.location(in: collectionView)),
                let cell = collectionView.cellForItem(at: indexPath) else { return (nil, nil) }
            return (cell, indexPath)
        }

        switch(gesture.state) {

        case .began:
            movingCell = MovingCell(cell: cell.0, originalLocation: cell.0?.center, indexPath: cell.1)
            break
        case .changed:

            /// Make sure moving cell floats above its siblings.
            movingCell?.cell.layer.zPosition = 100
            movingCell?.cell.center = gesture.location(in: gesture.view!)

            break
        case .ended:

            swapMovingCellWith(cell: cell.0, at: cell.1)
            movingCell = nil
        default:
            movingCell?.reset()
            movingCell = nil
        }
    }

    func swapMovingCellWith(cell: UICollectionViewCell?, at indexPath: IndexPath?) {
        guard let cell = cell, let moving = movingCell else {
            movingCell?.reset()
            return
        }

        // update data source
        arr.swapAt(moving.indexPath.row, indexPath!.row)

        // swap cells
        animate(moving: moving.cell, to: cell)
    }

    func animate(moving movingCell: UICollectionViewCell, to cell: UICollectionViewCell) {
        longPressGesture.isEnabled = false

        UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0.7, options: UIViewAnimationOptions.allowUserInteraction, animations: {
            movingCell.center = cell.center
            cell.center = movingCell.center
        }) { _ in
            self.collectionView.reloadData()
            self.longPressGesture.isEnabled = true
        }
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: Cell = collectionView.dequeueReusableCell(withReuseIdentifier: Cell.id, for: indexPath) as! Cell
        cell.titleLable.text = arr[indexPath.row]
        return cell
    }

    private struct MovingCell {
        let cell: UICollectionViewCell
        let originalLocation: CGPoint
        let indexPath: IndexPath

        init?(cell: UICollectionViewCell?, originalLocation: CGPoint?, indexPath: IndexPath?) {
            guard cell != nil, originalLocation != nil, indexPath != nil else { return nil }
            self.cell = cell!
            self.originalLocation = originalLocation!
            self.indexPath = indexPath!
        }

        func reset() {
            cell.center = originalLocation
        }
    }

    final class Cell: UICollectionViewCell {
        static let id: String = "CellId"

        lazy var titleLable: UILabel = UILabel(frame: CGRect(x: 0, y: 20, width: self.bounds.width, height: 30))

        override init(frame: CGRect) {
            super.init(frame: frame)
            addSubview(titleLable)
            titleLable.backgroundColor = .green
            backgroundColor = .white
        }

        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
        }
    }
}

Answer 5

UICollectionView *collection;
MSMutableArray *datasource;
NSIndexPath *from = [NSIndexPath indexPathForItem:0 inSection:0];
NSIndexPath *to = [NSIndexPath indexPathForItem:1 inSection:0];

// swap animated
[collection performBatchUpdates:^{
    // To avoid problems, you should update your data model inside the updates block 
    [datasource exchangeObjectAtIndex:from.item withObjectAtIndex:to.item];
    // for swap need two move operations
    [collection moveItemAtIndexPath:from toIndexPath:to];
    [collection moveItemAtIndexPath:to toIndexPath:from];
    // no need to update the moved cells because the content has not changed
    //[collection reloadSections:[NSIndexSet indexSetWithIndex:0]];
} completion:^(BOOL finished) {

}];