Android webview：防止将触摸手势传递给父viewpager

Question

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

问题是当用户对这些 HTML 对象执行手势时，viewpager 会滚动到下一个视图。我希望 HTML 对象在用户与它们交互时工作（viewpager 不滚动），并且当用户在其他地方滑动时 viewpager 滚动。我该怎么做？

附：我在 HTML 幻灯片的 JavaScript 中使用了 event.preventDefault() 和 event.stopPropagation()，希望 webview 不会将触摸事件传递给父 viewpager。

Answer 1

覆盖ViewPager 的"canScroll" 方法，仅当视图不是WebView 的实例时才允许滚动。

示例：

public class MyViewPager extends ViewPager {

    public MyViewPager (Context context) {
        super(context);
    }

    public MyViewPager (Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
        if(v instanceof WebView){
            return true;
        }
        return super.canScroll(v, checkV, dx, x, y);
    }

}

Answer 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;
}

Answer 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;