Android Viewpager与WebView轮播滑动冲突的解决方案

最新推荐文章于 2023-05-31 17:22:05 发布

原创最新推荐文章于 2023-05-31 17:22:05 发布 · 6.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #webview #javascript

Android 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了解决WebView中的轮播控件与ViewPager滑动冲突的问题。通过网页与Android端配合，利用JS接口获取轮播控件位置，再通过自定义OnTouchListener处理WebView的Touch事件，最终实现WebView轮播正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在进行混合开发过程中，用viewpager+fragment的方式在基本框架，在里面fragment中包含webview，而在webview中存在一个横屏轮播的控件，导致在执行webview轮播滑动时，会触发viewpager的滑动，导致webview的轮播失效，经过一番对该问题的搜索和实践，最后将问题解决。该方法需要网页与Android两端配合使用。

解决的方法：

首先需要在网页端写js接口，获取轮播控件的宽高以及相对于原点的位置，获取轮播宽高的坐标的实际也比较重要，需要在页面刚加载获取一次，现在轮播控件的宽高，并且调起写好的js调Android的方法，同时也需要Android端定义好对应的接口，并且在上下滑动的时候也需要去计算现在轮播控件的宽高，并且给Android端发送过去。

由于我主要开发的Android端，所以不知道网页端js的代码，如有需要自行查找：

window.onload = function(){ ... } window.onscroll = function(){ ... }

在Android端的主要代码：

首先需要定义一个类来接收js接口返回的坐标值

public class PagerDesc {
    private int top;
    private int left;
    private int right;
    private int bottom;

    //get set方法

    public PagerDesc(int top, int left, int right, int bottom) {
        this.top = top;
        this.bottom = bottom;
    }
}

定义js接口，用PagerDesc类来接收返回的原点坐标和宽高值

当解决完以上的内容，接下来是根据Android的机制来进行在webview的onTouch事件进行处理

详细代码：

webView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    //获取y轴坐标
                    float y = event.getRawY();
                    switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                            if (null != mPagerDesc) {
                                int top = mPagerDesc.getTop();
                                int bottom = top + (mPagerDesc.getBottom() - mPagerDesc.getTop());
                                //将css像素转换为android设备像素并考虑通知栏高度
                                DisplayMetrics metric = context.getResources().getDisplayMetrics();
                                top = (int) (top * metric.density) + ScreenUtil.getStatusBarHeight(getActivity());
                                bottom = (int) (bottom * metric.density) + ScreenUtil.getStatusBarHeight(getActivity());
                                //如果触摸点的坐标在轮播区域内，则由webview来处理事件，否则由viewpager来处理
                                if (y > top&& y<bottom){
                                    webView.requestDisallowInterceptTouchEvent(true);
                                }else{
                                    webView.requestDisallowInterceptTouchEvent(false);
                                }
                            } break;
                        case MotionEvent.ACTION_UP:
                            break;
                        case MotionEvent.ACTION_MOVE:
                            break;
                    }
                    return false;
                }
            });

这样基本就可以了。