Android webview:阻止将触摸手势传递给父viewpager

时间:2013-10-25 05:29:55

标签: android html webview android-viewpager swipe

我有一个包含许多子视图的viewpager;每个子视图都是一个webview。每个webview都有一些用户可以与之交互的HTML对象;例如,可以在滑动手势或可拖动的圆圈上工作的幻灯片,用户可以在HTML画布上移动。

问题是当用户对这些HTML对象执行手势时,viewpager会滚动到下一个视图。我希望HTML对象在用户与它们交互时起作用(viewpager不滚动),并且当用户在其他地方滑动时,viewpager会滚动。我怎么能这样做?

Webviews inside Viewpager

P.S。我在HTML幻灯片的JavaScript中使用了event.preventDefault()event.stopPropagation(),希望webview不会将触摸事件传递给父查看器。

3 个答案:

答案 0 :(得分:3)

覆盖"canScroll"的{​​{1}}方法,仅当视图不是ViewPager的实例时才允许滚动。

样品:

WebView

答案 1 :(得分:3)

我的想法是实现一个Javascript函数来决定要滚动的部分:

function checkScroll(x, y){
    var o = document.elementFromPoint(x, y);
    result = $('div.swiper-container').find(o).length;
    MyAndroidInterface.processReturnValue(result);
}

然后覆盖这两个方法:

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    @Override
public boolean onTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
    case MotionEvent.ACTION_DOWN:
        homepage.callJavascript("checkScroll(" + Math.round(ev.getX()) + "," + Math.round(ev.getY()) + ")");
        return super.onTouchEvent(ev);
    case MotionEvent.ACTION_MOVE:
        if (homepage.scrollSlideshowLock())
            return false;

答案 2 :(得分:2)

创建自己的ViewPager子类,并按如下方式覆盖canScroll。

class MyViewPager extends ViewPager {
...

@Override
protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
    if (isInsideSlideShow(x,y)) {
        return true; // allow the slide show its own scrolling
    } else {
        return false; // ViewPager scrolls
    }
}

你当然需要知道,幻灯片放映了屏幕的哪一部分。 必须在方法isInsideSlideShow。

中实现此知识

如果您无法掌握幻灯片放映的x / y坐标,另一种解决方案可能是使用从视图边界开始的手势作为分页手势和手势在内部区域开始更多幻灯片放映手势。

我将此方法用于显示地图和图表的视图寻呼机。两者都支持他们自己的平移。但是当用户在左边框或右边框处开始手势时,整个地图或图形都会滑落:

@Override
protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
        int width = getWidth();
        int slideWidth = Math.round(width * 0.15f);
        if (x < slideWidth || x > width - slideWidth) {
            return false;
        }
        return true;
}