favimg
FMChannelEdit
這是一個類似“今日頭條”頻道編輯功能
前言
- 站在巨人的肩膀上編程:這個項目的channel編輯頁面是在兩位前輩代碼的基礎上勺美,進一步的修改绘闷,封裝婴削。
前輩一:codeWorm2015(GitHubID)
源碼地址
前輩二:HelloYeah(GitHubID)
源碼地址
PS:這兩位具體是誰晦炊,我也不認識璧瞬,想和他們具體交流的栈暇,請去GitHub上給他們留言麻裁,我這能幫你們到這了。
進入正題 (以下均為個人見解源祈,理解不對還望見諒)
- 之所以用著兩位前輩的代碼煎源,是因為,雖然實現(xiàn)是同一UI效果香缺,但是思路不同手销,下面一一講解
方式一:(對應前輩一的實現(xiàn)思路)
思路:完全自定義。自定義channelView(項目中名稱:TouchView)繼承于UIView,綁定需要的label图张,imageView锋拖,pan,tap,longPress手勢,在對應的手勢實現(xiàn)中計算出每個channel的index祸轮,然后刷新frame(具體實現(xiàn)請參考代碼)
優(yōu)點:自定義程度高兽埃,自定義功能的添加修改比較方便,尤其動畫比較流暢适袜;
缺點:要同時處理四個數(shù)組的數(shù)據(jù)(兩個數(shù)據(jù)源的柄错,兩個視圖的),frame刷新頻率較高苦酱,且都是自己實現(xiàn)的frame刷新售貌,性能可能不如原生的控件(只是可能)
我的完善:原框架功能已經(jīng)比較完善,只是缺少個下滑移除功能(已添加)
GIF效果圖:
ChannelDemo1.gif
方式二:(對應前輩二的實現(xiàn)思路)
思路:在UICollectionView的基礎上進一步的修改封裝疫萤。(具體實現(xiàn)請參考代碼)
優(yōu)點:只需要處理兩個數(shù)據(jù)源就可以(上部&下部)趁矾,視圖由UICollectionView自己處理,包括動畫效果也是系統(tǒng)自己完成给僵;
缺點:基于UICollectionView,功能的拓展受到一定的限制,動畫不如方式一看這舒服帝际。
我的完善:原框架功能較少(相對于今日頭條的channel編輯效果)蔓同,只有上部分的排序和刪除。(下部及其他功能已添加)
GIF效果圖:
ChannelDemo2.gif
其他功能
- 標題內(nèi)容對應滑動蹲诀,滑動后標題居中
- 標題隨滑動斑粱,字體大小變化
- 子視圖內(nèi),有顏色漸變小Demo
GIF效果圖:
ChannelDemo3.gif
- QQ Popover彈框效果
GIF效果圖:
ChannelDemo4.gif
ChannelDemo5.gif