山西做网站,公司网站后如何更新,广告公司名称推荐,站长工具永久概览
UIKit 中的 UICollectionView 视图是我们显示多列集合数据的不二选择#xff0c;而丰富多彩的交互操作更是我们选择 UICollectionView 视图的另一个重要原因。 如上图所示#xff1a;我们实现了在 UICollectionView 中拖放交换任意两个 Cell 子视图的功能#xff0c;这…
概览
UIKit 中的 UICollectionView 视图是我们显示多列集合数据的不二选择而丰富多彩的交互操作更是我们选择 UICollectionView 视图的另一个重要原因。 如上图所示我们实现了在 UICollectionView 中拖放交换任意两个 Cell 子视图的功能这是怎么做到的呢 在本篇博文中您将学到如下内容 概览1. UICollectionView 拖放交互基本思路2. 构建 storyboard3. 准备数据源4. 遵守拖放代理5. 更快的响应交换操作总结 其实完成这样一种交换远比小伙伴们想象的要简单的多
所以还等什么呢Let‘s find out 1. UICollectionView 拖放交互基本思路
在 iOSiPadOS/MacOS 中广义的拖放操作涉及到跨越不同 App 间的范畴比如我们常常希望将微信中的图片直接拖动到 QQ 的聊天界面中去。
不过这里我们只想在 App 内部进行拖动所以完成起来就要简单许多。我们的数据元素不需要满足 NSItemProvider 或 NSSecureCoding 等一些苛刻限制只是单纯的数据即可。
一般来说为了完成拖放我们需要在对应视图上实现 UIDragInteractionDelegate 和 UIDropInteractionDelegate 协议指定的方法。
而对于 UICollectionView 视图其子 Cell 间的拖动我们还有更简单的方式遵守 UICollectionViewDragDelegate 和 UICollectionViewDropDelegate 协议即可。 iOSiPadOS/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 的交换功能。
感谢观赏再会
