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

这里，在教程中，在程序开始的时候，集合视图是这样的——

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

请注意 Sarah Connor 有 Starbuck 的位置。

我想控制单元格的重新排序，这样 Rose Tyler 和 Starbuck 的位置就会互换。

我该怎么做？

Answer 1

听起来好像你只是在移动一个物体，或者在你的例子中是星巴克。

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

如果您将其视为在主题公园排队等候乘车，那么您所展示的行为就非常有道理。 Sam、Dana 和 Rose 分别排在第二和第三位，Sarah、Starbuck 和 River 分别排在第四、第五和第六位。如果 Rose 然后让 Starbuck 走在她前面，那么 Rose 排在第四位，而 Sarah 现在排在第五位。

要获得您想要的内容，您需要保留 Rose 在列表中的位置以及 Starbuck 在列表中的位置的引用。然后你需要一个一个地移动每个需要移动的人，而不是像你目前所做的那样只移动星巴克。

Answer 2

为了重新排序集合视图项目，我们需要在集合视图上添加长按手势。并且为了使用特定的 indexPath 重新排序集合视图项，UICollectionViewDelegate 提供了 "targetIndexPathForMoveFromItemAt" 方法。要获得完整的教程，请遵循此教程 Reordering CollectionView Item

Answer 3

我会按照以下步骤做...

1 步 创建这样的模型

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: { [=10=].position! < .position!})
    }
}

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

第二步 在ViewController viewDidLoad 方法

中获取模型列表

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: { [=13=].position! < .position!})
    self.collectionView.reloadData()
}

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

Answer 4

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

class ViewController: UIViewController, UICollectionViewDataSource {

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

    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) {

}];

Collectionview 交互式单元格交换

Collectionview interactive cell swapping

uicollectionview

swift

ios9