简单解决ScrollView 与 WebView 的冲突
上一篇,简单叙述了一下对应的想法
这篇也只是选读,没有太多实在意义,只是叙述一下对应的解决过程
这里简单录制gif,好理解一点
前提描述
这里就一个简单的ScrollView中,包含一个自定义的WebView
WebView什么都没有做,也只是正常的,空的WebView
我们通过修改MyWebView,来理解对应的事件分发

而具体的实现,
写了一个 内部枚举类 的enum DoType
分别有4种情况
这个时候,通过传入枚举类型,来调用对应的实现。
而调用,只是简单在 @Override 的 onInterceptTouchEvent 方法中设置

其实,对应的实现
也只是简单的调用了对应的方法而已(这里为了说明顺序,只是用0123这样的名字,所以就没有按意义给方法命名)

0. ScrollView 与 WebView 的冲突
上一篇已经分析和叙述了冲突的原因,具体原因可以看上一篇
这里只是简单描述外部的现象
我们先看一下
doSth(DoType.noting0, ev);
的情况,
这个时候,我们是什么都没有做的

我们看一下对应的现象

我们可以发现,对应的MyWebView,只是做了显示作用
里面是不能进行滑动的
无论怎么操作,都只是外面的ScrollView拿到和消费了事件
1. 简单解决冲突
这个时候,我们的目标是,
- 在操作MyWebView的时候,控制MyWebView
- 操作外面的时候,控制控制ScrollView
这个时候,我们调用
doSth(DoType.Disallow1, ev);
也就是直接调用 this.requestDisallowInterceptTouchEvent(true);

我们来看一下效果

这样我们就可以让这2个控件和谐的相处了
2. 让WebView处理,但是最底端的时候由ScrollView处理
但是,如果上面的MyWebView太大,
占据了整个屏幕
(其实一般是不会发生这种情况的,通常这样解决就可以了,这里只是说明另一种实现)
我们最好可以通过判断是否在最底端了,
在最底端的时候,让外面的ScrollView进行滑动
这个时候,我们调用
doSth(DoType.DisallowEnd2, ev);
也就是

通过计算,来判断是否到最低端了
最底端设置false,不让WebView处理
否则,和上面一样,由WebView处理
我们可以看见对应的效果

3. 让WebView处理,但是最底端,最顶端由ScrollView处理
我们看见上面这里,解决了在WebView中,拉到底部以后
可以继续下拉的情况
但是,当拉到底部以后,发现当我们上拉的时候,还是ScrollView在处理
我们其实想达到的目标是:
- 到底部以后,如果是下拉,则ScrollView处理
- 到底部以后,如果是上拉,则WebView处理
同时,我也要考虑到,到达顶部以后:
- 到顶部以后, 如果是下拉, 则WebView处理
- 到顶部以后, 如果是上拉,则ScrollView处理
这里自己没有参考过别人的代码,可能处理的时候有点麻烦,仅供参考
- 自己写一个内部类,记录对应的位置,状态等
- X,Y的位置, 是向上还是向下, 是向左还是向右,是否在滑动
这样,每次触发会去对比前一个事件,来确定是对应的操作类型
再根据对应的类型,做对应的处理
(这里就不贴代码了, 可以参考https://github.com/2954722256/demo_event中 disallowintercept 的 Module)
这里贴一下效果
这里可能第一次触发的时候,会稍微卡顿一下,因为只是简单理解,就不去处理了,有兴趣可以解决一下这个小bug

参考代码
这里只是简单理解,代码没有太多实用的地方
如果要了解具体代码
可以参考https://github.com/2954722256/demo_event中 disallowintercept 的 Module
网友评论