tablayout 滚动模式_scrollview+tablayout实现联动

一、需求：

项目开发中的需求，需要scrollview和tablayout实现联动：

1、点击tablayout的tab，scrollview滑动到指定的位置

2、scrollview滑动到某位置时tablayout切换到对应的tab

效果如下：

效果.gif

二、开始撸代码

布局文件：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="50dp"

app:tabIndicatorColor="@color/colorPrimary"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/colorPrimary"

app:tabTextColor="@android:color/black">

android:id="@+id/tab1"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="按钮1" />

android:id="@+id/tab2"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="按钮2" />

android:id="@+id/tab3"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="按钮3" />

android:id="@+id/scrollView"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="我是按钮1" />

android:layout_width="match_parent"

android:layout_height="800dp"

android:background="@android:color/holo_blue_dark" />

android:id="@+id/tv2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="我是按钮2" />

android:layout_width="match_parent"

android:layout_height="800dp"

android:background="@android:color/holo_green_light" />

android:id="@+id/tv3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="我是按钮3" />

android:layout_width="match_parent"

android:layout_height="800dp"

android:background="@android:color/holo_red_dark" />

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;

}

});

大概逻辑在代码的注解上

注：仅以记录学习使用，如有错误，欢迎指出，互相学习