最近在做个混合app , 用html做页面，然后通过webview嵌套在activity中，效果是这样：
开始还是比较顺利，增加了菜单退出按钮，返回键页面回退功能，页面加载显示加载图标（在app端实现，本来是为了增强用户体验，在页面加载的时候可以显示一个转动的图标，但是到了最后，这个功能反而成了影响用户体验的鸡肋， 因为页面中有很多图片， 每次页面显示出来后，图片还没加载完毕，所以加载图标一直在那里转动，影响了用户浏览页面，最后将此功能删除了）。
以上基本具备了混合app的雏形，可以拿出来忽悠一下客户了。
但是本着追求完美，不断创新的自虐精神，我又想在app上增加左右滑动可使页面前进和倒退的功能。其实在app上实现这些不难，在webview加载一个监听器，监听左右滑动事件，然后调用webview的 goback() 和 goForward就欧了，自己重载一个webview就可以实现，代码如下
public class cbWebView extends WebView {
private GestureDetector gestureDetector;
private Context cb;
public cbWebView(Context context) {
super(context);
cb = context;
gestureDetector = new GestureDetector(this.getContext(),
onGestureListener);
}
public cbWebView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
cb = context;
gestureDetector = new GestureDetector(this.getContext(),
onGestureListener);
}
public cbWebView(Context context, AttributeSet attrs) {
super(context, attrs);
cb = context;
gestureDetector = new GestureDetector(this.getContext(),
onGestureListener);
}
// 重载滑动事件
@Override
public boolean onTouchEvent(MotionEvent evt) {
gestureDetector.onTouchEvent(evt);
return super.onTouchEvent(evt);
}
private GestureDetector.OnGestureListener onGestureListener = new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
float x = e2.getX() - e1.getX();
float y = e2.getY() - e1.getY();
if (x > 100) {
// 右滑 事件
Toast.makeText(cb, "右滑动2", Toast.LENGTH_LONG).show();
cbWebView.this.goBack();
} else if (x < -100) {
// 左滑事件
Toast.makeText(cb, "左滑动2", Toast.LENGTH_LONG).show();
cbWebView.this.goForward();
}
return true;
}
};
}
之后坑爹的问题来了，因为页面中有个轮播图片，也是通过左右滑动切换图片，这就造成了，我滑动轮播图片的时候，也会触发webview的左右滑动事件，这可玩大了，本来只想滑动一下轮播图片，结果跳到了另外的一个页面......
我想造成这个问题的原因是，在html中的滑动事件，顺利的传送到了webview上。 我在网上查了很多资料，一直也没有好的解决办法，http://www.eoeandroid.com/thread-313541-1-1.html 这哥们碰到和我类似的问题，到目前也还没解决。但是这个问题肯定是可以解决的， 我下载了几个浏览器，UCWEB 、qq浏览器、360浏览器可以实现滑动切换页面，并且不与html中的touch事件冲突，android自带浏览器和遨游浏览器没有实现左右滑动切换功能。也许UCweb 这些浏览器没有使用webkit内核，也可能有什么其他高明的解决办法我们不知道。
但是不实现这个功能，总是不甘心，于是我又在baidu上一顿乱找，无意间看到这篇文章让我灵光一现
http://blog.csdn.net/wangtingshuai/article/details/8635787 这篇文章讲的是 ”响应webview中的图片点击事件“，我好像找到了救命稻草，既然能够响应点击事件，那肯定也可以响应 ontouch事件，我只需要在轮播图片的touch事件中关闭webview的滑动响应就可以了（不要告诉我你不知道js与webview怎么通信， 网上教程有很多，自己看去）。
文章中的代码
// 注入js函数监听
private void addImageClickListner() {
// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
contentWebView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.imagelistner.openImage(this.src); " +
" } " +
"}" +
"})()");
}
经过改装后：
// 注入js函数监听
private void addImageClickListner() {
// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
mWebView.loadUrl("javascript:(function(){"
+ "var objs = $('.swiper-container'); " //轮播图片的div容器，
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].ontouchmove=function() " + " { "
+ " window.imagelistner.closetouch(); "
+ " return false; } "
+ "}" + "var objs = $('body'); " //点击任何地方 ， 系统开始可以接受滚动
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].ontouchstart=function() " + " { "
+ " window.imagelistner.opentouch(); "
+ " return false; } "
+ "}" + "})()");
}
经过一番折，腾终于不负众望，达到了预期目标。 这里也有一个小瑕疵， "var objs = $('.swiper-container'); " 在js注入时指定了轮播的div ，缺少通用性。
目前只能做到这一步 ，这是我解决此类问题的一个另类思路，如果有更好的方法，还请高人告知，不甚感激！