View的滑动冲突及解决方案

当父容器和子元素都可以滑动时,就会产生滑动冲突,比如ScrollView里面套一个ListView或者GridView,或者ListView中嵌套了ViewPager等等。

常见的滑动冲突场景有以下几种:

  • 外部ViewGroup的滑动方向和内部元素滑动方向不一致
  • 外部滑动方向和内部滑动方法一致
  • 以上两种情况的嵌套

第一种场景比如讲ViewPager和Fragment配置使用所组成的页面滑动效果。这种效果通过左右滑动来切换页面,而每个页面的内部往往又是一个竖直滑动的ListView,本来这种情况是有滑动冲突的,但是ViewPager内部处理了这种冲突。如果才使用ScrollView而不是ViewPager,那么我们就必须手动来处理滑动冲突了,否则出现的后果就是内外两层只有一层能够滑动,

第二种场景当内外两层在同一方向滑动时,如果手指触摸开始滑动,但是系统无法知道到底要让哪一层滑动,所以会出现这时候会出问题。

滑动冲突的处理规则

对于场景1的处理规则:当手指左右滑动时,需要让外部的元素拦截点击事件,当手指上下滑动时,需要让内部的元素拦截点击事件,这时候就可以根据元素的特性来解决冲突问题。具体一点就是根据滑动方向的不同来判断到底由谁来拦截事件。如果是斜着滑动的,那我们可以计算出两点之间的水平距离和竖直距离,距离较大的那个方向判定为滑动方向,然后决定是拦截对应的元素。

对于场景2和场景3的处理规则:这种情况无法根据滑动的角度距离差等因素来判断。但是我们可以根据不同的状态来决定滑动哪个元素。

解决滑动冲突的方法:

拦截父容器

外部拦截是指所有的点击事件都先经过父容器的拦截处理,如果父容器需要这个事件就拦截,不需要就不拦截。外部拦截需要重写父容器的onInterceptTouchEvent方法。

public boolean onInterceotTouchEvent(MotionEvent event) {
    
    boolean intercepted = false;
    int x = (int) event.getX();
    int y = (int) evnet.getY();

    switch(event.getAction) {

        case MotionEvent.ACTION_DOWN:
            intercepted = false;
            break;

        case MotionEvent.ACTION_MOVE:

            if (父容器是否需要处理当前点击事件) {

                intercepted = true;
            } else {
                intercepted = false;
            }

            break;

        case MotionEvent.ACTION_UP:

            intercepted = false;
            break;
    }

    mLastX = x;
    mLastY = y;
    return intercepted;

}

以上就是外部拦截的伪代码,在ACTION_DOWN事件中,父容器必须返回false,因为父容器一旦拦截了ACTION_DOWN事件,那么后续一系列的ACTION_MOVE和ACTION_UP事件都会直接交给父容器处理,此时事件就没办法再传递给子元素了,ACTION_UP一般也不需要拦截,本身也没多大意义,ACTION_MOVE根据需要来决定是否拦截。

拦截子控件

内部拦截是指父容器不拦截任何事件,所有的事件都交给子元素,如果子元素需要此事件就直接消耗,否则就交给父容器来处理,这种方法和Android中事件分发机制不一致,需要配合requestDisallowInterceptTouchEvent方法才能正常工作。内部拦截需要重写子元素的dispatchTouchEvent方法:

public boolean dispatchTouchEvent(MotionEvent event) {
    
    int x = (int) event.getX();
    int y = (int) evnet.getY();

    switch(event.getAction) {

        case MotionEvent.ACTION_DOWN:
            parent.requestDisallowInterceptTouchEvent(true);
            break;

        case MotionEvent.ACTION_MOVE:

            int deltaX = x - mLastX;
            int deltaY = y - mLastY;

            if (父容器需要此类点击事件) {
                parent.requestDisallowInterceptTouchEvent(false);
            }

            break;

        case MotionEvent.ACTION_UP:

            break;
    }

    mLastX = x;
    mLastY = y;
    return super.dispatchTouchEvent(evnet);

}

除了子元素需要做上述所示的修改外,父元素也要默认拦截除了ACTION_DOWN以外的其它事件,这样当子元素调用parent.requestDisallowInterceptTouchEvent(false);时父容器才能继续拦截所需要的事件。

之所以父容器不能拦截ACTION_DOWN,是因为ACTION_DOWN事件不受FLAG_DISALLOW_INTERCEPT这个标记位的影响,一旦父容器拦截了ACTION_DOWN,那么所有的事件都无法传递到子元素,,内部拦截就无效了。父容器要做的修改如下代码所示:

public boolean onInterceptTouchEvent(MotionEvent event) {
    if(evnet.getAction == MotionEvent.ACTION_DOWN) {
        return false;    
    } else {
        return true;
    }
}

接下来通过一个demo来分别实现通过外部拦截和内部拦截来解决滑动冲突。

我们先定义一个可以水平滑动的ViewGroup,其实就是仿ViewPager的功能,然后在里面添加若干个竖直滑动的ListView,这就模拟了一个典型的滑动冲突的场景。根据滑动策略,我们可以选择水平和竖直滑动距离差来解决滑动冲突。

public class CustomViewPager extends ViewGroup {

    private Scroller mScroller;
    private VelocityTracker mVelocityTracker;

    private int mChildWidth;// 子View的宽度
    private int mChildIndex;// 子View的位置索引
    private int mChildrenSize;// 子View个数

    private int mLastXIntercept = 0;
    private int mLastYIntercept = 0;

    private int mLastX = 0;
    private int mLastY = 0;


    public CustomViewPager(Context context) {
        this(context, null);
    }

    public CustomViewPager(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mScroller = new Scroller(getContext());
        mVelocityTracker = VelocityTracker.obtain();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean intercepted = false;
        int x = (int) ev.getX();
        int y = (int) ev.getY();

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                intercepted = false;
                if (!mScroller.isFinished()) {
                    // 如果父容器滑动没有结束,那么下一个事件仍然交给父容器来处理,
                    // 避免当父容器水平滑动没有结束时,用户立即竖直滑动,而造成界面停留在中间状态这个不好的体验。
                    mScroller.abortAnimation();
                    intercepted = true;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                int deltaX = x - mLastXIntercept;
                int deltaY = y - mLastYIntercept;

                if (Math.abs(deltaX) > Math.abs(deltaY)) {
                    // 表示水平滑动,父容器需要拦截
                    intercepted = true;
                } else {
                    intercepted = false;
                }
                break;
            case MotionEvent.ACTION_UP:
                intercepted = false;
                break;
        }
        mLastX = x;
        mLastY = y;
        mLastXIntercept = x;
        mLastYIntercept = y;

        return intercepted;
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mVelocityTracker.addMovement(event);

        int x = (int) event.getX();
        int y = (int) event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (!mScroller.isFinished()) {
                    mScroller.abortAnimation();
                }
                break;
            case MotionEvent.ACTION_MOVE:

                int deltaX = x - mLastX;
                int deltaY = y - mLastY;
                scrollBy(-deltaX, 0);

                break;
            case MotionEvent.ACTION_UP:

                int scrollX = getScrollX();

                mVelocityTracker.computeCurrentVelocity(1000);
                // 计算水平速度
                float xVelocity = mVelocityTracker.getXVelocity();
                // 这里了是模拟ViewPager快速滑动时,即使只滑动了一小段距离,也可以滑到下一页去
                if (Math.abs(xVelocity) >= 50) {
                    mChildIndex = xVelocity > 0 ? mChildIndex - 1 : mChildIndex + 1;
                } else {
                    mChildIndex = (scrollX + mChildWidth / 2) /mChildWidth;
                }
                mChildIndex = Math.max(0, Math.min(mChildIndex, mChildrenSize - 1));

                int dx = mChildIndex * mChildWidth - scrollX;

                mScroller.startScroll(getScrollX(), 0, dx, 0, 500);
                invalidate();

                mVelocityTracker.clear();

                break;
        }

        mLastX = x;
        mLastY = y;

        return true;
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measuredWidth = 0;
        int measuredHeight = 0;
        final int childCount = getChildCount();

        measureChildren(widthMeasureSpec, heightMeasureSpec);

        int widthSpaceSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpaceSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        if (childCount == 0) {
            setMeasuredDimension(0, 0);
        } else if (heightSpecMode == MeasureSpec.AT_MOST) {
            final View childView = getChildAt(0);
            measuredHeight = childView.getMeasuredHeight();
            setMeasuredDimension(widthSpaceSize, childView.getMeasuredHeight());
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            final View childView = getChildAt(0);
            measuredWidth = childView.getMeasuredWidth() * childCount;
            setMeasuredDimension(measuredWidth, heightSpaceSize);
        } else {
            final View childView = getChildAt(0);
            measuredWidth = childView.getMeasuredWidth() * childCount;
            measuredHeight = childView.getMeasuredHeight();
            setMeasuredDimension(measuredWidth, measuredHeight);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childLeft = 0;
        final int childCount = getChildCount();
        mChildrenSize = childCount;

        for (int i = 0; i < childCount; i++) {
            final View childView = getChildAt(i);
            if (childView.getVisibility() != View.GONE) {
                final int childWidth = childView.getMeasuredWidth();
                mChildWidth = childWidth;
                childView.layout(childLeft, 0, childLeft + childWidth, childView.getMeasuredHeight());
                childLeft += childWidth;
            }
        }
    }


    @Override
    protected void onDetachedFromWindow() {
        mVelocityTracker.recycle();
        super.onDetachedFromWindow();
    }


}

content_layout布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:textColor="@android:color/white" />

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff4f7f9"
        android:cacheColorHint="#00000000"
        android:divider="#dddbdb"
        android:dividerHeight="1px"
        android:listSelector="@android:color/transparent" />

</LinearLayout>

在Activity的layout中加入我们自定义的ViewGroup:

<com.shenhuniurou.viewdemo.CustomViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light">

</com.shenhuniurou.viewdemo.CustomViewPager>

Activity中的主要代码:

private void initView() {
    LayoutInflater inflater = getLayoutInflater();
    mListContainer = (CustomViewPager) findViewById(R.id.container);
    int screenWidth = MyUtils.getScreenMetrics(this).widthPixels;

    // 往ViewGroup中添加ListView,这里是把含有ListView的一整个布局加进去
    for (int i = 0; i < 5; i++) {
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.content_layout, mListContainer, false);
        layout.getLayoutParams().width = screenWidth;
        TextView textView = (TextView) layout.findViewById(R.id.title);
        textView.setText("这是第 " + (i + 1) + "页");
        layout.setBackgroundColor(Color.rgb(255 / (i + 10), 255 / (i + 10), 10));
        addListView(layout);
        mListContainer.addView(layout);
    }
}

private void addListView(ViewGroup layout) {
    ListView listView = (ListView) layout.findViewById(R.id.list);
    List<String> datas = new ArrayList<>();
    for (int i = 0; i < 50; i++) {
        datas.add("item " + i);
    }

    ArrayAdapter<String> adapter = new ArrayAdapter<>(this, R.layout.content_list_item, R.id.name, datas);
    listView.setAdapter(adapter);
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(MainActivity.this, "click item", Toast.LENGTH_SHORT).show();
        }
    });
}

效果如图:

拦截父容器解决滑动冲突效果示例

上面介绍了使用拦截父容器的方法,如果要从拦截子控件入手,又该怎么做呢?其实也很简单,原理就是上面所说的重写ListView的dispatchTouchEvent方法,让父容器拦截掉ACTION_MOVE事件,判断水平方向和竖直方向滑动的距离谁大,如果是水平方向滑动距离大,父容器就拦截MOVE事件。

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    int x = (int) event.getX();
    int y = (int) event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            // 让父容器不拦截ACTION_DOWN事件
            customViewPager.requestDisallowInterceptTouchEvent(true);
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            int deltaX = x - mLastX;
            int deltaY = y - mLastY;
            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                // 如果水平方向滑动的距离多一点,那就表示让父容器水平滑动,子控件不滑动,让父容器拦截事件
                customViewPager.requestDisallowInterceptTouchEvent(false);
            }
            break;
        }
        case MotionEvent.ACTION_UP: {
            break;
        }
        default:
            break;
    }

    mLastX = x;
    mLastY = y;
    return super.dispatchTouchEvent(event);
}

另外为了避免父容器水平方向滑动还未停止但用户立即开始竖直滑动时,父容器里面的子控件可能会停留在一个中间状态的情况,当水平方法还在滑动时,让父容器拦截事件去处理,所以这里还是要重写父容器的onInterceptTouchEvent方法:

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {

    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
        if (!mScroller.isFinished()) {
            mScroller.abortAnimation();
            return true;
        }
        return false;
    } else {
        return true;
    }
}

以上就是解决外部ViewGroup的滑动方向和内部元素滑动方向不一致这种场景的两种方法了。如果是内外元素滑动方向一致呢,又该怎么解决?

这种情况解决办法和上面的场景一样,只是滑动规则不同而已,比如当使用拦截父容器的方法时,就是在MOTIONEVENT.ACTION_MOVE事件中的判断条件不同,根据我们自己的需求来定制,看当前事件要交给父容器还是子元素来处理。也就是说上面那两段伪代码基本就是解决滑动冲突的通用方案了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容