Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ゼロから始める Drag and Drop

ゼロから始める Drag and Drop

CA.swift #3 WWDC17 報告会
https://cyberagent.connpass.com/event/58796/ )での発表資料です。

Demoアプリは以下のリンクから。
https://github.com/cokaholic/DragAndDropDemo

95f926465b1c71fbb49850c5b6223c4d?s=128

Keisuke Tatsumi

June 19, 2017
Tweet

Transcript

  1. Drag and Drop CA.swift #3 2017/06/19 Keisuke Tatsumi

  2. Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github,

    Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi • WWDC 2017 attendee
 ʢMy First Time! ʣ
  3. ຊ೔ͷςʔϚ͸…

  4. Drag and Drop

  5. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  6. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  7. What’s Drag and Drop • iOS11ͷ৽ػೳ

  8. None
  9. iPhone5 iPhone5c

  10. What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ

  11. What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ

    • iPadͰͷΈ࢖͑Δ
  12. None
  13. ͱ͜Ζ͕…

  14. iPhoneͰ΋࢖͑ΔͬΆ͍ʁ

  15. iPhoneͰ΋࢖͑ΔͬΆ͍ʁ • ݱࡏʢ2017.6.19ʣ·Ͱʹ഑෍͞Ε͍ͯΔiOS11 betaͰ΋ɺಈըͷ௨Γਖ਼͘͠ػೳ͢Δ • ΋ͱ΋ͱAppleࣾ಺Ͱ͸iPhoneͰ΋ςετ͞Εͯ ͍ΔػೳΒ͍͠ • ΋͔ͨ͠͠Βɺਖ਼ࣜϦϦʔε൛Ͱ΋iPhone্Ͱ࢖ ͑Δ͔΋

  16. What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ

    • iPadͰͷΈ࢖͑ΔʢiPhoneͰ΋Մʁʣ
  17. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  18. How To Use • APIͷྲྀΕ͸େ͖̏ͭ͘ͷηΫγϣϯʹ෼͔ΕΔ ‣ ϦϑτηΫγϣϯʢ্࣋ͪ͛Δʣ ‣ υϥοάηΫγϣϯʢಈ͔͢ʣ ‣

    υϩοϓηΫγϣϯʢམͱ͢ʣ API Roadmap
  19. How To Use • ·ͣ͸લஈ֊Ͱ͋ΔViewͱͷ઀ଓΛߦ͏ API Roadmap

  20. How To Use import UIKit class ViewController: UIViewController { @IBOutlet

    weak var imageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() // υϥοά&υϩοϓ͢Δʹ͸༗ޮʹ͢Δඞཁ͕͋Δ imageView.isUserInteractionEnabled = true // UIImageViewʹυϥοάΠϯλϥΫγϣϯΛ௥Ճ͢Δ let dragInteraction = UIDragInteraction(delegate: self) imageView.addInteraction(dragInteraction) // ViewControllerͷviewʹυϩοϓΠϯλϥΫγϣϯΛ௥Ճ͢Δ let dropInteraction = UIDropInteraction(delegate: self) view.addInteraction(dropInteraction) } } ViewController.swift ᶃViewͱͷ઀ଓ
  21. ϦϑτηΫγϣϯ ্࣋ͪ͛Δ

  22. ϦϑτηΫγϣϯ import UIKit extension ViewController: UIDragInteractionDelegate { // required //

    υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ᶄUIDragInteractionDelegateͷ࣮૷Λߦ͏
  23. υϥοάηΫγϣϯ ಈ͔͢

  24. υϥοάηΫγϣϯ import UIKit extension ViewController: UIDragInteractionDelegate { // required //

    υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ᶄUIDragInteractionDelegateͷ࣮૷Λߦ͏
  25. υϥοάηΫγϣϯ import UIKit extension ViewController: UIDragInteractionDelegate { // required //

    υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ͳʹ͜Εʁ ᶄUIDragInteractionDelegateͷ࣮૷Λߦ͏
  26. NSItemProviderWriting • υϥοά&υϩοϓػೳͷυϥοάͷࡍʹ౉͢ΦϒδΣΫτ ͷॻ͖ࠐΈ༻Ϋϥε • ॻ͖ࠐΉ͜ͱ͕Ͱ͖ΔΫϥε͸جຊతʹ͸Լهͷ̑ͭ ‣ NSString ‣ NSAttributedString

    ‣ NSURL ‣ UIColor ‣ UIImage
  27. υϩοϓηΫγϣϯ མͱ͢

  28. υϩοϓηΫγϣϯ import UIKit import MobileCoreServices // UTCoreTypesΛ࢖༻͢Δࡍʹඞཁ extension ViewController: UIDropInteractionDelegate

    { // υϩοϓ͞ΕΔΞΠςϜ͕༗ޮ͔Ͳ͏͔൑ఆ͢Δࡍʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, canHandle session: UIDropSession) -> Bool { // ૹΒΕͯ͘ΔΞΠςϜͷ൑ఆ͸UTIͰߦ͏ // kUTTypeImage͸ը૾ͷ৔߹ͷidentifierͰɺUTI͸ public.image ͱͳΔ // ͜ͷ৔߹ɺը૾Ͱ͋ΓɺૹΒΕ͖ͯͨΞΠςϜ਺͕̍ͭͷ৔߹ͷΈ௨͢ͱ͍͏ҙຯʹͳΔ return session.hasItemsConforming(toTypeIdentifiers: [kUTTypeImage as String]) && session.items.count == 1 } } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏
  29. υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession)

    -> UIDropProposal { // υϥοάதͷΞΠςϜͷ࠲ඪ let dropLocation = session.location(in: view) let operation: UIDropOperation if imageView.frame.contains(dropLocation) { // imageViewͷதͰ཭ͨ͠৔߹ɺίϐʔѻ͍ʹͳΔ operation = .copy } else { // ͦΕҎ֎ͷҐஔͰ཭ͨ͠৔߹ɺΩϟϯηϧ͞ΕΔ operation = .cancel } return UIDropProposal(operation: operation) } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏
  30. υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, sessionDidUpdate session: UIDropSession)

    -> UIDropProposal { // υϥοάதͷΞΠςϜͷ࠲ඪ let dropLocation = session.location(in: view) let operation: UIDropOperation if imageView.frame.contains(dropLocation) { // imageViewͷதͰ཭ͨ͠৔߹ɺίϐʔѻ͍ʹͳΔ operation = .copy } else { // ͦΕҎ֎ͷҐஔͰ཭ͨ͠৔߹ɺΩϟϯηϧ͞ΕΔ operation = .cancel } return UIDropProposal(operation: operation) } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏ UIDropOperationʁ
  31. UIDropOperation • ΞΠςϜΛͦͷҐஔͰυϩοϓͨ͠ࡍͷڍಈ ͕Ͳ͏ͳΔ͔ΛϢʔβʔʹࣔ͢͜ͱ͕Ͱ͖Δ

  32. υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession)

    { // ηογϣϯ͔Βड͚औͬͨը૾Λϩʔυ͢Δ session.loadObjects(ofClass: UIImage.self) { [weak self] imageItems in guard let images = imageItems as? [UIImage] else { return } // ड͚औͬͨը૾ΛimageViewʹηοτ͢Δ self?.imageView.image = images.first } } } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏
  33. υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ func dropInteraction(_ interaction: UIDropInteraction, performDrop session: UIDropSession)

    { // ηογϣϯ͔Βड͚औͬͨը૾Λϩʔυ͢Δ session.loadObjects(ofClass: UIImage.self) { [weak self] imageItems in guard let images = imageItems as? [UIImage] else { return } // ड͚औͬͨը૾ΛimageViewʹηοτ͢Δ self?.imageView.image = images.first } } } ViewController+Drop.swift ᶅUIDropInteractionDelegateͷ࣮૷Λߦ͏ ͜͜·ͰͰυϥοά&υϩοϓ͸׬੒
  34. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  35. Draggable Items in the Same Screen • υϥοάηΫγϣϯʹ͓͍ͯɺυϥοάͰ͖ ΔΞΠςϜ͕ಉҰը໘಺ʹ̎ͭҎ্͋Δ৔߹ɺ ͲͷΑ͏ʹͯ͠൑ఆ͢Δ͔Λߟ͑ͯΈͨ

  36. import UIKit extension ViewController: UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ

    func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { guard let image = imageView.image else { return [] } // NSItemProviderʹૹΔΦϒδΣΫτ(NSItemProviderWriting)ΛೖΕΔ // ࠓճ͸imageViewʹදࣔ͞Ε͍ͯΔը૾ΛೖΕΔ let provider = NSItemProvider(object: image) // provider͔ΒUIDragItemΛੜ੒͠ɺ഑ྻʹͯ͠ฦ͢ let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift ϫϯύλʔϯͰ͔͠౉ͤͳ͍ʁ ઌ΄Ͳͷ࣮૷ͩͱ… Draggable Items in the Same Screen
  37. Draggable Items in the Same Screen import UIKit extension ViewController:

    UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { // interaction.viewͰυϥοά͞Ε͍ͯΔView͕Θ͔Δʂ guard let interactionView = interaction.view else { return [] } let provider: NSItemProvider // ͋ͱ͸ɺViewͰ൑ఆ͢Ε͹υϥοά͞Ε͍ͯΔUIImageViewͰ౉͢ը૾Λม͑ΒΕΔʂ if interactionView.isEqual(imageView) { guard let image = imageView.image else { return [] } provider = NSItemProvider(object: image) } else if interactionView.isEqual(imageView2) { guard let image = imageView2.image else { return [] } provider = NSItemProvider(object: image) } else { return [] } let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift
  38. Draggable Items in the Same Screen import UIKit extension ViewController:

    UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { // interaction.viewͰυϥοά͞Ε͍ͯΔView͕Θ͔Δʂ guard let interactionView = interaction.view else { return [] } let provider: NSItemProvider // ͋ͱ͸ɺViewͰ൑ఆ͢Ε͹υϥοά͞Ε͍ͯΔUIImageViewͰ౉͢ը૾Λม͑ΒΕΔʂ if interactionView.isEqual(imageView) { guard let image = imageView.image else { return [] } provider = NSItemProvider(object: image) } else if interactionView.isEqual(imageView2) { guard let image = imageView2.image else { return [] } provider = NSItemProvider(object: image) } else { return [] } let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift
  39. Draggable Items in the Same Screen import UIKit extension ViewController:

    UIDragInteractionDelegate { // required // υϥοά͕࢝·ͬͨࡍʹݺ͹ΕΔ func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] { // interaction.viewͰυϥοά͞Ε͍ͯΔView͕Θ͔Δʂ guard let interactionView = interaction.view else { return [] } let provider: NSItemProvider // ͋ͱ͸ɺViewͰ൑ఆ͢Ε͹υϥοά͞Ε͍ͯΔUIImageViewͰ౉͢ը૾Λม͑ΒΕΔʂ if interactionView.isEqual(imageView) { guard let image = imageView.image else { return [] } provider = NSItemProvider(object: image) } else if interactionView.isEqual(imageView2) { guard let image = imageView2.image else { return [] } provider = NSItemProvider(object: image) } else { return [] } let item = UIDragItem(itemProvider: provider) return [item] } } ViewController+Drag.swift
  40. Demo

  41. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  42. Summary • υϥοάˍυϩοϓ͸iOS11͔Βͷ৽ػೳͰ iPad ΋͘͠͸ iPhone Ͱ࢖༻Ͱ͖Δ • υϥοάˍυϩοϓʹ͸Ϧϑτɺυϥοάɺ υϩοϓͷ̏ͭͷηΫγϣϯ͕͋Δ

    • υϥοάˍυϩοϓ͸ಉҰը໘಺ʹෳ਺ͷυ ϥοάՄೳͳΞΠςϜ͕͋ͬͯ΋൑ఆͰ͖Δ
  43. Demo Source https://github.com/cokaholic/DragAndDropDemo

  44. Thank youʂ

  45. ࢀߟϦϯΫ • iOS11Ͱ͸iPhoneͰ΋υϥοάˍυϩοϓ͕Մೳʙ։ൃऀ͕ ൃݟ
 http://iphone-mania.jp/news-171425/ • Introducing Drag and Drop

    - WWDC 2017
 https://developer.apple.com/videos/play/wwdc2017/203/ • Data Delivery with Drag and Drop - WWDC 2017
 https://developer.apple.com/videos/play/wwdc2017/227/