SwipeTableView —— 一款好用的帘撰,既能上下滾動又能左右滑動的控件

這是一個類似半糖首頁、QQ音樂列表万皿、美麗說首頁摧找、格瓦斯電影詳情頁,既能上下滑動牢硅,同時用能左右滑動的控件慰于。項目地址GitHub

說起這個項目,還是得談一下一開始寫這個項目的緣由唤衫。前一陣子婆赠,公司項目首頁改版,要求作出半糖首頁的效果⌒堇铮看了一眼半糖之后蛆挫,心中一萬只草泥馬奔過,怎么會做這種設(shè)計妙黍?后來悴侵,想了一天的時間,終于把大概的實現(xiàn)原理捋順出來拭嫁,又花了幾天的時間來一步步的實現(xiàn)可免,解決bug。最后終于可以實現(xiàn)上下與左后滑動同時兼容的效果了做粤。由于只是首頁改版浇借,所以只是首頁實現(xiàn)了效果,也并沒有單獨寫一個控件怕品,可是妇垢,一周之后,悲劇的事發(fā)生了:新的產(chǎn)品設(shè)計中有幾個頁面都是這樣的設(shè)計肉康。好吧闯估,還是乖乖的寫個控件吧。于是吼和,就有了SwipeTableView涨薪。

先來幾張預覽吧:



再來說一下實現(xiàn)原理:

最初的設(shè)計并沒有考慮兼容第三方下拉刷新的問題,所以最初的設(shè)計更簡潔炫乓,擴展性也更好刚夺。下面是原理的結(jié)構(gòu)圖——?


1. 首先,為了實現(xiàn)左右滑動的功能厢岂,需要一個view來作為所有單一item的父視圖載體光督,并提供左右滑動的功能,這里沒有比`UICollectionView`再合適的了塔粒。所有结借,我用一個CollectionView作為contentView。

2. 有了CollectionView作為載體之后卒茬,就可以把每一個ScrollView作為CollectionView的item平鋪了船老。之后,最關(guān)鍵的問題圃酵,也是最難處理的問題柳畔,就是在滑動CollectionView的時候,怎樣保證前后item能夠?qū)R呢(因為懸停郭赐,只有對齊才行)薪韩?最后想到的解決辦法,就是在cellForItem的方法中,對前后兩個item的contentOffset進行adjust一致性調(diào)整俘陷。這樣能實現(xiàn)前后兩個item的位置是合理的罗捎。

3. 最后一個主要的問題就是,多個item共用一個header與bar的問題拉盾。既然共用桨菜,最后想到,那就讓header與bar與CollectionView一樣作為SwipeTableView的子視圖捉偏,并別在圖層最上面倒得。由于是獨立的view,之后就要解決當前item滑動同時滾動對header與bar做跟隨處理的問題了夭禽。在這里霞掺,對當前的item進行KVO,在item的contentOffset發(fā)生變化的時候驻粟,同樣改變header與bar的位置根悼,使之總是跟隨scrollview的滾動凶异,并在懸停的位置做判斷蜀撑,固定bar的frame的y值。

4. 這樣剩彬,基本的實現(xiàn)就完成了酷麦。同時,`SwipeTableView`允許自適應contentSize喉恋,就是在item的內(nèi)容很少的時候沃饶,也能自適應的調(diào)整contentSize,保整至少能夠滾動到頂端轻黑。5. 后期糊肤,用戶的反饋header不能滑動,最后通過`UIKitDynamic`物理引擎的方式解決了這個問題氓鄙。參考文章? 英文博客?

開源這個項目并沒有想會很多人使用馆揉,而后期,實際用到人越來越多抖拦,大家也都反映項目不能支持下拉刷新的問題升酣,所以,便有了第二種設(shè)計方式——?


在這個版本中态罪,跟上面的結(jié)構(gòu)原理是差不多的噩茄。由于header與bar是獨立的,那么每個item就要為header與bar的空間留出空白复颈。而在第一個設(shè)計中绩聘,是通過修改增加每個item contentInset的top值來留出頂部的留白。而幾乎所有的下拉刷新空間都是不考慮inset,直接設(shè)置在content的頂部的凿菩,而contentInset是不算內(nèi)容中的(一般下拉刷新控件rame的y值都是自身高度的負值)驯遇。所以,在添加了下拉刷新之后蓄髓,下拉刷新組件其實是藏在header與bar的下面的叉庐,底部也正好跟bar對齊(這里可以通過調(diào)整下拉刷新組件的frame,減小y值会喝,來顯露下拉組件即可)陡叠。為了方便使用,并且兼容第三方下拉刷新肢执,最后采用枉阵,每個item頂部的留白由tableHeaderVeiw代替(CollectionView方面要繼承`STCollectionView`設(shè)置collectionHeaderView)。不過這樣预茄,item的tableHeaderView就是占用的了兴溜,由于考慮項目的簡潔性,并沒有自定義`UIScrollView`支持scrollview設(shè)置headerview耻陕。這樣用戶完全可以只是通過設(shè)置一個宏就可以支持下拉刷新拙徽,更加方便

#define ST_PULLTOREFRESH_HEADER_HEIGHT xx

其中`xx`是指下拉刷新組件RefreshHeader的高度,也就是完全顯露RefreshHeader開始刷新的高度(如:`MJRefresh` 為 `MJRefreshHeaderHeight`诗宣,`SVPullToRefresh` 為 `SVPullToRefreshViewHeight`)膘怕。

最后在混合模式的時候出現(xiàn)了問題,最終發(fā)現(xiàn)召庞,原來`UICollectionView`不支持通過contentSize屬性來改變contentSize岛心。最后只好自定義`STCollectionView`,同時支持設(shè)置collectionHeaderView篮灼,也可以實現(xiàn)自適應contentSize忘古。關(guān)于`STCollectionView`的使用可以詳細看github示例。

而SwipeTableView的使用方式這里不做介紹了诅诱,有興趣的可以看看github的介紹髓堪。

總結(jié)

這是我的第一個比較完善的開源項目,在這個項目中逢艘,非常感謝使用者的認同與支持旦袋。通過這個項目,自己確實學到了很多東西它改,其實開這個博客也是源于這個項目的疤孕。個人覺得,對于開發(fā)者而言央拖,能夠參與一個項目祭阀,并去不斷的完善解決問題鹉戚,從中得到的受益將是非常大的。

最后专控,如果您也喜歡這個項目的話抹凳,非常歡迎您到GitHub?star或者fork,您的支持是對我的最大鼓勵??

2018.03.08 更新

由于 SwipeTableView 在對 IGListKit 支持上有些問題伦腐,同時對于 Item 都是 UICollectionView 的情況也不是友好赢底。所以,現(xiàn)在已經(jīng)開源了一個基于 UICollectionView 的新項目?HBHybridCollectionView柏蘑,實現(xiàn)效果類似好好住APP首頁幸冻。


我的Hexo博客地址,如有轉(zhuǎn)載請注明出處咳焚。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末洽损,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子革半,更是在濱河造成了極大的恐慌碑定,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件又官,死亡現(xiàn)場離奇詭異延刘,居然都是意外死亡,警方通過查閱死者的電腦和手機赏胚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門访娶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來商虐,“玉大人觉阅,你說我怎么就攤上這事∶爻担” “怎么了典勇?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長叮趴。 經(jīng)常有香客問我割笙,道長,這世上最難降的妖魔是什么眯亦? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任伤溉,我火速辦了婚禮,結(jié)果婚禮上妻率,老公的妹妹穿的比我還像新娘乱顾。我一直安慰自己,他們只是感情好宫静,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布走净。 她就那樣靜靜地躺著券时,像睡著了一般。 火紅的嫁衣襯著肌膚如雪伏伯。 梳的紋絲不亂的頭發(fā)上橘洞,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天聘鳞,我揣著相機與錄音囤热,去河邊找鬼。 笑死民镜,一個胖子當著我的面吹牛弄唧,可吹牛的內(nèi)容都是我干的抛虏。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼套才,長吁一口氣:“原來是場噩夢啊……” “哼迂猴!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起背伴,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤沸毁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后傻寂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體息尺,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年疾掰,在試婚紗的時候發(fā)現(xiàn)自己被綠了搂誉。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡静檬,死狀恐怖炭懊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拂檩,我是刑警寧澤侮腹,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站稻励,受9級特大地震影響父阻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜望抽,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一加矛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧煤篙,春花似錦斟览、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狸棍。三九已至,卻和暖如春味悄,著一層夾襖步出監(jiān)牢的瞬間草戈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工侍瑟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留唐片,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓涨颜,卻偏偏與公主長得像费韭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子庭瑰,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫星持、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,125評論 4 61
  • 每一次的到來都是這樣 慈悲的修行 一朵花開結(jié)一段紅塵 里深深的夙緣
    淡淡青蓮閱讀 350評論 4 7
  • 本是天庭粉紅仙 傾心一戀動塵寰 傲骨中通嘆風雨 豈肯昏睡在人間 睡里心思浮水面 風生碧綠任纏綿 清霄帶露凝成夢...
    海蒂李閱讀 2,042評論 13 29
  • 《在殘聯(lián)——小改》 前年冬天最冷的時候弹灭,一個朋友打來電話督暂,說她在報紙上看到一則消息:市殘聯(lián)在舉辦某項手工培訓...
    不在遠方而在日常閱讀 235評論 0 0