TabLayout與RecyclerView的聯(lián)動(沒有ViewPager的事兒)

一直以來TabLayout都是配合著ViewPager一起使用,最近遇到一個需求是,TabLayout的tab要隨著RecyclerView的item滾動而切換(與ViewPager沒有一點關系),比較直觀的例子就是支付寶首頁---點擊“更多”之后的頁面的效果。
下面先來看一下最后成品的效果:


成品效果

實現(xiàn)起來也比較簡單,關鍵看對TabLayout的熟悉程度了。
1,先來看看布局,十分簡單的垂直布局,tabLayout在上,Recyclerview在下:


tab_layout.xml

2,首先初始化TabLayout,注意,因為tab的數(shù)量較多,一屏肯定顯示不下,要讓tab可以左右滑動的話,記得要設置mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

初始化TabLayout

3,初始化Recyclerview就比較簡單了,自己隨意寫了個List,里面放了10條數(shù)據(jù)(跟tab的數(shù)量一致),代碼略去不寫。

4,然后要實現(xiàn)滑動Recyclerview的時候,當每個item顯示在屏幕最上方的時候,TabLayout切換到相應tab上去,代碼如下:

監(jiān)聽onScrollChange listener

就這一句話就實現(xiàn)了,其中
①mManager是LinearLayoutManager對象,
②setScrollPosition的第一個參數(shù),findFirstVisibleItemPosition()是在Recyclerview中,最上面一個item的position,注意,哪怕這個item沒有顯示全,也是會返回這個item的position的。跟這個方法相關的還有另外三個方法:findFirstCompletelyVisibleItemPosition(), findLastVisibleItemPosition(), findLastCompletelyVisibleItemPosition(),下面用一張圖解釋一下這四個方法返回的值:
例子圖片

返回的item position分別為:

  • findFirstVisibleItemPosition():14
  • findFirstCompletelyVisibleItemPosition():15
  • findLastVisibleItemPosition():33
  • findLastCompletelyVisibleItemPosition():32
    ③,setScrollPosition的第二個參數(shù),范圍是[0, 1),意思是indicator的偏移量,0就是在當前tab底下,1就是在右邊那個tab底下了,0.5就是在兩個tab中間。你們可以試試效果
    ④setScrollPosition第三個參數(shù),我沒深究,看上去是顯示選中tab文字效果的,有興趣可以看看。

***另外,tabLayout.setScrollPosition()方法是沒有動畫效果的,tab切換是跳變。想要smooth滑動效果的話,可以用smooth相關方法,不過我試了,會卡頓的,效果不理想。

5,然后就是實現(xiàn)點擊tab的時候,Recyclerview能夠自動滑動到相應item位置的效果了:

tabLayout監(jiān)聽

添加tabSelect的監(jiān)聽,點擊某一個tab的時候,會回調onTabSelected()方法,position就是tab.getPosition()了。
scrollToPositionWithOffset(position, offset)可以定位到該位置的item,并且offset設為0的話,item就會顯示在屏幕最上方。

6,最后,通過上面的效果圖可以看到,當list滑動到最下方的時候,最下面是有一大片留白的,因為只有這樣,最后面的幾個tab才有機會能夠在滑動list的切換到,實現(xiàn)也比較簡單,就是給Recyclerview加了個footer,而footer的高度,是Recyclerview的高度 減去 一個item的高度(最后得留一個item顯示在屏幕上,全滾上去不像話。。?!臼謩有δ槨浚?/p>

Adapter的部分代碼

好了,以上就是實現(xiàn)這個功能的方法了,想要全部代碼可以去https://github.com/gaoyangcr7/RecyclerViewTabLayout下載

歡迎關注

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容