Android實踐之ScrollView中滑動沖突處理

轉載注明出處：http://blog.csdn.net/xiaohanluo/article/details/52130923

1. 前言

       在Android開發中，假設是一些簡單的布局。都非常easy搞定。可是一旦涉及到復雜的頁面，特別是為了兼容小屏手機而使用了ScrollView以后，就會出現非常多點擊事件的沖突。最經典的就是ScrollView中嵌套了ListView。

我想大部分剛開始接觸Android的同學們都踩到過這個坑，這一篇文章就從近期做的一個項目講起。然后在過程中提供一些解決沖突的思路。

2. 項目起始

       項目有一個頁面，涉及到了ViewPager。MapView。ListView，也就是說在一個頁面中，會有這三個View，非常明顯，屏幕無法全然顯示，須要ScrollView來做一下支援，就引入了ScrollView作為外層的容器。

可是由於這個頁面的數據展示須要做到用戶手動下拉刷新，於是又引入了官方的SwipeRefreshLayout。

於是這個頁面的布局就成了這樣子。

例如以下圖（細節布局忽略）。

圖-1 布局圖

       增加了ScrollView和SwipeRefreshLayout之后引入了新的問題。就是各個控件之間的事件沖突，嵌套在ScrollView中的ViewPager、MapView、ListView都須要能夠正確的處理點擊事件，特別是ListView。需求要求它在ScrollView中能夠滑動，兩種滑動混淆在一起，不是特別優點理。

問題提出來了，以下直接看解決思路。

3. 解決滑動沖突的思路

       在ViewGroup中有個方法叫requestDisallowInterceptTouchEvent(boolean disallowIntercept)，這種方法能夠用來控制該ViewGroup是否截斷點擊事件。我們解決滑動沖突的時候，事實上就是在某個時機去調用這種方法。讓父布局不截斷點擊事件，將點擊事件傳遞到子View。讓相關的子View去處理。
       以下就是關於在項目中處理各種點擊事件沖突的一些樣例和思考。處理的方法僅僅是提供一種思路，可能並非最優的方法，肯定存在其它思路的解決方式。
       以下處理滑動沖突的方案都是在子View的OnTouchListener里面進行處理。並沒有去復寫控件的點擊事件處理過程。在使用中還是比較方便的。

3.1 MapView地圖頁面滑動沖突

       MapView與ScrollView的沖突主要在於，當用戶點擊到MapView地圖並且滑動的時候。希望由地圖Map去處理點擊事件。並包含興許的滑動事件、雙手指縮放地圖等等。

       在ScrollView中，是會默認截斷點擊事件的，導致用戶點擊到地圖后，地圖基本是沒有反應。更別談雙手指縮放地圖了。
       用戶手指點擊到地圖，並且滑動的時候，非常難確定用戶是要ScrollView上下滑動還是操控地圖內容滑動，所以我簡單的覺得，僅僅要用戶手指點擊到地圖。就是要對地圖進行操作。當用戶手指抬起。就覺得用戶不須要操作地圖了。
       解決思路也非常簡單。就是在用戶點擊到地圖或者滑動地圖時候，讓ScrollView不截斷點擊事件。並傳遞給子View處理。也就是地圖去處理點擊事件；當用戶手指抬起的時候，將ScrollView的狀態恢復至之前的狀態。也就是ScrollView能夠截斷點擊事件。

我使用的是百度地圖，直接上代碼，更easy理解。

mMapView.getChildAt(0).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if(event.getAction() == MotionEvent.ACTION_UP){
                    //同意ScrollView截斷點擊事件，ScrollView可滑動
                    mScrollView.requestDisallowInterceptTouchEvent(false);
                }else{
                    //不同意ScrollView截斷點擊事件，點擊事件由子View處理
                    mScrollView.requestDisallowInterceptTouchEvent(true);
                }
                return false;
            }
        });

3.2 ViewPager滑動沖突解決

       在這個項目中，ViewPager在頁面最頂層。假設僅僅是ScrollView里面嵌套了ViewPager。由於這兩個控件是不同方向的滑動事件，所以基本不會出現沖突。

       可是由於引入了SwipeRefreshLayout，我發如今滑動ViewPager的時候。非常easy就觸發了SwipeRefreshLayout的下來刷新，進而有可能阻斷了ViewPager的左右滑動效果，體驗非常不好。並且在滑動ViewPager的過程中，用戶滑動肯定不是一直水平的，會有一定程度向上向下的滑動。
       ViewPager處理沖突和地圖處理沖突有些不同，由於當用戶點擊到ViewPager，在滑動過程中。基本就能夠推測到用戶是想左右滑動ViewPager還是上下滑動ScrollView（或者下拉刷新），這就不能像地圖一樣。在點擊到ViewPager就禁止ScrollView截斷點擊事件（或者SwipeRefreshLayout下拉刷新功能），須要在滑動過程中做出推斷。

       解決思路就是，設定一個閾值，一旦用戶在X軸也就是橫向滑動距離超過這個閾值，我就覺得用戶是要左右滑動ViewPager。就禁止ScrollView截斷點擊事件同一時候設置SwipeRefreshLayout不能下拉刷新。當用戶抬起手指，就覺得用戶對ViewPager的操作已經完成，將ScrollView和SwipeRefreshLayout狀態恢復。

mViewPager.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();

        if(action == MotionEvent.ACTION_DOWN) {
            // 記錄點擊到ViewPager時候，手指的X坐標
            mLastX = event.getX();
        }
        if(action == MotionEvent.ACTION_MOVE) {
            // 超過閾值
            if(Math.abs(event.getX() - mLastX) > 60f) {
                mRefreshLayout.setEnabled(false);
                mScrollView.requestDisallowInterceptTouchEvent(true);
            }
        }
        if(action == MotionEvent.ACTION_UP) {
            // 用戶抬起手指，恢復父布局狀態
            mScrollView.requestDisallowInterceptTouchEvent(false);
            mRefreshLayout.setEnabled(true);
        }
        return false;
    }
});

       用戶點擊到ViewPager時候，記錄下點擊位置的X坐標，當用戶滑動過程中，假設在X軸上面的滑動超過閾值（我寫的是60f，這個能夠在實際使用中自行設置最佳的閾值）。就禁止ScrollView截斷點擊事件，同一時候設置不可下拉刷新。當用戶手指離開屏幕。將ScrollView和SwipeRefreshLayout的狀態恢復。

3.3 ListView滑動沖突解決

       在ScrollView中嵌套ListView，會出現各種各樣奇怪的問題。比方說ListView顯示有問題，可能才一兩個Item那么高。並沒有全然的展開。

網上流傳解決這種問題的方法會有兩種。

• 依據展示數據的個數乘以每個Item的高度。計算出ListView的整體高度，然后動態的設置ListView的高度
• 復寫ListView的onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法，讓ListView全然展開

       這兩種方法都能夠解決ListView展示不全然的問題。並且也能夠滑動（事實上是使用ScrollView的滑動效果），可是有一個最大的遺憾。就是ListView里面的View不能復用了。由於這兩種方法都是算出了ListView的所有高度，然后將ListView控件的高度設置成這個高度。這種話，ListView就相當於一個LinearLayout的布局了。失去了復用View的優勢。並且在某些場景可能還沒有LinearLayout好用。更甚的是，假設有大量圖片的話，非常easy就OOM了。這是在研發過程中最不希望看見的。

       能夠參考一下美團，美團的首頁。就是一個ScrollView，下滑的時候會發現，並不能無限向下滑動，到了底部會提醒跳轉到一個二級頁面去查看所有的團購信息。這是處理ScrollView里面嵌套相似ListView列表布局的時候的一種解決方式。
可是在我遇見的這個項目里面，並不能這樣處理。
       上面的提到的兩種解決思路非常明白，假設想要ListView正常展示就須要確定ListView的高度，這個非常重要。

       所以首先。我須要在布局文件里設置ListView的高度。是一個明白的數值。設置高度之后。假設ListView中的數據的Item總高度超過ListView所設置的高度，就能夠復用View了。可是這僅僅是攻克了ListView的顯示問題，ListView與ScrollView的滑動沖突，並沒有解決。
       要解決滑動的沖突，最基本的是確定禁止ScrollView截斷點擊事件的時機，然后來分析有哪些時機。

• ScrollView在未滑動究竟部時候，假設點擊並滑動ListView時候。ListView是不能滑動的。不禁止。

• 假設ScrollView滑動究竟部，且ListView已經到頂部，繼續下拉ListView，事實上會拉動ScrollView，不禁止。

• 假設ScrollView滑動究竟部，用戶向上滑。ListView滑動，禁止ScrollView截斷點擊事件能力

       非常明顯，在推斷禁止ScrollView截斷點擊事件時機的時候，須要知道ScrollView是否滑動到了底部。於是。重寫了ScrollView的ScrollChanged()方法，來推斷ScrollView是否滑動究竟部(SDK API 23版本號中ScrollView能夠設置setOnScrollChangeListener()來監聽滑動的變化，可是之前版本號不支持。為了兼容。自己須要重寫)。

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt){
    super.onScrollChanged(l,t,oldl,oldt);
    // 滑動的距離加上本身的高度與子View的高度對照
    if(t + getHeight() >=  getChildAt(0).getMeasuredHeight()){
        // ScrollView滑動究竟部
        if(mOnScrollToBottomListener != null) {
            mOnScrollToBottomListener.onScrollToBottom();
        }
    } else {
        if(mOnScrollToBottomListener != null) {
            mOnScrollToBottomListener.onNotScrollToBottom();
        }
    }
}

public void setScrollToBottomListener(OnScrollToBottomListener listener) {
    this.mOnScrollToBottomListener = listener;
}

public interface OnScrollToBottomListener {
    void onScrollToBottom();
    void onNotScrollToBottom();
}

有了思路，並且ScrollView滑動究竟部的標識也能夠拿到，以下就能夠直接來解決滑動沖突了。直接看代碼。

mScrollView.setScrollToBottomListener(new BottomScrollView.OnScrollToBottomListener() {
    @Override
    public void onScrollToBottom() {
        isSvToBottom = true;
    }

    @Override
    public void onNotScrollToBottom() {
        isSvToBottom = false;
    }
});

mListView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();

        if(action == MotionEvent.ACTION_DOWN) {
            mLastY = event.getY();
        }
        if(action == MotionEvent.ACTION_MOVE) {
            int top = mListView.getChildAt(0).getTop();
            float nowY = event.getY();
            if(!isSvToBottom) {
                // 同意scrollview攔截點擊事件, scrollView滑動
                mScrollView.requestDisallowInterceptTouchEvent(false);
            } else if(top == 0 && nowY - mLastY > THRESHOLD_Y_LIST_VIEW) {
                // 同意scrollview攔截點擊事件, scrollView滑動
                mScrollView.requestDisallowInterceptTouchEvent(false);
            } else {
                // 不同意scrollview攔截點擊事件， listView滑動
                mScrollView.requestDisallowInterceptTouchEvent(true);
            }
        }
        return false;
    }
});

       相對於其它的控件來說，ListView和ScrollView之間的滑動沖突更難解決，但事實上在實際使用中並不推薦ScrollView里面嵌套ListView，一旦業務復雜，非常easy出現各種UI和業務邏輯沖突的錯誤。

4. 執行效果

由於地圖增加比較麻煩。所以在Demo中並沒有引入地圖。看一下執行效果。

圖-2 執行效果

5. 總結

       本篇文章僅僅是提供一種解決方法的思路。在詳細的場景下，交互往往是貼合詳細業務需求的。可是無論怎么樣，找出點擊事件截斷和處理的時機是最重要的，環繞這個關鍵點，總能找出對應的解決方法。

附上Demoproject地址：Demoproject地址鏈接