如何解决 Android WebView 的手势问题：滑动导航与原生功能兼容

Android

2024-03-21 18:12:11

解决 Android WebView 手势问题：实现滑动导航，同时支持原生功能

问题

在 WebView 活动中实现向左和向右滑动的手势以进行导航，同时仍允许单击链接和垂直滚动。

问题原因

实施的代码导致 WebView 活动中的所有触摸事件都被截获，从而阻止了 WebView 的原生点击和滚动功能。

解决方法

为了解决此问题，我们需要一种方法来区分用于导航手势和 WebView 的原生功能的触摸事件。为此，可以使用一个额外的 onTouch() 方法来检测并处理原生 WebView 事件，然后将剩余的触摸事件传递给手势监听器。

代码实现

public class OnSwipeTouchListener implements OnTouchListener {

    private final GestureDetector gestureDetector = new GestureDetector(new GestureListener());
    private WebView webView;

    public OnSwipeTouchListener(WebView webView) {
        this.webView = webView;
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if (handleWebViewTouchEvent(motionEvent)) {
            return true;
        }
        return gestureDetector.onTouchEvent(motionEvent);
    }

    private boolean handleWebViewTouchEvent(MotionEvent motionEvent) {
        switch (motionEvent.getAction()) {
            case MotionEvent.ACTION_DOWN:
                webView.requestFocus();
                break;
            case MotionEvent.ACTION_MOVE:
                webView.onTouchEvent(motionEvent);
                break;
            case MotionEvent.ACTION_UP:
                webView.onTouchEvent(motionEvent);
                if (webView.getHitTestResult() != null) {
                    return true;
                }
                break;
        }
        return false;
    }

    private final class GestureListener extends SimpleOnGestureListener {

        private static final int SWIPE_THRESHOLD = 100;
        private static final int SWIPE_VELOCITY_THRESHOLD = 100;

        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            boolean result = false;
            try {
                float diffY = e2.getY() - e1.getY();
                float diffX = e2.getX() - e1.getX();
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffX > 0) {
                            onSwipeRight();
                        } else {
                            onSwipeLeft();
                        }
                    }
                }
            } catch (Exception exception) {
                exception.printStackTrace();
            }
            return result;
        }
    }

    public void onSwipeRight() {
    }

    public void onSwipeLeft() {
    }
}

更新 WebView 活动

在 WebView 活动中，将 OnTouchListener 设置为 WebView：

public class WebViewActivity extends Activity {

    private WebView browser;
    private OnSwipeTouchListener onSwipeTouchListener;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        browser = findViewById(R.id.webView);
        onSwipeTouchListener = new OnSwipeTouchListener(browser);
        browser.setOnTouchListener(onSwipeTouchListener);
    }
}