Drag and Drop for iOS11

以下內(nèi)容都是自己閱讀實踐所得鄙皇,如有誤請多指教,謝謝。
(示例代碼為Swift杆故,剛學(xué),請多指教)

Drag and Drop 簡單介紹

Drag and Drop是iOS11的一套基于UIKit的新API溉愁。它可以讓你拖動屏幕上的視圖進行一些操作处铛,包括但不限于移動,復(fù)制內(nèi)容拐揭。甚至可以在不同App之間進行Drag and drop撤蟆,就像WWDC上面演示的一樣: Introducing Drag and Drop,但是在iPhone上堂污,Drag and Drop僅支持單App枫疆。

Drag and Drop 官方文檔

Drag and Drop

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

Drag and Drop

Step1 給View添加Drag

UIDragInteraction & UIDropInteraction
這兩個可以說是Drag'n Drop 開發(fā)中最基本的類息楔,都繼承自UIInteraction,屬性上也基本相同扒披。
你可以把他們當(dāng)成UIGestureRecognizer值依,使用的時候只需要初始化一個UIDragInteraction/UIDropInteraction,設(shè)定好delegate碟案,再添加到相應(yīng)的view即可:

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

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

注意使用的時候需要將view的isUserInteractionEnabled設(shè)為true

Step2 給目的地上的View添加pasteConfiguration

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

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

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

Step3 實現(xiàn)UIDragInteraction

這時運行demo會發(fā)現(xiàn)即時我們在圖片上按再長的時間,也沒有任何變化磁浇,也不能拖動斋陪。

因為我們必須提供一個被拖動的對象,當(dāng)然是數(shù)據(jù)層面上的置吓,用來告訴系統(tǒng)我們正在拖text呢 還是image呢鳍贾,以便其他支持Drop的view可以根據(jù)數(shù)據(jù)類型來決定是否能夠接收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之間傳輸數(shù)據(jù)的類。
UIDragItem則是像對NSItemProvider的進一步封裝构拳,除了包含傳輸數(shù)據(jù)外咆爽,還可以自定義一些數(shù)據(jù)。
具體用法就是如上:

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

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

這時再運行demo就發(fā)現(xiàn)可以拖動了斗埂,而且當(dāng)圖片懸浮在pasteImageView上時可以看到右上角有加號,說明此處支持粘貼的操作凫海,但是鼠標(biāo)一松開就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這一類的數(shù)據(jù),如果可以我們就load出來進行界面更新等操作建瘫。
這時再運行一遍應(yīng)該就可以復(fù)制了崭捍。

-----

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市橄浓,隨后出現(xiàn)的幾起案子粒梦,更是在濱河造成了極大的恐慌,老刑警劉巖荸实,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匀们,死亡現(xiàn)場離奇詭異,居然都是意外死亡泪勒,警方通過查閱死者的電腦和手機昼蛀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門宴猾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來圆存,“玉大人叼旋,你說我怎么就攤上這事÷僬蓿” “怎么了夫植?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長油讯。 經(jīng)常有香客問我详民,道長,這世上最難降的妖魔是什么陌兑? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任沈跨,我火速辦了婚禮,結(jié)果婚禮上兔综,老公的妹妹穿的比我還像新娘饿凛。我一直安慰自己,他們只是感情好软驰,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布涧窒。 她就那樣靜靜地躺著,像睡著了一般锭亏。 火紅的嫁衣襯著肌膚如雪纠吴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天慧瘤,我揣著相機與錄音戴已,去河邊找鬼。 笑死锅减,一個胖子當(dāng)著我的面吹牛恭陡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播上煤,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼休玩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了劫狠?” 一聲冷哼從身側(cè)響起拴疤,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎独泞,沒想到半個月后呐矾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡懦砂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年蜒犯,在試婚紗的時候發(fā)現(xiàn)自己被綠了组橄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡罚随,死狀恐怖玉工,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情淘菩,我是刑警寧澤遵班,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站潮改,受9級特大地震影響狭郑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜汇在,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一翰萨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧糕殉,春花似錦亩鬼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赡磅,卻和暖如春魄缚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背焚廊。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工冶匹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人咆瘟。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓嚼隘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親袒餐。 傳聞我的和親對象是個殘疾皇子飞蛹,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容