scrollview+tablayout实现联动

一、需求:
项目开发中的需求,需要scrollview和tablayout实现联动:
1、点击tablayout的tab,scrollview滑动到指定的位置
2、scrollview滑动到某位置时tablayout切换到对应的tab
效果如下:


效果.gif

二、开始撸代码
布局文件:




    

        

        

        
    

    

        

            

            

            

            

            

            


        

    

java:


private int tabIndex = 0;//tablayout所处的下标
private boolean scrollviewFlag = false;//标记是否是scrollview在滑动

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (!scrollviewFlag) {
                    switch (tab.getPosition()) {
                        case 0://scrollview移动到tv1的顶部坐标处
                            scrollView.scrollTo(0, tv1.getTop());
                            break;
                        case 1://scrollview移动到tv2的顶部坐标处
                            scrollView.scrollTo(0, tv2.getTop());
                            break;
                        case 2://scrollview移动到tv3的顶部坐标处
                            scrollView.scrollTo(0, tv3.getTop());
                            break;
                    }
                }
                //用户点击tablayout时,标记不是scrollview主动滑动
                scrollviewFlag = false;
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        //scrollview滑动事件监听
        scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                scrollviewFlag = true;
                tabIndex = tabLayout.getSelectedTabPosition();
                if (scrollY < tv2.getTop()) {
                    if (tabIndex != 0) {//增加判断,如果滑动的区域是tableIndex=0对应的区域,则不改变tablayout的状态
                        tabLayout.selectTab(tabLayout.getTabAt(0));
                    }
                } else if (scrollY >= tv2.getTop() && scrollY < tv3.getTop()) {
                    if (tabIndex != 1) {
                        tabLayout.selectTab(tabLayout.getTabAt(1));
                    }
                } else if (scrollY >= tv3.getTop()) {
                    if (tabIndex != 2) {
                        tabLayout.selectTab(tabLayout.getTabAt(2));
                    }
                }
                scrollviewFlag = false;
            }
        });

大概逻辑在代码的注解上
注:仅以记录学习使用,如有错误,欢迎指出,互相学习

你可能感兴趣的:(scrollview+tablayout实现联动)