1. 程式人生 > >仿騰訊漫畫目錄頁實現

仿騰訊漫畫目錄頁實現

前言: 因為之前專案中需要用到類似騰訊漫畫目錄頁的效果,所以就做了一些研究,最開始想使用CoordinatorLayout來實現。最後因為這裡 我這寫的一些問題,所以達不到騰訊漫畫目錄頁的效果,所以我就研究了一下騰訊漫畫的實現方式。

之前使用的CoordinatorLayout實現的方式,出現的問題主要是:頭部View和子View之前的滾動順序和fling事件傳遞的問題,具體請看這裡

但是騰訊漫畫目錄頁的整體上的效果是非常不錯的,沒有出現卡頓或者頭部view和子view滾動順序不對的問題。

騰訊漫畫目錄頁的實現方式:

整體頁面結構:
這裡寫圖片描述
整個頁面黑色的框代表ViewPager,紅色的框代表頭部View。可以看到ViewPager是覆蓋整個頁面的,而頭部View是覆蓋在Viewpager上面的。viewpager中的子Fragment 根View中使用能滾動的View,例如ListView、RecyclerView。然後自定義頭部View,放出一個可以在外部滾動頭部View的介面。在主Activity中將滾動頭部View的介面,傳遞給viewpager中的Fragment裡面。通過Fragment根View的滾動監聽來呼叫頭部View的滾動的介面。並通過View.setPadding(int left, int top, int right, int bottom);

設定Fragment中根View的PaddingTop高度,防止頭部View遮擋住Fragment中根View。

這樣由於整個頁面的滾動都是由Fragment中的可滾動View來引動的,所以不會出現滑動卡頓和viewpager與頭部View之間滑動事件傳遞不流暢的問題。

當然這樣也出現了一個問題,就是如果需要滾動頭部View的時候整個頁面跟著滾動,所以當你左右滑動頭部View的時候,viewpager也會跟著左右切換。這種效果我覺的並不是非常符合邏輯的。至少騰訊漫畫v6.4.6事這樣的。