有鑒於難易度似乎落差過大... 決定再加入一個中等程度地介紹!!
這次介紹的是基於UICollectionView所出現的Open Source, 可以讓你自由拖曳在畫面中的方格,
以及陣列內的順序!
網址如下: https://github.com/lukescott/DraggableCollectionView
git 來源: https://github.com/lukescott/DraggableCollectionView.git
注意這份Opensource是指支援 ARC的噢! 要在MRC的專案內要調整設定
Bear這邊建立一個新的空白專案: TestDragCollectionView
為方便解釋我們直接使用ARC來介紹囉
這個Open Source 相當厲害, Bear在這裡先介紹第一種簡單用法!
(會先假設大家對於UICollectionView熟悉, 如果不了解的可以先等Bear在入門系列的介紹...)
目標是要做出跟本篇開頭類似的配置, 然後長按方格後可以拖曳他的位置
(如同上面的Gif檔案效果)
程式完成架構大致如下
Import 以下兩個framework: DraggableCollectionViewFlowLayout.h
UICollectionView+Draggable.h
讓你的物件遵循這兩個protocol協定: UICollectionViewDataSource_Draggable
UICollectionViewDelegate
(不清楚Protocol意義的, 可以先在Google搜尋資料或是等Bear之後補完在入門篇 )
接下來是重點2: 如何配置View在畫面上
UICollectionView的配置步驟與一般的畫View有點不同, 有興趣的之後Bear也會詳細介紹
只需要兩步配置即可
A. 先初始化你的Layout配置, 這邊要先宣告一個物件叫做DraggableCollectionViewFlowLayout
告訴他的滑動方向是垂直方向(UICollectionViewScrollDirectionVertical)
告訴他每一個方格的大小是100 * 100
B. 真正去初始化你的UICollectionView, 初始化時把剛剛宣告的layout配置帶入
把dataSource跟delegate都指派為自己
最重要的是要把draggable這個property設定為yes, 不然拖曳是無法進行的
把collectionview的背景設定為黑色
最後就是collectionview跟tableview不同的地方, 必須先註冊你用的cell的class名稱
registerClass: forCellWithReussIdentifer: 這個方法如果沒註冊程式是不能執行會crash的!!!!!!
最後就只要把它加到畫面上就好
接下來就只需要去撰寫有關的委派方法(delegate method)就行了!
大家先看一下程式碼結構
(1) - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
跟UITableView一樣, 要宣告你總共有幾個item在這個section, section的method也類似, 不指定section個數時預設只有1個
這邊我們用data的元素量來指定有多少item, 也就是20
(2) - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
這邊也與UITableView類似, 是做初始化每一個Cell的內容
值得注意的是因為他跟UITableView類似, 會有reuse的問題
也就是說經過滑動後畫面的物件可能會重疊
所以我們必須要先在初始化前都先把畫面上既有的元件先進行移除後再重新加到畫面上
才不會發生重疊(overlap)的問題
(3) - (BOOL)collectionView:(LSCollectionViewHelper *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath
這邊return YES 代表你的手勢操作會啟用, 注意他跟原本的委派方法有點不同, collectionView的類別不是UICollectionView而是LSCollectionViewHelper
(4) - (void)collectionView:(LSCollectionViewHelper *)collectionView moveItemAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath
這隻告訴你移動完成後進行的動作, 我們的做法就是先移除原本陣列中的物件
之後再重新加回去他到指定的新位置
fromIndexPath是原本的位置
toIndexPath是移動後的位置
這樣就能簡單地做出一樣的效果囉!!!
根據官方原本的程式碼, 只要修改DraggableViewLayout就能更改配置囉
作出以下的配置也是相當簡單的
對於今天的Code教學有疑問的, 可以到以下連結下載回來
https://github.com/shouian/Simple-Draggable-UICollectionView
或是歡迎來信到我們的信箱: [email protected]喔!
Bear實驗室iOS開發教學文:
[入門系列]
1. Xcode 5 - 你的第一支Hello World iOS程式
2. Xcode 5 - UIView 與 UILabel
3. Xcode 5 - 第一顆互動按鈕 UIButton
[進階系列]
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
4. iOS 製作長曝光相機
5. iOS CoreblueTooth FrameWork
喜歡這篇文章嗎? 歡迎加入Takobear粉絲團!