VerticalViewPager與VertialTabLayout的結合使用

前言

在開發中,我們常常需要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查看佈局代碼,抓包查看相關接口和請求機制),爲我們提供一種思路,然後基於我們自己的需求取其精華棄其糟粕

源碼下載

CSDN下載地址
GitHub地址

參考鏈接

VerticalTabLayout
VerticalViewPager
android design library提供的TabLayout的用法

發佈了97 篇原創文章 · 獲贊 87 · 訪問量 32萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章