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

Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github, Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi • WWDC 2017 attendee
 ʢMy First Time! ʣ

ຊ೔ͷςʔϚ͸…

Drag and Drop

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

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

What’s Drag and Drop • iOS11ͷ৽ػೳ

No content

iPhone5 iPhone5c

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

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

No content

ͱ͜Ζ͕…

iPhoneͰ΋࢖͑ΔͬΆ͍ʁ

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

What’s Drag and Drop • iOS11ͷ৽ػೳ • ύιίϯͰͷυϥοά&υϩοϓͱಉ͡Πϯλ ϥΫγϣϯͰΞϓϦؒͰσʔλΛड͚౉͠Ͱ ͖Δ • iPadͰͷΈ࢖͑ΔʢiPhoneͰ΋Մʁʣ

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

How To Use • APIͷྲྀΕ͸େ͖̏ͭ͘ͷηΫγϣϯʹ෼͔ΕΔ ‣ ϦϑτηΫγϣϯʢ্࣋ͪ͛Δʣ ‣ υϥοάηΫγϣϯʢಈ͔͢ʣ ‣ υϩοϓηΫγϣϯʢམͱ͢ʣ API Roadmap

How To Use • ·ͣ͸લஈ֊Ͱ͋ΔViewͱͷ઀ଓΛߦ͏ API Roadmap

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ͱͷ઀ଓ

ϦϑτηΫγϣϯ ্࣋ͪ͛Δ

ϦϑτηΫγϣϯ 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ͷ࣮૷Λߦ͏

υϥοάηΫγϣϯ ಈ͔͢

υϥοάηΫγϣϯ 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ͷ࣮૷Λߦ͏

υϥοάηΫγϣϯ 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ͷ࣮૷Λߦ͏

NSItemProviderWriting • υϥοά&υϩοϓػೳͷυϥοάͷࡍʹ౉͢ΦϒδΣΫτ ͷॻ͖ࠐΈ༻Ϋϥε • ॻ͖ࠐΉ͜ͱ͕Ͱ͖ΔΫϥε͸جຊతʹ͸Լهͷ̑ͭ ‣ NSString ‣ NSAttributedString ‣ NSURL ‣ UIColor ‣ UIImage

υϩοϓηΫγϣϯ མͱ͢

υϩοϓηΫγϣϯ 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ͷ࣮૷Λߦ͏

υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ 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ͷ࣮૷Λߦ͏

υϩοϓηΫγϣϯ // υϥοάதʹҐஔ͕มΘΔͨͼʹݺ͹ΕΔ 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ʁ

UIDropOperation • ΞΠςϜΛͦͷҐஔͰυϩοϓͨ͠ࡍͷڍಈ ͕Ͳ͏ͳΔ͔ΛϢʔβʔʹࣔ͢͜ͱ͕Ͱ͖Δ

υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ 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ͷ࣮૷Λߦ͏

υϩοϓηΫγϣϯ // υϩοϓ͕֬ఆͨ͋͠ͱɺड͚औͬͨσʔλͷϩʔυ։࢝࣌ʹݺ͹ΕΔ 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ͷ࣮૷Λߦ͏ ͜͜·ͰͰυϥοά&υϩοϓ͸׬੒

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

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

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

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

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

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

Demo

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

Summary • υϥοάˍυϩοϓ͸iOS11͔Βͷ৽ػೳͰ iPad ΋͘͠͸ iPhone Ͱ࢖༻Ͱ͖Δ • υϥοάˍυϩοϓʹ͸Ϧϑτɺυϥοάɺ υϩοϓͷ̏ͭͷηΫγϣϯ͕͋Δ • υϥοάˍυϩοϓ͸ಉҰը໘಺ʹෳ਺ͷυ ϥοάՄೳͳΞΠςϜ͕͋ͬͯ΋൑ఆͰ͖Δ

Demo Source https://github.com/cokaholic/DragAndDropDemo

Thank youʂ

ࢀߟϦϯΫ • 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/