為什么我不用ViewPager或RecyclerView來做上下滑切換

上下滑切換翻頁大概是這樣的效果:

目前網上有諸多如 “仿抖音上下滑...” “仿花椒映客直播...” 之類的技術分享,都有講述實現上下滑切換頁面的方案,其中以 ViewPagerRecyclerView + SnapHelper 兩種方案為多,但是都有明顯的缺點。以下是一些個人的看法:

為什么ViewPager不合適

ViewPager 自帶的滑動效果完全滿足場景,而且支持 FragmentView 等UI綁定,只要對布局和觸摸事件部分作一些修改,就可以把橫向的 ViewPager 改成豎向。

但是沒有復用是個最致命的問題。在 onLayout 方法中,所有子View會實例化并一字排開在布局上。當Item數量很大時,將會是很大的性能浪費。

其次是可見性判斷的問題。很多人會以為 FragmentonResume 的時候就是可見的,而 ViewPager 中的 Fragment 就是個反例,尤其是多個 ViewPager 嵌套時,會同時有多個父 Fragment 多個子 Fragment 處于 onResume 的狀態,卻只有其中一個是可見的。除非放棄 ViewPager 的預加載機制。在頁面內容曝光等重要的數據上報時,就需要判斷很多條件:onResumedsetUserVisibleHintsetOnPageChangeListener 等。

最后是嵌套滑動的問題。同向嵌套滑動是很常見的場景,Google 新出的滑動布局基本都使用 NestedScrolling 機制來解決嵌套滑動。但是 ViewPager 依然需要開發者自己來處理復雜的滑動沖突。

為什么RecyclerView不合適

RecyclerView + SnapHelper 的方案比 ViewPager 好得多,既有對 View 的復用,滑動事件也已經處理好。

但是依然無法雙向無限滑動。我們可以在 getItemCount 方法中返回 Integer.MAX_VALUE 來假裝無限個滑動元素。但是為了從頭開始就可以下拉滑到上一個,元素列表的索引就不能初始化為0,那初始值為 Integer.MAX_VALUE/2 ? 無論怎么掩飾,理論上還是有滑動到頭的一天。

更優的一種解決方案

使用兩個 View 輪流切換就能完成上下滑的場景。這種方案也有APP在用,但是網上幾乎找不到源碼。因此我把它抽成獨立的庫放在Github倉庫:致力于打造通用、易用和流暢的上下滑動翻頁布局SlidableLayout。

SlidableLayout 本質是一個包含兩個相同大小子 ViewFrameLayout 。兩個子 View 分別作為 TopViewBackView

靜止狀態下,用戶只會看見 TopView ,而 BackView 被移除或隱藏。

手指向上拖動時, TopView 在y軸上向上偏移, BackView 開始出現,而且 BackView 的頂部與 TopView 的底部相接。

手指向上拖動一定距離后放手,TopView 繼續在y軸上做動畫直到完全消失, BackView 向上直到完全出現。然后 TopViewBackView 互換身份,原來的 BackView 成為現在的 TopView ,原來的 TopView 被移除或隱藏,成為下一次滑動的 BackView 。互換后完成一次滑動。

反之,手指向下滑動亦然。

同時要考慮手指放手后,滑動距離不夠或者速度不夠時,TopView 會沿著y軸回彈到原來的位置。 BackView 也跟著原路返回,直到被移除或隱藏。

SlidableLayout 還實現了 NestedScrollingChild 接口,使其能夠與自定義的下拉刷新布局嵌套滑動。

源碼和使用例子參照 github.com/YvesCheung/… 。如有不同意的地方,請在 Github 留下 Issue

轉載于:https://juejin.im/post/5cd185e5e51d456e6479b528

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/536479.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/536479.shtml
英文地址,請注明出處:http://en.pswp.cn/news/536479.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

web項目上之深入理解Java國際化

作者:https://blog.csdn.net/yangbo787827967/article/details/81124439 假設我們正在開發一個支持多國語言的Web應用程序,要求系統能夠根據客戶端的系統的語言類型返回對應的界面:英文的操作系統返回英文界面,而中文的操作系統則…

Chrome運行時性能瓶頸分析

一,初探,根據現象發現問題 chrome的performance知道很久了,但總是沒有特別權威且跟上時代的學習資料,這次痛定思痛,直接看英文文檔,一點點把這塊啃掉,本筆記基于Chrome 59 step 1: 隱身模式打開…

vue-router之路由鉤子(八)

路由鉤子,即導航鉤子,其實就是路由攔截器,vue-router一共有三類:全局鉤子:最常用路由單獨鉤子組件內鉤子1、全局鉤子在src/router/index.js中使用,代碼如下:// 定義路由配置const router new V…

java第一 ++--

大的轉換小的自動轉換 byte -> short -> int -> long -> float -> double l 自動類型轉換 表示范圍小的數據類型轉換成范圍大的數據類型,這種方式稱為自動類型轉換 自動類型轉換格式: 范圍大的數據類型 變量 范圍小的數據類型值&#xf…

在加拿大讀大學被開除了,以后該怎么辦?

在加拿大讀大學被開除了,以后該怎么辦? 一天晚上正準備睡覺的時候,手機振動,打開一看,是一條微消息,“在加拿大讀大學被開除了,以后該怎么辦?”又一個留學生遇到的棘手問題。在國內上…

GO編程程序員修煉秘籍:十本經典書單

隨著BAT、今日頭條、京東、抖音等大型互聯網公司對Go語言的大范圍應用,帶動更多互聯網企業采取技術跟隨戰略,Go語言發展前景一片大好。5月20日工業和信息化部信息中心發布《2018中國區塊鏈產業白皮書》,Go語言與區塊鏈成為“數字中國”建設的…

AngularJs 冷兵器雜談

一、指令 scope.template中的dom屬性值可以直接用{{attr}}表達式取到scope中的屬性attrlink中attr.$observe可以監聽scope屬性attr的動態變化需要改變$scope上的屬性值時:$scope.$apply(function(){$scope.attr newValue }) 復制代碼二、服務 循環依賴(…

02-print的用法

print的常用: print(hello world!)print(hello,world!) # 逗號自動添加默認的分隔符:空格。print(hello world!) # 加號表示字符拼接。print(hello,world,sep***) # 單詞間用***分隔。print(# * 20) # *號表示重復20遍。print(are you sure?, end)…

單田芳白眉大俠全320回下載

1、搜索“十方評書網”。 2、要下載那個評書家的選擇那個評書家。 3、然后選擇自己要下載的下載可以了。 轉載于:https://blog.51cto.com/14204019/2392323

pip模塊 redis、xlrd、xlutils、nnlog、requests

# import模塊的實質:把python文件執行一遍,# 導入模塊的順序,1、從當前模塊找,如果當前模塊沒有,2、就去python環境變量里面找 pip install redispip install xlrd pip install xlutilspip install nnlogpip install requests pip…

react.js基礎

現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS,ReactJs的虛擬DOM(Virtual DOM)和組件化的開發深深的吸引了我,下面來跟我一起領略ReactJs的風采吧~~ 文章有點長,耐心讀完,你會有…

第 11 章 日志管理 - 089 - 初探 ELK

在開源的日志管理方案中,最出名的莫過于 ELK 了。 ELK 是三個軟件的合稱:Elasticsearch、Logstash、Kibana。 Elasticsearch 一個近乎實時查詢的全文搜索引擎。Elasticsearch 的設計目標就是要能夠處理和搜索巨量的日志數據。 Logstash 讀取原始日志&…

【轉】Kotlin 新版來了,支持跨平臺!

作者:Tamic 原文鏈接:juejin.im/post/5cd8f9… 谷歌在今年的 I/O 大會上宣布,Kotlin 編程語言現在是 Android 應用程序開發人員的首選語言(谷歌宣布 Kotlin 成為安卓開發首選)。 還有一個好消息, Kotlin 1.3.30 正式發布,做了對ap…

WebSocket輕松單臺服務器5w并發jmeter實測

測試結論 nginx最多只能維持(65535*后端服務器IP個數)條websocket的長連接,如果后端websocket服務器IP只有一個,那么就只能最多支持65535條連接。瓶頸就產生在了nginx上建議采用LVS的DR模式來做負載均衡,這樣最大長連接數目就只和websocket服…

人工智能的歷史

AI(Artificial Intelligence)即人工智能,最初是在1956 年被提出,人工智能研究如何用計算機去模擬、延伸和擴展人的智能;如何把計算機用得更聰明;如何設計和建造具有高智能水平的計算機應用系統;如何設計和制造更聰明的…

nginx配置 vue打包后的項目 解決刷新頁面404問題|nginx配置多端訪問

訪問vue頁面時,/# 使url看著不美觀,使用 H5 history模式可以完美解決這個問題,但需要后端nginx幫助。接下來我們自己配置一下。 使用前端路由,但切換新路由時,想要滾動到頁面頂部,或者保持原先的滾動位置&a…

算法導論2nd 10.1-7

為什么80%的碼農都做不了架構師?>>> 思路:兩個隊列q1和q2,兩個隊列指針pusher和poper分別指向q1和q2,push時調用pusher->enqueue,然后將poper里的元素全部dequeue并enqueue到pusher,最后交換…

阿里云Windows2012 R2服務器IPV6配置記錄

要上蘋果APP,則必須要支持IPV6和HTTPS,阿里云本身沒有開放IPV6地址。因此需要進行IPV6的相關配置。查了很多IPV6的配置資料,最終選擇用HE進行IPV6設置。在這過程中遇到一些問題,以記錄下來以備注。 1、IPV6 Tunnel Broker設置 在H…

mycat 1.6.5 for mysql 8分表攻略

2019獨角獸企業重金招聘Python工程師標準>>> 簡述 mycat 對于 mysql 的支持有版本要求,目前 1.6.5 不支持 mysql 8.0 版本。因為mysql 8.0 的加密方式發生了變化。 mycat 1.6.5 連接 mysql 8.0 的兩個方式 mysql 8.0 采用兼容方式,&#xff0…

Funcode-貪吃蛇

自己編寫的一個小游戲,本來打算做貪吃蛇,結果不會使蛇的身子隨蛇頭方向改變而改變就換了種想法,最后變成了這樣一個另類的小游戲,“笑哭“,下面是程序的主要代碼,如果有興趣也可以下載完整程序代碼資源&…