Drag, Drop & Deliver

Exploration of the Drag and Drop Apis introduced in iOS11. I show an overview of the main 3 areas that make up the api then present a live code example to build a football sticker book demo. Finally, a brief mention of drag and drops UICollectionView/UITableView application and a look at another app example to demonstrate this.

Transcript

1. Drag, Drop & Deliver Andy Bell - Partner at
2. Drag Item Preview Item Provider Drop Session Drop Interaction Delegate Drop Interaction Drag Session Drag Interaction Delegate Drag Interaction Drag, Drop & Deliver
3. Drag
4. Drag Item Preview Item Provider Drop Session Drop Interaction Delegate Drop Interaction Drag Session Drag Interaction Delegate Drag Interaction Drag
5. Drag Session Drag Interaction Delegate Drag Interaction Drag
6. Drag Session Drag Interaction Delegate Drag Interaction Drag dragView.addInteraction(UIDragInteraction(delegate: self))
7. Drag Session Drag Interaction Delegate Drag Interaction Drag UIDragInteractionDelegate Requires only 1 methods: 1. canHandle But many, many others available….
8. Drag Session Drag Interaction Delegate Drag Interaction Drag UIDragSession public var items: [UIDragItem] { get }
9. Drop
10. Drag Item Preview Item Provider Drop Session Drop Interaction Delegate Drop Interaction Drag Session Drag Interaction Delegate Drag Interaction Drop
11. Drop Session Drop Interaction Delegate Drop Interaction Drop
12. Drop Session Drop Interaction Delegate Drop Interaction Drop dropView.addInteraction(UIDropInteraction(delegate: self))
13. Drop Session Drop Interaction Delegate Drop Interaction Drop UIDropInteractionDelegate 3 required Delegate methods: 1. canHandle 2. sessionDidUpdate 3. performDrop
14. Drop Session Drop Interaction Delegate Drop Interaction Drop dropView.addInteraction(UIDragInteraction(delegate: self))
15. Drop Session Drop Interaction Delegate Drop Interaction Drop dropView.addInteraction(UIDragInteraction(delegate: self)) func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession) -> UIDropProposal { return UIDropProposal(operation: .copy) } +
16. Drop Session Drop Interaction Delegate Drop Interaction Drop func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) { }
17. Drop Session Drop Interaction Delegate Drop Interaction Drop func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession) { } for item in session.items { guard item.itemProvider.canLoadObject(ofClass: UIImage.self) else { continue } item.itemProvider.loadObject(ofClass: UIImage.self, completionHandler: { (payload, err) in // Load the UIImage… }) }
18. Deliver
19. Drag Item Preview Item Provider Drop Session Drop Interaction Delegate Drop Interaction Drag Session Drag Interaction Delegate Drag Interaction Deliver
20. Drag Item Preview Item Provider Deliver
21. Drag Item Preview Item Provider Deliver
22. Drag Item Preview Item Provider Deliver UITargetedDragPreview +
23. Drag Item Preview Item Provider Deliver + UITargetedDragPreview
24. Deliver func dragInteraction(_ interaction: UIDragInteraction, previewForCancelling item: UIDragItem, withDefault defaultPreview: UITargetedDragPreview) -> UITargetedDragPreview? { // return customised lift preview for reverse animation } UITargetedDragPreview func dragInteraction(_ interaction: UIDragInteraction, previewForLifting item: UIDragItem, withDefault defaultPreview: UITargetedDragPreview) -> UITargetedDragPreview? { // return customised lift preview for starting animation }
25. Drag Item Preview Item Provider Deliver UIDragItem
26. Drag Item Preview Item Provider Deliver UIDragItem var itemProvider: NSItemProvider { get }
27. Deliver var itemProvider: NSItemProvider { get } func canLoadObject(ofClass aClass: NSItemProviderReading.Type) -> Bool func loadObject(ofClass aClass: NSItemProviderReading.Type, completionHandler: @escaping (NSItemProviderReading?, Error?) -> Void) -> Progress - Asynchronous data delivery - Update UI back on the main thread here
28. Deliver func loadObject(ofClass aClass: NSItemProviderReading.Type, completionHandler: @escaping (NSItemProviderReading?, Error?) -> Void) -> Progress guard item.itemProvider.canLoadObject(ofClass: UIImage.self) else { return } item.itemProvider.loadObject(ofClass: UIImage.self, completionHandler: { (payload, err) in // Load the UIImage (on main thread!)… }) }
29. Deliver func loadObject(ofClass aClass: NSItemProviderReading.Type, completionHandler: @escaping (NSItemProviderReading?, Error?) -> Void) -> Progress progress.addObserver(self, forKeyPath: fractionCompletedKey, options: .new, context: nil) progress.fractionCompleted progress.isFinished An object that conveys ongoing progress for a given task to the user.
30. Deliver What can NSItemProvider deliver? NSString “Hello, World!” NSAttibutedString “Oh, how original” NSURL meetup.com UIColor
31. Deliver What can NSItemProvider deliver? UIImages “Hello World!”
32. Deliver What can NSItemProvider deliver? VCard data
33. Deliver What can NSItemProvider deliver? Your own class FunkyBaloon.swift
34. Deliver FunkyBaloon.swift NSItemProviderReading & NSItemProviderWriting Must confirm to 2 protocols….
35. Deliver NSItemProviderReading & NSItemProviderWriting Must confirm to 2 protocols…. creates model objects from data exports data from model object
36. CODE DEMO Sticker Book
37. CollectionViews & TableViews
38. UICollectionViewDragDelegate UIDragInteractionDelegate UICollectionViewDropDelegate UIDropInteractionDelegate
39. UICollectionViewDragDelegate UICollectionViewDropDelegate func collectionView(UICollectionView, itemsForBeginning: UIDragSession, at: IndexPath) func collectionView(UICollectionView, itemsForAddingTo: UIDragSession, at: IndexPath, point: CGPoint) func collectionView(UICollectionView, canHandle: UIDropSession) func collectionView(UICollectionView, dropSessionDidUpdate: UIDropSession, withDestinationIndexPath: IndexPath?) func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) {
41. UICollectionViewDragDelegate UICollectionViewDropDelegate func collectionView(UICollectionView, itemsForBeginning: UIDragSession, at: IndexPath) func collectionView(UICollectionView, itemsForAddingTo: UIDragSession, at: IndexPath, point: CGPoint) func collectionView(UICollectionView, canHandle: UIDropSession) func collectionView(UICollectionView, dropSessionDidUpdate: UIDropSession, withDestinationIndexPath: IndexPath?) func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) {
42. UICollectionViewDropDelegate func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) { } coordinator.destinationIndexPath for item in coordinator.items { item.sourceIndexPath item.dragItem.itemProvider }
43. UICollectionViewDropDelegate func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) { } coordinator.destinationIndexPath for item in coordinator.items { item.sourceIndexPath item.dragItem.itemProvider } DispatchQueue.main.async { self.collectionView.performBatchUpdates({ self.model.insert(dropGuest, at: coordinator.destinationIndexPath.row) self.collectionView.insertItems(at: [coordinator.destinationIndexPath]) }) }
46. DEMO Table Planner
47. Links • Introducing Drag and Drop - session 203 • Mastering Drag and Drop - session 213 • Data Delivery with Drag and Drop - session 227 • Drag and Drop with Collection and Table View - session 223 WWDC 2017 Videos