JAVA高级面试进阶训练营视频教程

admin

最近在做个混合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.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.ontouchmove=function()  " + "    {  "
                + "        window.imagelistner.closetouch();  "
                + "   return false; }  " 
                + "}"

                + "var objs = $('body'); "  //点击任何地方 ， 系统开始可以接受滚动
                + "for(var i=0;i<objs.length;i++)  " + "{"
                + "    objs.ontouchstart=function()  " + "    {  "
                + "        window.imagelistner.opentouch();  "
                + "   return false; }  " 
                + "}" 
                
                + "})()");
    }

 

经过一番折，腾终于不负众望，达到了预期目标。 这里也有一个小瑕疵， "var objs = $('.swiper-container'); "  在js注入时指定了轮播的div ，缺少通用性。

目前只能做到这一步 ，这是我解决此类问题的一个另类思路，如果有更好的方法，还请高人告知，不甚感激！