iOS開發之資訊類App常用分類控制項的封裝與實現(CollectionView+Swift3.0+),swiftcollectionview

來源:互聯網
上載者:User

iOS開發之資訊類App常用分類控制項的封裝與實現(CollectionView+Swift3.0+),swiftcollectionview

今天部落格中,我們就來實現一下一些常用資訊類App中常用的分類選擇的控制項的封裝。本篇部落格中沒有使用到什麼新的技術點,如果非得說用到了什麼新的技術點的話,那麼勉強的說,用到了一些iOS9以後UICollectionView添加的一些新的特性。本篇部落格所涉及的技術點主要有UICollectionView的Cell移動,手勢識別,控制項封裝,閉包回調,面向介面編程,Swift中的泛型等等。這些技術點在之前的部落格中也多次使用到,只不過本篇部落格使用這些技術點來完成我們的具體需求。

 

一、執行個體運行效果

先入為主,下方這個效果,就是本篇部落格所涉及Demo的運行效果。當然下方的效果是一些資訊類App中選擇分類時,常用的部分。主要還是對UICollectionView的使用。當然,下方效果的實現,網上也不乏相應的執行個體。雖然本篇部落格的效果與其他類似的效果類似,但是代碼設計以及結構實現時還是有所區別的。下方效果的實現使用了iOS9以後的UICollectionView才支援的更新Cell的方法,稍後會詳細介紹到。當然,本篇部落格我們依然使用Swift3.0來實現的。

在之前的部落格中,我們系列的介紹了UICollectionView的各種回調,以及如何自訂CollectionView的布局,並給出了如何使用CollectionView自訂瀑布流。關於之前的部落格請移步於《UICollectionView詳解系列》。

  

 

我們可以使用Reveal來查看上述效果的層級關係。下方就是我們使用Reveal來查看的效果。從下方的效果中我們不難看出,該頁面的實現並不複雜。主要還是對UICollectionView的使用。

  

 

 

上面這個效果就是我們今天部落格中所實現的效果,而下方這兩個效果是我們之前在聊UICollectionView以及自訂布局時所給出的相應的Demo, 下方的Demo所對應的源碼也在Gitbub上進行了分享。還是那句話,今天部落格的內容依然是對UICollectionView的應用。

UICollectionView這個控制項是非常強大的,之所以強大,源於其可定製性比較高,靈活多變。

      

 

 

 

二、控制項的調用

我們將上述分類選擇的控制項進行了封裝,接下來,我們將會給出其初始化和調用的方式。下方就是我們所封裝控制項的調用方式,下方的二維數組dataSource就是我們所封裝控制項中的CollectionView中的資料來源,該資料來源中的資料項目要遵循我們指定的CEThemeDataSourceProtocal協議。稍後我們會給出該協議中所以對應的內容。

DataSourceTools類中的createDataSource()類方法就負責建立我們需要的測試資料。資料來源建立好後,在執行個體化CESelectThemeController對象時,將相應的資料來源傳給我們的控制項即可。然後給控制項的對象設定更新資料來源的閉包回調,也就是說,當我們使用該封裝的控制項對DataSource操作完畢後,會執行下方的閉包回調,將更新後的資料來源傳給調用者。如下所示:

  

 

CEThemeDataSourceProtocal協議就規範了資料來源中的資料項目必須要實現的方法,下方就是CEThemeDataSourceProtocal協議的實現代碼。當然該協議的代碼實現比較簡單,就一個menuItemName()方法,該方法的傳回值是一個字串。該字串就是我們要在Cell上顯示的Menu的名字。

  

 

下方就是建立我們的資料項目的測試資料相關代碼。下方的MeteData類就是我們要在上述控制項測Cell中顯示的資料。該類實現了CEThemeDataSourceProtocal協議,並給出了menuItemName()的方法實現。

在DataSourceTools中的createDataSource()方法中負責建立我們的測試資料,通過迴圈執行個體化MeteData並存入二維數組中,並將該二維資料群組進行返回。該方法返回的二維數組就是我們需要的資料來源。

  

 

 

 

三、控制項核心代碼介紹

上面我們簡單介紹了該控制項的調用方式,接下來我們來看一下該控制項的核心代碼的實現。說吧了,就是長按手勢識別以及CollectionView的Cell的移動。下方我們將詳細的介紹一下該控制項的核心代碼的實現。

 

1. UICollectionViewDataSource

下方就是該控制項中使用UICollectionView的DataSource的代理方法。前面幾個我們之前介紹過的代理方法就不做過多贅述了,下方兩個畫框的就是本篇部落格的主角,一個是開啟Cell移動的代理方法,另一個是移動後更新資料來源的方法,具體如下所示。

  

 

2、為CollectionView添加長按手勢

接下來要做的就是給CollectionView添加LongPressGestureRecognize。addGestureRecognizer()方法負責為我們的CollectionView添加長按手勢,longPress()方法就是該長按手勢所觸發的方法。手勢開始時,我們調用longPressBegin()方法。手勢改變時,我們調用longPressChange()方法。手勢結束時,我們調用longPressEnd()。這三個方法是本篇部落格的關鍵,下方會具體給出其實現方式。

  

 

3、longPressBegin()方法的實現

下方是長按手勢開始時所觸發的方法,首先根據觸摸的點來擷取該點所在cell的IndexPath。如果該Cell不是第一個Section中的Cell, 那麼就不觸發手勢開始的事件,因為我們規定只有第一個Section中的Cell才有長按拖動手勢。

如果Cell符合我們的要求,我們就調用UICollectionView的beginInteractiveMovementForItem()方法來啟動移動Item功能。當然,該方法是iOS9以後才添加的。啟動後我們將當前的Cell隱藏,然後將當前的Cell產生快照,讓後讓該快照跟著我們的手指移動即可。具體代碼如下所示:

  

 

4、longPressChange()方法的實現

下方方法就是手指移動時所觸發的方法,該方法的代碼比較簡單,主要是改變我們快照的座標,讓Cell的快照隨著手指的移動而移動。然後再調用updateInteractiveMovementTargetPosition()。調用該方法時,會執行DataSource代理中更新資料來源的代理方法,也就是上面DataSource代理方法中最後一個更新資料來源的方法。

  

 

5、longPressEnd()方法實現

該方法的主要功能是在手勢結束後做一些善後工作,如結束移動,然後移除掉Cell的快照並顯示隱藏掉的cell。具體如下所示:

  

 

今天的部落格就先介紹到這兒吧,上面只是本篇部落格所涉及Demo的一小部分代碼,完整的代碼請移步於下方的github分享連結。

github代碼分享連結:https://github.com/lizelu/CESelectThemes

  

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.