前言
在開發中,我們常常需要ViewPager結合Fragment一起使用.我們可以使用三方開源的PagerSlidingTabStrip去實現,或者viewpagerindicator。現在我們可以使用Design support library庫的TabLayout去實現了。
TabLayout+ViewPager+Fragment成爲了實現如下效果的標配
(效果圖來自 暴風體育Android APP)
不過這不是重點,重點是我們要實現的下圖所示效果:垂直的TabLayout以及垂直的ViewPager,並完成二者的聯動:
下面這張是我分享的Demo示意圖:
問題
這裏不對相關代碼做過多說明,使用的Github上造好的輪子,然後根據自己的業務需求做的相關改動,因爲時間比較緊,這裏聊聊期間碰到的困難
- 方案調研過程中,第一套方案採用的VerticalViewPager繼承自ViewPager,通過將Event的橫向和縱向座標進行交換完成ViewPager的垂直效果,但是會出現滑動衝突,即配合嵌套有RecyclerView或者ListView的Fragment會出現向下滑動不靈敏的問題,指定時間內解決效果不理想,用戶體驗不好 ,暫時放棄、
- 第二套解決方案使用的VerticalViewPager繼承自ViewGroup,按照作者的說明(Small library allowing you to have a VerticalViewPager. It’s just a copy paste from the v19 ViewPager available in the support lib, where I changed all the left/right into top/bottom and X into Y.),同時代碼解決了(VerticalViewPager scroll doesnt work when listview is used inside one of the fragment)的問題,結合VerticalTabLayout完美使用
- 通過VerticalTabLayout的OnTabSelectedListener與VerticalViewPager的OnPageChangeListener完成二者之間的聯動,通過VerticalViewPager的PageTransformer完成垂直ViewPager的自定義切換效果
- VerticalTabLayout和VerticalViewPager通過線性佈局水平放置,使用layout_weight進行比例分割,注意layout_width設置爲0,否則可能導致右邊VerticalViewPager中嵌套的數據顯示不居中的問題
- 期間設置Fragment時碰到一個沒有解決的問題(Fragment with ViewPager setCustomAnimations not working),有知識的大大望不吝賜教
- 還有就是業務邏輯 接口設計方面的問題,我覺得如果有相關競品,相對成熟的可以作爲參考(反編譯APK查看佈局代碼,抓包查看相關接口和請求機制),爲我們提供一種思路,然後基於我們自己的需求取其精華棄其糟粕
源碼下載
參考鏈接
VerticalTabLayout
VerticalViewPager
android design library提供的TabLayout的用法