最近在进行混合开发过程中,用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; } });这样基本就可以了。
新闻热点
疑难解答