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;
}
});
大概逻辑在代码的注解上
注：仅以记录学习使用，如有错误，欢迎指出，互相学习