自定义ViewGroup处理内嵌ScrollView的滑动冲突，分析View事件分发，解决滑动冲突

                         【声明】：未经许可，禁止转载！

· 介绍

    自定义ViewGroup的时候，你一定会遇到这种情况——滑动冲突。发生这种情况的前提是你的自定义ViewGroup支持滚动，并且可能也内嵌了一个可以支持滚动的控件。例如：ViewPager嵌套了一个ScrollView、ListView等。当然，用系统的控件是已经处理好这些滚动冲突的。也许你不曾有个这样的经历，接下来我们来看看一个例子，了解一下什么叫滑动冲突吧。

先来看看滑动冲突的效果：

滑动冲突原因，外面自定义的ViewGroup自身支持横向滑动，然后内部嵌套了ScrollView就不行了。当我们在ScrollView上左右滑动的时候根本没反应。而在上方的ImageView是不支持滑动的，所以不会造成冲突。

本例子沿用之前的一篇文章的部分代码，文章链接：结合scrollTo、Scroller、GestureDetector的使用方法，自定义ViewGroup打造ViewPager滑动效果

至于为什么要分开写两篇文章，其实还是因为合起来写好长啊，写的累，看的累。。。

所以代码不做太多的说明，我们只挑最重要的讲，那就是产生滑动冲突的原因以及如何解决滑动冲突。

· 滑动冲突产生原因 

    先看一张草图

Activity(分发) ---> ViewGroup(不拦截，分发) ---> ScrollView(消费事件)

Activity分发事件给外层的ViewGroup，ViewGroup不拦截继续分发给ScrollView。最后由ScrollView消费了onTouchEvent()，整个流程结束。那产生左右不滑动的原因就是：ScrollView消费了onTouchEvent()，导致ViewGroup接收不到onTouchEvent()，那么在ViewGroup的onTouchEvent()方法将得不到执行，所以左右无法响应滑动事件。

如果对事件分发不理解的可以看这篇文章：一个简单的例子带你了解View的事件分发、拦截和消费机制

· 滑动冲突解决

    既然有问题，我们就得解决问题。我们知道ViewGroup是有一个onInterceptTouchEvent()方法，这个方法的最重要的作用就是拦截当前事件。

· 思路

在onInterceptTouchEvent()拦截点击事件，判断手指左右滑动距离 > 上下滑动距离，我们规定这种情况为左右滑动，将此事件拦截，那么ViewGroup的onTouchEvent()将得到执行。

我们看一下实现此思路的代码：

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean isIntercept = false;
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                firstX = x;
                firstY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                distanceX = Math.abs(x - firstX);
                distanceY = Math.abs(y - firstY);
                if (distanceX >= distanceY) {
                    isIntercept = true;
                }else {
                    scrollIndex(currentIndex);
                }
                break;
            case MotionEvent.ACTION_UP:
                firstX = 0;
                firstY = 0;
                break;
        }
        return isIntercept;
    }

首先，我们取得最初按下的点的x，y坐标，然后取得滑动后最末一点的x，y坐标做差，判断x，y滑动距离来确定是否是左右滑动还是上下滑动。

我们的完整的ViewGroup代码：

/**
 * @Created by xww.
 * @Creation time 2018/8/13.
 */

public class MyViewPager extends ViewGroup {

    private int currentIndex;
    private int startX;
    private int endX;
    private Scroller mScroller;
    private int lastX;
    private int distanceX, distanceY;
    private int firstX, firstY;
    int count = 0;

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            //对于每个子View进行布局
            View childView = getChildAt(i);
            childView.layout(i * getWidth(), t, (i + 1) * getWidth(), b);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            view.measure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                break;
            case MotionEvent.ACTION_MOVE:
                startX = firstX;
                endX = x;

                int dx = lastX - x;
                scrollBy(dx, getScrollY());
                lastX = x;
                break;
            case MotionEvent.ACTION_UP:
                int tempIndex = currentIndex;
                if (startX - endX > getWidth() / 2) {    //从右往左滑动
                    tempIndex++;
                } else if (endX - startX > getWidth() / 2) {    //从左往右滑动
                    tempIndex--;
                }
                scrollIndex(tempIndex);
                startX = 0;
                endX = 0;
                lastX = 0;
                count = 0;
                break;
        }
        return true;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean isIntercept = false;
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                firstX = x;
                firstY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                distanceX = Math.abs(x - firstX);
                distanceY = Math.abs(y - firstY);
                if (distanceX >= distanceY) {
                    isIntercept = true;
                } else {
                    scrollIndex(currentIndex);
                }
                break;
            case MotionEvent.ACTION_UP:
                firstX = 0;
                firstY = 0;
                break;
        }
        return isIntercept;
    }

    /**
     * 移动到指定页面
     */
    private void scrollIndex(int tempIndex) {
        //第一页，无法继续向左滑动
        if (tempIndex < 0) {
            tempIndex = 0;
        }
        //同理，最后一页无法向右滑动
        if (tempIndex > getChildCount() - 1) {
            tempIndex = getChildCount() - 1;
        }
        currentIndex = tempIndex;
        mScroller.startScroll(getScrollX(), 0, currentIndex * getWidth() - getScrollX(), 0);
        postInvalidate();
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), 0);
            postInvalidate();
        }
    }
}

然后在MainActivity中添加的三个页面代码：

    private int[] imgs = {R.drawable.bg_01, R.drawable.bg_02};

    private void initViewPager() {
        for (int img : imgs) {
            AppCompatImageView imageView = new AppCompatImageView(getContext());
            imageView.setBackgroundResource(img);
            myViewpager.addView(imageView);
        }
        View view = LayoutInflater.from(getContext()).inflate(R.layout.fg_custom_viewpager_childview, null);
        myViewpager.addView(view);
    }

那么我们看看滑动冲突解决了没有，运行下项目，拭目以待吧。

· Bug产生原因 

嗯，确实是可以了，但是我们在ScrollView里左右滑动的时候有一个bug，我们看手指点下去一瞬间，上一个页面瞬间跳到了我们手指上，这确实是一个重大bug，这也是一个令我头疼的一个问题，不过我想到了一个解决的办法。那么首先，出问题了我们肯定先得找到问题出在哪里，既然是滑动页面，当然和scrollBy()脱不了关系。我就打印了scrollBy()的移动坐标，然后发现这样一种情况：

一、在ScrollView区域里左右滑动，我简单截取了部分Log

08-17 07:02:51.043 15756-15756/com.example.x.mycustomviews I/-------: onInterceptTouchEvent: ACTION_DOWN      596
08-17 07:02:51.304 15756-15756/com.example.x.mycustomviews I/-------: onInterceptTouchEvent: ACTION_MOVE
08-17 07:02:51.317 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_MOVE     -603
08-17 07:02:51.334 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_MOVE     -2
08-17 07:02:51.352 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_MOVE     -1
08-17 07:02:51.800 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_UP

二、在ImageView区域里左右滑动，我也简单截取了部分Log

07:02:54.746 15756-15756/com.example.x.mycustomviews I/-------: onInterceptTouchEvent: ACTION_DOWN    473
08-17 07:02:54.746 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_DOWN
08-17 07:02:54.800 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_MOVE     -2
08-17 07:02:54.867 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_MOVE     -5
08-17 07:02:55.367 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_MOVE     -5
08-17 07:02:55.544 15756-15756/com.example.x.mycustomviews I/-------: onTouchEvent: ACTION_UP

为了更加直观，我用颜色标记了两者不同之处，现在我们来分析一下出现这种情况的原因。

· 分析

在ScrollView区域里左右滑动时，发现onTouchEvnet()事件居然没ACTION_DOWN，也就意味了我们标记不到onTouchEvnet()起始的x坐标，那么它将沿用onInterceptTouchEvent()保留下来的x坐标。所以，我们在滑动一瞬间才会看到瞬间移动的效果，这是因为scrollBy(dy,0);中的dy已经被onInterceptTouchEvent()的值替代，由于这个值可能非常大（手指位置决定），这将造成突然的瞬间移动到手指点击的那里。

· 解决方法

我们修改onTouchEvnet()的ACTION_MOVE事件的部分代码，代码修改结果如下：

            case MotionEvent.ACTION_MOVE:
                startX = firstX;
                endX = x;

                if (count == 0) {
                    count++;
                } else {
                    int dx = lastX - x;
                    scrollBy(dx, getScrollY());
                }
                lastX = x;
                break;

首先定义一个count数值，这个做法是屏蔽掉第一次增大的效果，因为后面的移动都是正常的。那么，我们来看看效果如何？

· 另一种方式实现

经过测试，我们的代码已经实现了，不会出现瞬间移动的情况。当然，这是我个人的做法，其实我们还可以用GestureDetector，那么我们的代码将改为这样：

/**
 * @Created by xww.
 * @Creation time 2018/8/13.
 */

public class MyViewPager extends ViewGroup {

    private int currentIndex;
    private int startX;
    private int endX;
    private Scroller mScroller;
    private int lastX;
    private int distanceX, distanceY;
    private int firstX, firstY;

    private GestureDetector gestureDetector;

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);

        gestureDetector = new GestureDetector(getContext(), new GestureDetector.OnGestureListener() {
            @Override
            public boolean onDown(MotionEvent e) {
                return false;
            }

            @Override
            public void onShowPress(MotionEvent e) {

            }

            @Override
            public boolean onSingleTapUp(MotionEvent e) {
                return false;
            }

            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                scrollBy((int) distanceX, getScrollY());
                return true;
            }

            @Override
            public void onLongPress(MotionEvent e) {

            }

            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                return false;
            }
        });
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            //对于每个子View进行布局
            View childView = getChildAt(i);
            childView.layout(i * getWidth(), t, (i + 1) * getWidth(), b);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0; i < getChildCount(); i++) {
            View view = getChildAt(i);
            view.measure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        gestureDetector.onTouchEvent(event);
        int x = (int) event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = x;
                break;
            case MotionEvent.ACTION_MOVE:
                endX = x;
                break;
            case MotionEvent.ACTION_UP:
                int tempIndex = currentIndex;
                if (startX - endX > getWidth() / 2) {    //从右往左滑动
                    tempIndex++;
                } else if (endX - startX > getWidth() / 2) {    //从左往右滑动
                    tempIndex--;
                }
                scrollIndex(tempIndex);
                break;
        }
        return true;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        gestureDetector.onTouchEvent(ev);
        boolean isIntercept = false;
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                firstX = x;
                firstY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                distanceX = Math.abs(x - firstX);
                distanceY = Math.abs(y - firstY);
                if (distanceX >= distanceY) {
                    isIntercept = true;
                } else {
                    scrollIndex(currentIndex);
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return isIntercept;
    }

    /**
     * 移动到指定页面
     */
    private void scrollIndex(int tempIndex) {
        //第一页，无法继续向左滑动
        if (tempIndex < 0) {
            tempIndex = 0;
        }
        //同理，最后一页无法向右滑动
        if (tempIndex > getChildCount() - 1) {
            tempIndex = getChildCount() - 1;
        }
        currentIndex = tempIndex;
        mScroller.startScroll(getScrollX(), 0, currentIndex * getWidth() - getScrollX(), 0);
        postInvalidate();
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), 0);
            postInvalidate();
        }
    }
}

那么，实现效果也是如出一辙，我们也看看它的效果吧

©版权所有：https://blog.csdn.net/smile_Running/article/details/81780913