在开发过程中你可能会遇到这样一种情况。端里面使用ViewPager嵌套了多个WebView页面,同时某一个WebView中的页面元素需要响应TouchMove事件。正如下图所示的情景:

这时你就会发现上层(ViewPager)阻断了下层(WebView)接收TouchMove事件,即使你的WebView在TouchDown时返回true也无效,因为上层直接使用了onInterceptTouchEvent对后续的TouchMove进行了拦截。针对这个问题的解决,简单做法是在重写WebView onTouchEvent方法,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@Override
public
boolean
onTouchEvent(MotionEvent ev) {
boolean ret =
super.onTouchEvent(ev);
if (mPreventParentTouch) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
requestDisallowInterceptTouchEvent(
true);
ret =
true;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
requestDisallowInterceptTouchEvent(
false);
mPreventParentTouch =
false;
break;
}
}
return ret;
}
public
void
preventParentTouchEvent () {
mPreventParentTouch =
true;
}
|
代码控制的关键在于mPreventParentTouch这个变量,mPreventParentTouch默认为false,当用户touchdown页面元素时通知该WebView将mPreventParentTouch设置为true。示意代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type=
"text/javascript">
document.getElementById(
"targetEle").addEventListener(
"touchstart",
function(ev) {
HostApp.preventParentTouchEvent();
}
);
document.getElementById(
"targetEle").addEventListener(
"touchmove",
function(ev) {
}
);
</script>
|
关于web页面如何通知WebView(即调用Java方法)请参看Android WebView开发问题及优化汇总第8条。
刚提到了上面是一种简单的做法,并不能很好的解决手指滑动过快带来的误操作问题,即当用户快速地滑动时,还是有一定机率会出现ViewPager拦截TouchMove事件而发生了Tab切换而非页面元素做出了响应。要完美解决此问题,就要用到稍微复杂一点的方法(仅是整体消息传递流程复杂一点)。
首先假设在ViewPager之上还有一个父元素叫做ParentViewOnViewPager,当我们接收到页面preventParentTouchEvent通知时就先于ViewPager而进行拦截。如下:
ParentViewOnViewPager.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
public
class ParentViewOnViewPager extends FrameLayout {
private MineWebView mDispatchWebView;
public
void
preventParentTouchEvent (WebView view) {
mDispatchWebView = (MineWebView)view;
}
@Override
public
boolean
onInterceptTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_MOVE && mDispatchWebView !=
null) {
mDispatchWebView.ignoreTouchCancel(
true);
return
true;
}
return
false;
}
@Override
public
boolean
onTouchEvent(MotionEvent ev) {
if (mDispatchWebView !=
null){
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
mDispatchWebView.onTouchEvent(ev);
break;
default:
mDispatchWebView.ignoreTouchCancel(
false);
mDispatchWebView.onTouchEvent(ev);
mDispatchWebView =
null;
break;
}
return
true;
}
return
super.onTouchEvent(ev);
}
}
|
即当ParentViewOnViewPager接收到通知时,发起TouchEvent拦截,将拦截到的Touch事件转嫁到装载页面的mDispatchWebView进行事件派发。这样就直接跳过了ViewPager这一层。这里需要注意的是当ParentViewOnViewPager发起拦截时,WebView会接收到一个TouchCancel事件,WebView应该忽略这个事件,以避免页面接收到这个事件而打断整个处理流程。如下代码所示:
MineWebView.java
1
2
3
4
5
6
7
8
9
10
11
12
|
public
class MineWebView extends WebView {
boolean mIgnoreTouchCancel;
public
void
ignoreTouchCancel (
boolean val) {
mIgnoreTouchCancel = val;
}
@Override
public
boolean
onTouchEvent(MotionEvent ev) {
return ev.getAction() == MotionEvent.ACTION_CANCEL && mIgnoreTouchCancel ||
super.onTouchEvent(ev);
}
}
|