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

Keisuke Tatsumi

June 19, 2017
Tweet

More Decks by Keisuke Tatsumi

Other Decks in Business

Transcript

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

    Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi • WWDC 2017 attendee
 ʢMy First Time! ʣ
  2. Agenda • What’s Drag and Drop • How To Use

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

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

    • Draggable Items in the Same Screen • Summary
  5. 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ͱͷ઀ଓ
  6. ϦϑτηΫγϣϯ 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ͷ࣮૷Λߦ͏
  7. υϥοάηΫγϣϯ 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ͷ࣮૷Λߦ͏
  8. υϥοάηΫγϣϯ 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ͷ࣮૷Λߦ͏
  9. υϩοϓηΫγϣϯ 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ͷ࣮૷Λߦ͏
  10. υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ 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ͷ࣮૷Λߦ͏
  11. υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ 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ʁ
  12. υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ 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ͷ࣮૷Λߦ͏
  13. υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ 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ͷ࣮૷Λߦ͏ ͜͜·ͰͰυϥοά&υϩοϓ͸׬੒
  14. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  15. 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
  16. 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
  17. 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
  18. 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
  19. Agenda • What’s Drag and Drop • How To Use

    • Draggable Items in the Same Screen • Summary
  20. ࢀߟϦϯΫ • 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/