RecyclerView+TabLayout菜单实现滑动定位

用于商品浏览列表，如图

8b12882500e54c117ffd8f1ad45ec935.gif

这个效果主要就是由recyclerview的滑动监听、点击tablayout时让recyclerview显示到指定位置达到的，其他的页面效果都是次要的。

recyclerview滑动监听

mRvOne.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                //滑动RecyclerView list的时候，根据最上面一个Item的position来切换tab
                xTablayout_center_pinpai.setScrollPosition(layoutManager.findFirstVisibleItemPosition(), 0, true);
                //此处用于更换选中tab的icon
                int index = layoutManager.findFirstVisibleItemPosition();
                for (int i = 0; i < mPlatform_water_list.size(); i++) {
                    if (index == i) {
                        xTablayout_center_pinpai.getTabAt(index).setIcon(R.drawable.vip_icon);
                    } else {
                        xTablayout_center_pinpai.getTabAt(i).setIcon(null);
                    }
                }

            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
            }
        });

这个tablayout我使用的是xTablayout，方便快捷。滑动监听中根据当前recyclerview的LinearLayoutManager获取到列表中显示区域的第一个item的position，然后给xTablayout设定position位置。
注意item与子item

image.png

//此处用于更换选中tab的icon
int index = layoutManager.findFirstVisibleItemPosition();
                for (int i = 0; i < mPlatform_water_list.size(); i++) {
                    if (index == i) {
                        xTablayout_center_pinpai.getTabAt(index).setIcon(R.drawable.vip_icon);
                    } else {
                        xTablayout_center_pinpai.getTabAt(i).setIcon(null);
                    }
                }

这段代码用于更换选中tab的icon,icon随便换，自定义的。以及icon 和 它下面的字体、间距啥的都根据自己的审美自由设定。^-

tablayout切换监听

xTablayout_center_pinpai.setOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(XTabLayout.Tab tab) {
                
                //更换icon
                int index = tab.getPosition();
                for (int i = 0; i < mPlatform_water_list.size(); i++) {
                    if (index == i) {
                        xTablayout_center_pinpai.getTabAt(index).setIcon(R.drawable.vip_icon);
                    } else {
                        xTablayout_center_pinpai.getTabAt(i).setIcon(null);
                    }
                }

                //点击tab的时候，RecyclerView自动滑到该tab对应的item位置
                if (tab.getPosition() == 0){
                    layoutManager.scrollToPositionWithOffset(tab.getPosition(), 0);
                }else {
                    layoutManager.scrollToPositionWithOffset(tab.getPosition()+1, 0);
                }

            }

            @Override
            public void onTabUnselected(XTabLayout.Tab tab) {
            }

            @Override
            public void onTabReselected(XTabLayout.Tab tab) {
            }
        });

关键是 layoutManager的scrollToPositionWithOffset方法。