Drag and Drop for iOS11

以下內容都是自己閱讀實踐所得,如有誤請多指教,謝謝。
(示例代碼為Swift,剛學,請多指教)

Drag and Drop 簡單介紹

Drag and Drop是iOS11的一套基于UIKit的新API。它可以讓你拖動屏幕上的視圖進行一些操作,包括但不限于移動,復制內容。甚至可以在不同App之間進行Drag and drop,就像WWDC上面演示的一樣: Introducing Drag and Drop,但是在iPhone上,Drag and Drop僅支持單App。

Drag and Drop 官方文檔

Drag and Drop

接下來我將通過幾個Demo來講解如何去簡單開發Drag and Drop的應用。
今天這篇文章將講解如何使用UIView的新屬性pasteConfiguration去最簡單的實現一個拖動進行粘貼的操作,如圖:

Drag and Drop

Step1 給View添加Drag

UIDragInteraction & UIDropInteraction
這兩個可以說是Drag'n Drop 開發中最基本的類,都繼承自UIInteraction,屬性上也基本相同。
你可以把他們當成UIGestureRecognizer,使用的時候只需要初始化一個UIDragInteraction/UIDropInteraction,設定好delegate,再添加到相應的view即可:

        //Add an UIDragInteraction to support drag
        dragImageView.addInteraction(UIDragInteraction.init(delegate: self))

此時你的view就可以支持長按進行拖動了(但是在iPhone上同樣的代碼卻不起作用,不知道為什么,明白的小伙伴歡迎解答)

注意使用的時候需要將view的isUserInteractionEnabled設為true

Step2 給目的地上的View添加pasteConfiguration

在本例中我們創建兩個UIImageView,一個用來展示原始圖片并提供拖動(dragImageView),拖到另一個上(pasteImageView)后,進行粘貼的操作。
這里只需要在dragImageView上添加UIDragInteraction即可,要讓pasteImageView支持Drop的話,上文已經說到,最簡單的方法就是配置pasteConfiguration屬性:

pasteImageView.pasteConfiguration = UIPasteConfiguration(forAccepting: UIImage.self)

以上代碼就是聲明pasteImageView支持drop功能,并且你可以把包含UIImage數據的對象拖到這個pasteImageView上來進行粘貼。當然通過配置UIPasteConfiguration,可以支持很多不同的數據類型。
同時必須重寫改view的paste方法,下文詳說

Step3 實現UIDragInteraction

這時運行demo會發現即時我們在圖片上按再長的時間,也沒有任何變化,也不能拖動。

因為我們必須提供一個被拖動的對象,當然是數據層面上的,用來告訴系統我們正在拖text呢 還是image呢,以便其他支持Drop的view可以根據數據類型來決定是否能夠接收drop。

    func dragInteraction(_ interaction: UIDragInteraction, itemsForBeginning session: UIDragSession) -> [UIDragItem] {
        if interaction.view == dragImageView {
            let dragImage = dragImageView.image
            let itemProvider = NSItemProvider.init(object: dragImage!)
            let dragItem = UIDragItem.init(itemProvider: itemProvider)
            return [dragItem]
        }
        else if interaction.view == dragTextLabel {
            let dragText = "Try drag me~"
            let itemProvider = NSItemProvider.init(object: dragText as NSString)
            let dragItem = UIDragItem.init(itemProvider: itemProvider)
            return [dragItem]
        }
        else {
           return []
        }
    }

這里涉及到兩個新類,UIDragItem & NSItemProvider
NSItemProvider簡單來說就是用來在Drag and Drop,或者Extension app 和Host app之間傳輸數據的類。
UIDragItem則是像對NSItemProvider的進一步封裝,除了包含傳輸數據外,還可以自定義一些數據。
具體用法就是如上:

            let dragImage = dragImageView.image
            let itemProvider = NSItemProvider.init(object: dragImage!)
            let dragItem = UIDragItem.init(itemProvider: itemProvider)
            return [dragItem]

將我們要拖動的Image對象一層層包起來返回即可。

這時再運行demo就發現可以拖動了,而且當圖片懸浮在pasteImageView上時可以看到右上角有加號,說明此處支持粘貼的操作,但是鼠標一松開就Crash了。

Step4 重寫Paste

上面的Crash信息顯示:

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'pasteItemProviders: must be overridden if pasteConfiguration is not nil.'

上文就說必須重寫pasteItemProviders。
那我們重寫一下pasteImageView的pasteItemProviders方法,讓它支持粘貼。

    override func paste(itemProviders: [NSItemProvider]) {
        for dragItem in itemProviders {
            if dragItem.canLoadObject(ofClass: UIImage.self) {
                dragItem.loadObject(ofClass: UIImage.self, completionHandler: { (image, error) in
                    if image != nil {
                        DispatchQueue.main.async {
                            self.tipLayer.removeFromSuperlayer()
                            self.customBorderLayer.removeFromSuperlayer()
                            self.image = (image as! UIImage)
                        }
                    }
                })
            }
        }
    }

以上操作就是先判斷這個NSItemProvider是否可以load UIImage這一類的數據,如果可以我們就load出來進行界面更新等操作。
這時再運行一遍應該就可以復制了。

-----

以上全部就是比較詳細的介紹了如何使用view的pasteConfiguration來簡單實現Drag to paste,留下一個拖動文字的功能可以自己嘗試實現一下。
小提示:textField不用配置pasteConfiguration,自己對于NSString類型的數據有默認實現。

demo地址:https://github.com/madao1237/DragAndDropResearch

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,488評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,034評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,327評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,554評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,337評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,883評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,975評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,114評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,625評論 1 332
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,555評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,737評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,244評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,973評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,615評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,343評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,699評論 2 370

推薦閱讀更多精彩內容