類似SpringBoard 圖標(biāo)合并刪除排序功能

demo地址https://github.com/al-liu/HCSpringBoard.git

效果圖

說(shuō)明

項(xiàng)目是個(gè)手機(jī)銀行app谈喳,要求做一個(gè)仿照招商手機(jī)銀行的最愛(ài)菜單功能芯急,沒(méi)有找到合適的輪子,就只能自己寫個(gè)了剂邮。功能是在原有項(xiàng)目上做的(原來(lái)只能添加和刪除),后來(lái)抽出來(lái)一個(gè)demo,因?yàn)檫壿嬢^復(fù)雜火脉,也沒(méi)有花太多時(shí)間休整代碼,復(fù)用程度不夠高,但是按照下面我寫的分析流程來(lái)集成該功能并沒(méi)有什么困難倦挂。
希望朋友們幫我指正代碼問(wèn)題和bug畸颅。

準(zhǔn)備工作

組織菜單數(shù)據(jù)結(jié)構(gòu)在 HCAssistant 類中,配置一個(gè)菜單要顯示的圖片方援,菜單名稱重斑,是否默認(rèn)顯示,是否可刪除肯骇,跳轉(zhuǎn)頁(yè)面等窥浪。

顯示菜單

1,獲取存到 NSUserDefaults 中的最愛(ài)菜單數(shù)據(jù)笛丙,如果沒(méi)有漾脂,從配置中的全部菜單中篩選出默認(rèn)要顯示的數(shù)據(jù),并存起來(lái)胚鸯,有了數(shù)據(jù)之后就使用 HCSpringBoardView 類來(lái)生成菜單骨稿。
2,在 HCSpringBoardView 的初始化方法里姜钳,根據(jù)一頁(yè)有幾行幾列坦冠,確定需要的頁(yè)數(shù),和需要的菜單 frame 并創(chuàng)建 UIScrollView 和 UIPageControl哥桥。在根據(jù)傳進(jìn)來(lái)的模型數(shù)組辙浑,判斷是文件夾 HCFavoriteFolderModel 還是圖標(biāo) HCFavoriteIconModel 分別創(chuàng)建對(duì)應(yīng)的視圖,HCFavoriteFolderViewHCFavoriteIconView 并設(shè)置代理拟糕。
這里的適配很簡(jiǎn)陋判呕,不要做參考

模型類 HCFavoriteIconModelHCFavoriteFolderModel

使用 YYModel 做的數(shù)據(jù)模型轉(zhuǎn)換,很好用送滞。

  • HCFavoriteIconModel
    image 侠草,name , targetController等屬性犁嗅。
    需要實(shí)現(xiàn) NSCoding 協(xié)議用于序列化边涕。

  • HCFavoriteFolderModel
    'folderName' 文件夾名稱,'iconModelsFolderArray' 存該文件夾下的菜單模型褂微,'iconViewsFolderArray' 存該文件夾下的菜單視圖功蜓。
    需要實(shí)現(xiàn) NSCoding 協(xié)議用于序列化。

視圖類 HCFavoriteIconViewHCFavoriteFolderView

  • HCFavoriteIconView
    主要的是下面兩個(gè)代理
    favoriteIconDelegate
    favoriteIconLongGestureDelegate
    例如:
@class HCFavoriteIconView;
@protocol HCFavoriteIconDelegate <NSObject>
- (void)deleteIconOfLoveIconView:(HCFavoriteIconView *)iconView;
- (void)pushPageOfLoveIconView:(HCFavoriteIconView *)iconView;
- (void)intoEditingModeOfLoveIconView:(HCFavoriteIconView *)iconView;
@optional
- (void)addIconOfLoveIconView:(HCFavoriteIconView *)iconView;
@end
@protocol HCFavoriteIconLongGestureDelegate <NSObject>
- (void)longGestureStateBegin:(UILongPressGestureRecognizer *)gesture forLoveView:(HCFavoriteIconView *)loveView;
- (void)longGestureStateMove:(UILongPressGestureRecognizer *)gesture forLoveView:(HCFavoriteIconView *)loveView;
- (void)longGestureStateEnd:(UILongPressGestureRecognizer *)gesture forLoveView:(HCFavoriteIconView *)loveView;
- (void)longGestureStateCancel:(UILongPressGestureRecognizer *)gesture forLoveView:(HCFavoriteIconView *)loveView;
@end

定義了刪除蕊梧,進(jìn)入下一頁(yè)霞赫,開(kāi)始編輯,增加和長(zhǎng)按手勢(shì)的協(xié)議肥矢。

  • HCFavoriteFolderView
    同上有兩個(gè)協(xié)議方法都是把事件代理到 'HCSpringBoardView' 中端衰。

刪除菜單

HCSpringBoardView里有兩個(gè)屬性_favoriteModelArray 和 _favoriteViewArray 分別管理最愛(ài)菜單的模型和視圖叠洗,刪除就是刪掉對(duì)應(yīng)的元素,并更新視圖旅东,還要更新全部菜單列表灭抑,以至于在添加的時(shí)候不是打勾的狀態(tài),可以重新加進(jìn)來(lái)抵代。

進(jìn)入編輯模式

長(zhǎng)按菜單會(huì)進(jìn)入編輯模式腾节,此時(shí)用該菜單的模型創(chuàng)建一個(gè)拖動(dòng)的視圖,在window上荤牍。

仔細(xì)觀察了招商手機(jī)銀行的最愛(ài)菜單實(shí)現(xiàn)案腺,發(fā)現(xiàn)拖動(dòng)圖標(biāo)速度較快的時(shí)候并不會(huì)做任何處理,所以它是在一定滑動(dòng)速度之下康吵,開(kāi)始檢測(cè)的當(dāng)前拖動(dòng)圖標(biāo)的移動(dòng)點(diǎn)是在其它圖標(biāo)的中間區(qū)域還是四周區(qū)域劈榨,這樣就可以判斷出該圖標(biāo)是要換位置還是合并文件夾。

換位置操作在 longGestureStateMove 方法里晦嵌。
判斷是兩圖標(biāo)合并還是合并到已有文件夾邏輯在 longGestureStateEnd 里同辣。
至于拖動(dòng)文件夾就只有換位置的邏輯,相對(duì)簡(jiǎn)單多了惭载。

現(xiàn)在能合并旱函,看看怎么從文件夾里拖出去?

拖出文件夾

HCFavoriteFolderFloatViewHCFavoriteFolderMenuView用于展示文件夾的圖標(biāo)描滔,在文件夾里的排序和刪除邏輯也是和外面的一樣且不能再合并簡(jiǎn)單了很多棒妨。
至于拖出去的邏輯是這樣的,首先在文件夾的編輯模式下伴挚,拖動(dòng)時(shí)也會(huì)在一定速度下檢測(cè)點(diǎn)的位置靶衍,判斷是不是要換位置灾炭,如果拖出了菜單面板茎芋,隱藏當(dāng)前HCFavoriteFolderFloatView但是并不刪除它(如果刪掉,拖出去的view會(huì)卡在那里蜈出,招商就有個(gè)拖出去卡在左邊的問(wèn)題田弥,很可能和這個(gè)有關(guān)系),此時(shí)長(zhǎng)按手勢(shì)的回調(diào)方法在HCFavoriteFolderMenuView里铡原,將移動(dòng)事件longGestureStateMove代理給HCSpringBoardViewHCFavoriteFolderMenuView有個(gè)代理要設(shè)置給HCSpringBoardView)偷厦。在HCSpringBoardView里重新獲取該點(diǎn),排序合并的邏輯和在外面是一樣的燕刻。
待用戶松開(kāi)手指只泼,調(diào)用longGestureStateEnd時(shí),一樣處理合并邏輯卵洗,并將重新拖出的菜單設(shè)置代理到HCSpringBoardView请唱,不要忘了從父視圖刪除掉HCFavoriteFolderFloatView弥咪,就此操作完成。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末十绑,一起剝皮案震驚了整個(gè)濱河市聚至,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌本橙,老刑警劉巖扳躬,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異甚亭,居然都是意外死亡贷币,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門亏狰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)片择,“玉大人,你說(shuō)我怎么就攤上這事骚揍∽止埽” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵信不,是天一觀的道長(zhǎng)嘲叔。 經(jīng)常有香客問(wèn)我,道長(zhǎng)抽活,這世上最難降的妖魔是什么硫戈? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮下硕,結(jié)果婚禮上丁逝,老公的妹妹穿的比我還像新娘。我一直安慰自己梭姓,他們只是感情好霜幼,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著誉尖,像睡著了一般罪既。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上铡恕,一...
    開(kāi)封第一講書(shū)人閱讀 49,816評(píng)論 1 290
  • 那天琢感,我揣著相機(jī)與錄音,去河邊找鬼探熔。 笑死驹针,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的诀艰。 我是一名探鬼主播柬甥,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼墙牌,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了暗甥?” 一聲冷哼從身側(cè)響起喜滨,我...
    開(kāi)封第一講書(shū)人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎撤防,沒(méi)想到半個(gè)月后虽风,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡寄月,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年辜膝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漾肮。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡厂抖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出克懊,到底是詐尸還是另有隱情忱辅,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布谭溉,位于F島的核電站墙懂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏扮念。R本人自食惡果不足惜损搬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望柜与。 院中可真熱鬧巧勤,春花似錦、人聲如沸弄匕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)粘茄。三九已至签舞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間柒瓣,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工吠架, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芙贫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓傍药,卻偏偏與公主長(zhǎng)得像磺平,于是被迫代替她去往敵國(guó)和親魂仍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)拣挪、插件擦酌、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,065評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,773評(píng)論 25 707
  • 很早很早就想寫這么一篇文章來(lái)說(shuō)說(shuō)我的夢(mèng)想,媽媽告訴我:有志之人立長(zhǎng)志菠劝,無(wú)志之人長(zhǎng)立志赊舶,但是我確實(shí)不光有一個(gè)夢(mèng)想。 ...
    十七塊錢閱讀 327評(píng)論 0 0
  • 高中時(shí)赶诊,晚自習(xí)笼平,我座位在門邊(便于老師修理,噢不舔痪,是管理) 門被風(fēng)吹開(kāi)寓调,開(kāi)的很慢,吱~吱~吱~(陰森森) 突然腦抽...
    不思量_閱讀 241評(píng)論 0 0
  • 午間倦欲眠锄码,美人約賞畫夺英。 思見(jiàn)急步行,懷春怠意無(wú)滋捶。 途中丹唇動(dòng)秋麸,畫前莞爾笑。 佳人似無(wú)緣炬太,今日已知足灸蟆。
    冷石向秀閱讀 247評(píng)論 0 3