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

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

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

3,初始化Recyclerview就比較簡單了,自己隨意寫了個List,里面放了10條數(shù)據(jù)(跟tab的數(shù)量一致),代碼略去不寫。
4,然后要實現(xiàn)滑動Recyclerview的時候,當每個item顯示在屏幕最上方的時候,TabLayout切換到相應tab上去,代碼如下:

就這一句話就實現(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位置的效果了:

添加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>

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