UIKit 在 UICollectionView 中拖放交换 Cell 视图的极简实现

本文主要是介绍UIKit 在 UICollectionView 中拖放交换 Cell 视图的极简实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概览

UIKit 中的 UICollectionView 视图是我们显示多列集合数据的不二选择，而丰富多彩的交互操作更是我们选择 UICollectionView 视图的另一个重要原因。

如上图所示：我们实现了在 UICollectionView 中拖放交换任意两个 Cell 子视图的功能，这是怎么做到的呢？

其实，完成这样一种交换远比小伙伴们想象的要简单的多！

所以，还等什么呢？Let‘s find out！！！😉

---

1. UICollectionView 拖放交互基本思路

在 iOS（iPadOS/MacOS） 中，广义的拖放操作涉及到跨越不同 App 间的范畴：比如，我们常常希望将微信中的图片直接拖动到 QQ 的聊天界面中去。

不过，这里我们只想在 App 内部进行拖动，所以完成起来就要简单许多。我们的数据元素不需要满足 NSItemProvider 或 NSSecureCoding 等一些苛刻限制，只是单纯的数据即可。

一般来说，为了完成拖放，我们需要在对应视图上实现 UIDragInteractionDelegate 和 UIDropInteractionDelegate 协议指定的方法。

而对于 UICollectionView 视图，其子 Cell 间的拖动我们还有更简单的方式：遵守 UICollectionViewDragDelegate 和 UICollectionViewDropDelegate 协议即可。

iOS（iPadOS/MacOS） 系统中关于拖放（Drag & Drop）更详细全面的介绍，苹果官网无疑是一个很好的选择：

•  Drag and drop

2. 构建 storyboard

首先，新建一个 UIKit 项目，打开 Main 故事板（Main.storyboard）为视图控制器添加一个 UICollectionView 子视图：

如上图所示，我们随后又在 UICollectionView 中添加了一个静态的 UICollectionViewCell 控件：

然后，调整 UICollectionViewCell 背景以及 Label 字体大小和颜色到满意为止：

最后，妥善设置好 UICollectionViewCell 的 ID：

并将 UICollectionView 关联到视图控制器的 collectionView 属性上：

3. 准备数据源

现在界面布局已准备就绪，我们接下来需要创建数据模型：

struct Item {var id = UUID()var title: Stringstatic var preview: [Item] {[Item(title: "Apple"), Item(title: "Banana"),Item(title: "Cherry"), Item(title: "Date"),Item(title: "Dragon"), Item(title: "Sheep"),Item(title: "V-Malicious"), Item(title: "X-Code"),Item(title: "GreatWall"), Item(title: "TaiTan"),Item(title: "Milk"), Item(title: "🥸"),]}
}

是滴，我们只需要一个简单的结构类型就可以了！

然后，让我们的 ViewController 遵守 UICollectionViewDataSource 协议，并实现相关方法：

class ViewController: UIViewController, UICollectionViewDataSource {@IBOutlet weak var collectionView: UICollectionView!var items = Item.previewfunc collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {items.count}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! Cellcell.layer.cornerRadius = 15.0cell.label.text = items[indexPath.row].titlereturn cell}override func viewDidLoad() {super.viewDidLoad()collectionView.dataSource = self}
}

注意，我们并没有让 ViewController 遵守 UICollectionViewDelegate 协议，因为它和这里的拖动操作基本上没有半毛线关系。

4. 遵守拖放代理

上面说过，为了让 UICollectionView 中的 Cell 子视图支持拖放，我们需要先让视图控制器遵守 UICollectionViewDragDelegate 和 UICollectionViewDropDelegate 协议：

extension ViewController: UICollectionViewDragDelegate {func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {// 保存源 Item 索引srcIndex = indexPathlet itemProvider = NSItemProvider(object: "Item" as NSString)return [UIDragItem(itemProvider: itemProvider)]}
}extension ViewController: UICollectionViewDropDelegate {func collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) -> UICollectionViewDropProposal {// 保存目的 Item 索引self.destIndex = destinationIndexPathreturn .init(operation: .move)}func collectionView(_ collectionView: UICollectionView, dropSessionDidEnd session: UIDropSession) {        guard let srcIndex, let destIndex else { return }swapItems(from: srcIndex, to: destIndex)self.srcIndex = nilself.destIndex = nil}
}

对于上面的代码，需要说明的是：

• collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) 在拖动开始时被调用，我们可以趁机保存源 Item 的信息；
• collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) 在拖动中被多次调用，其中传入的 destinationIndexPath 参数表示目的 Cell 的索引（如果下方有的话），我们可以借此保存目的 Item 的信息；
• collectionView(_ collectionView: UICollectionView, dropSessionDidEnd session: UIDropSession) 在结束放置时被调用，我们此时可以实现交换对应 Cell 的操作；

随后，我们还需要在 ViewController 中添加所需的属性和方法：

var srcIndex: IndexPath?
var destIndex: IndexPath?private func swapItems(from srcIndex: IndexPath, to destIndex: IndexPath) {items.swapAt(srcIndex.row, destIndex.row)// 将源和目的 Cell 的移动放到批处理中以产生流畅的动画：collectionView.performBatchUpdates {collectionView.moveItem(at: srcIndex, to: destIndex)collectionView.moveItem(at: destIndex, to: srcIndex)}
}

最后，在视图控制器加载时为其绑定对应的拖放代理，并开启拖动交互：

override func viewDidLoad() {super.viewDidLoad()collectionView.dataSource = selfcollectionView.dropDelegate = selfcollectionView.dragDelegate = selfcollectionView.dragInteractionEnabled = true
}

现在，运行 App 看一下效果：

不过，小伙伴们或许发现了，拖动放置后 Cell 交换会有略微延时，这是怎么回事呢？

5. 更快的响应交换操作

上面 Cell 拖动交换会慢一拍的原因为：我们是在 collectionView(_ collectionView: UICollectionView, dropSessionDidEnd session: UIDropSession) 方法中执行 swapItems() 来完成交换的。

而系统对该方法的回调触发是比较“谨慎”的，它会在判断用户彻底抬起手指后才能得到运行机会。

如果希望用户在目标 Cell 上抬起手指时能够立即完成交换行为，我们可以将 swapItems() 方法放到 UICollectionViewDragDelegate 协议中的 collectionView(_ collectionView: UICollectionView, dragSessionDidEnd session: UIDragSession) 的回调中去执行，因为该方法识别触发的速度要快得多:

extension ViewController: UICollectionViewDragDelegate {func collectionView(_ collectionView: UICollectionView, dragSessionDidEnd session: UIDragSession) {guard let srcIndex, let destIndex else { return }swapItems(from: srcIndex, to: destIndex)self.srcIndex = nilself.destIndex = nil}
}

再次运行 App 看一下：

现在，我们 UICollectionView 中的拖放交换操作的速度又上了一个新台阶，还不快给自己一个大大的赞吗？棒棒哒！💯

总结

在本篇博文中，我们讨论了 UIKit 中 UICollectionView 视图拖放操作的基本原理，并用最简单的代码实现了 UICollectionView 视图中 Cell 的交换功能。

感谢观赏，再会！😎

这篇关于UIKit 在 UICollectionView 中拖放交换 Cell 视图的极简实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---