TabLayout+NestedScrollView实现tab和scrollView滑动关联

项目地址：base_component_learn/multiAdapt/nestedscroll at master · buder-cp/base_component_learn · GitHub

效果如上图所示，当选中头部某个tab，下部视图滑动到具体内容，或者视图滑动到某具体内容时，tab页自动选中某tab。现在实现这种效果很简单的，做个简单总结。

实现

这里使用TabLayout+NestedScrollView ，TabLayout负责头部tab，NestedScrollView 负责界面上下滑动的视图。

首先是布局文件：activity_main.xml

需要注意的一点是，里面的定位view都在LinearLayout布局内部，如果各个定位的view都用LinearLayout包裹则在使用oneStartView.getTop()时这些view都是0，会无法定位。当然你也可以使用view.getHeight()累加来计算定位，这样会麻烦一些。

视图布局好以后，具体控制代码 大致如下，主要就是两个listener的设置监听：

1、通过addOnTabSelectedListener实现选中tab，视图滑动到某块内容位置。 2、通过setOnScrollChangeListener实现滑动视图时触发 选中某类tab 。

完整代码如下：

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;

import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

    private TabLayout goodsDetailsTabLayout;
    private NestedScrollView mainScrollView;
    private View zhanwei_view;
    private View oneStartView;
    private View twoStartView;
    private View threeStartView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        goodsDetailsTabLayout = findViewById(R.id.goodsDetailsTabLayout);
        mainScrollView = findViewById(R.id.mainScrollView);
        zhanwei_view = findViewById(R.id.zhanwei_view);
        oneStartView = findViewById(R.id.oneStartView);
        twoStartView = findViewById(R.id.twoStartView);
        threeStartView = findViewById(R.id.threeStartView);

        //1.点击Tab的 --> scroll定位
        goodsDetailsTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                int tabHeight = goodsDetailsTabLayout.getHeight();
                switch (position) {
                    case 0:
                        mainScrollView.smoothScrollTo(0, oneStartView.getTop());
                        break;
                    case 1:
                        mainScrollView.smoothScrollTo(0, (int) (twoStartView.getTop() - tabHeight));
                        break;
                    case 2:
                        mainScrollView.smoothScrollTo(0, (int) (threeStartView.getTop() - tabHeight));
                        break;
                }
            }

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

            }

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

            }
        });


        //2.上下滑动scroll时的 --> tab定位
        mainScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (scrollY < zhanwei_view.getHeight()) {
                    goodsDetailsTabLayout.setVisibility(View.INVISIBLE);
                } else {
                    int tabHeight = goodsDetailsTabLayout.getHeight();
                    goodsDetailsTabLayout.setVisibility(View.VISIBLE);
                    if (scrollY < oneStartView.getBottom() - tabHeight) {
                        goodsDetailsTabLayout.setVisibility(View.VISIBLE);
                        goodsDetailsTabLayout.setScrollPosition(0, 0f, true);
                    } else if (scrollY < twoStartView.getBottom() - tabHeight) {
                        goodsDetailsTabLayout.setVisibility(View.VISIBLE);
                        goodsDetailsTabLayout.setScrollPosition(1, 0f, true);
                    } else {
                        goodsDetailsTabLayout.setVisibility(View.VISIBLE);
                        goodsDetailsTabLayout.setScrollPosition(2, 0f, true);
                    }
                }
            }
        });

    }
}

以上便完成了。