一.圖示效果

                （支付寶）                                                                                        （實現的效果）

二.思路講解

TabLayout+ScrollView實現即可。每一個tab對應scrollview中包裹的一層佈局，以上有4個tab，也就需要inflate 4個佈局檔案，用來表示每一層的樣式內容。

1.頁面載入完畢後，記住每一層父佈局在Screen中所要滑動至頂部的距離Distance；

2.操作：

    a. 當點選tab時：滑動scrollview該層的距離Distance；

    b. 當滑動scrollview至對應的層時： 選定對應的tab。

三.程式碼

1.佈局程式碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ganshenml.tabscrollviewdemo.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

        <FrameLayout
            android:id="@+id/wrapperFl"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></FrameLayout>
    </FrameLayout>

    <com.ganshenml.tabscrollviewdemo.ObservableScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/containerLl"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        </LinearLayout>

    </com.ganshenml.tabscrollviewdemo.ObservableScrollView>
</LinearLayout>
 

佈局程式碼很簡單，可能會有的疑問點有：

a. wrapperFl是用來幹啥的？

b. ObservableScrollView又是個什麼東西？

（後面說明）

2.邏輯程式碼

public class MainActivity extends AppCompatActivity implements ObservableScrollView.ScrollViewListener {
    private static final String TAG = "MainActivity";
    private FrameLayout wrapperFl;
    private TabLayout tabLayout;
    private ObservableScrollView scrollView;
    private LinearLayout containerLl;
    private boolean firstAlreadyInflated = true;
    private ViewGroup firstFloorVg;
    private ViewGroup secondFloorVg;
    private ViewGroup thirdFloorVg;
    private ViewGroup fourthFloorVg;
    private int secondFloorVgPositionDistance;//第二層滑動至頂部的距離
    private int thirdFloorVgPositionDistance;
    private int fourthFloorVgPositionDistance;
    private int currentPosition = 0;
    private boolean tabInterceptTouchEventTag = true;//標誌位，用來區分是點選了tab還是手動滑動scrollview

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

    private void initViews() {
        wrapperFl = (FrameLayout) findViewById(R.id.wrapperFl);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        scrollView = (ObservableScrollView) findViewById(R.id.scrollView);
        containerLl = (LinearLayout) findViewById(R.id.containerLl);
        for (int i = 0; i < 4; i++) {
            tabLayout.addTab(tabLayout.newTab().setText("tab" + (i + 1)));
        }

        firstFloorVg = (ViewGroup) LayoutInflater.from(this).inflate(R.layout.item_floor_first, null);
        secondFloorVg = (ViewGroup) LayoutInflater.from(this).inflate(R.layout.item_floor_second, null);
        thirdFloorVg = (ViewGroup) LayoutInflater.from(this).inflate(R.layout.item_floor_third, null);
        fourthFloorVg = (ViewGroup) LayoutInflater.from(this).inflate(R.layout.item_floor_fourth, null);

        containerLl.addView(firstFloorVg);
        containerLl.addView(secondFloorVg);
        containerLl.addView(thirdFloorVg);
        containerLl.addView(fourthFloorVg);

    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (firstAlreadyInflated) {//獲取各層離screen頂部的位置以及計算滑動值相應頂部所需要的距離
            firstAlreadyInflated = false;
            int[] firstFloorVgPosition = new int[2];
            int[] secondFloorVgPosition = new int[2];
            int[] thirdFloorVgPosition = new int[2];
            int[] fourthFloorVgPosition = new int[2];
            firstFloorVg.getLocationOnScreen(firstFloorVgPosition);
            secondFloorVg.getLocationOnScreen(secondFloorVgPosition);
            thirdFloorVg.getLocationOnScreen(thirdFloorVgPosition);
            fourthFloorVg.getLocationOnScreen(fourthFloorVgPosition);
            int firstFloorVgPositionAnchor = firstFloorVgPosition[1];
            int secondFloorVgPositionAnchor = secondFloorVgPosition[1];
            int thirdFloorVgPositionAnchor = thirdFloorVgPosition[1];
            int fourthFloorVgPositionAnchor = fourthFloorVgPosition[1];

            Log.d(TAG, "第一層距離螢幕的距離是：" + firstFloorVgPosition[1]);
            Log.d(TAG, "第二層距離螢幕的距離是：" + secondFloorVgPosition[1]);
            Log.d(TAG, "第三層距離螢幕的距離是：" + thirdFloorVgPosition[1]);
            Log.d(TAG, "第四層距離螢幕的距離是：" + fourthFloorVgPosition[1]);

            secondFloorVgPositionDistance = secondFloorVgPositionAnchor - firstFloorVgPositionAnchor;
            thirdFloorVgPositionDistance = thirdFloorVgPositionAnchor - firstFloorVgPositionAnchor;
            fourthFloorVgPositionDistance = fourthFloorVgPositionAnchor - firstFloorVgPositionAnchor;
        }
    }

    private void initListeners() {
        wrapperFl.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                Log.d(TAG,"wrapperFl onTouch");
                tabInterceptTouchEventTag = true;//讓tab來處理滑動
                return false;
            }
        });
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                currentPosition = tab.getPosition();
                if(!tabInterceptTouchEventTag){//手動滑動頁面時則不再次處理滑動
                    return;
                }
                scrollView.computeScroll();
                switch (currentPosition) {
                    case 0:
                        scrollView.smoothScrollTo(0, 0);
                        break;
                    case 1:
                        scrollView.smoothScrollTo(0, secondFloorVgPositionDistance);
                        break;
                    case 2:
                        scrollView.smoothScrollTo(0, thirdFloorVgPositionDistance);
                        break;
                    case 3:
                        scrollView.smoothScrollTo(0, fourthFloorVgPositionDistance);
                        break;
                    default:
                        break;
                }
            }

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

            }

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

            }
        });
        scrollView.setScrollViewListener(this);
        scrollView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                Log.d(TAG, "scrollView onTouch");
                tabInterceptTouchEventTag = false;//讓scrollview處理滑動
                return false;
            }
        });
    }

    @Override
    public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
        if (tabInterceptTouchEventTag) {//讓tab來處理滑動
            return;
        }
        Log.d(TAG, "當前scrollView的位置——>" + y);
        if (y < secondFloorVgPositionDistance) {
            if (currentPosition != 0) {
                scrollView.computeScroll();
                tabLayout.getTabAt(0).select();
            }
        } else if (y < thirdFloorVgPositionDistance) {
            if (currentPosition != 1) {
                scrollView.computeScroll();
                tabLayout.getTabAt(1).select();
            }
        } else if (y < fourthFloorVgPositionDistance) {
            if (currentPosition != 2) {
                scrollView.computeScroll();
                tabLayout.getTabAt(2).select();
            }
        } else {
            if (currentPosition != 3) {
                scrollView.computeScroll();
                tabLayout.getTabAt(3).select();
            }
        }
    }
}
 

a. tabInterceptTouchEventTag 作為標誌位是為了防止因scrollview觸發了tab Selected從而再次引起scrollview滑動導致的滑動不流暢。

b. wrapperFl的存在則是要去給 tabInterceptTouchEventTag 賦值，因為TabLayout的Touch、Click、Focus等事件被消化掉了，無法在這些事件中監聽到對應的值的變化，所以通過wrapperFl來進行Touch事件的監聽。

c. ObservableScrollView 是繼承自Scrollview，新增和改變了其中的以下方法：

  public void setScrollViewListener(ScrollViewListener scrollViewListener) {
        this.scrollViewListener = scrollViewListener;
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
        }
    }

    public interface ScrollViewListener {

        void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);

    }

這樣就可以在activity主介面中監聽到scrollview的滑動事件，從而獲取當前整個scrollview所處的位置，進而去判定是否需要選定對應的tab。

ps：如果要做成支付寶那樣TabLayout上還有個TopView的內容樣式，則可以參考之前寫過的部落格的做法：View滑動固定效果實現>>