Android 用 Webview 显示网络图片跳坑指南

主要内容

1. 使用WebView加载网络图片
2. WebView加载图片的点击事件

系统的ImageView控件本就是用来显示图片的，那为什么还使用WebView控件去显示呢？

原因有三：

1. 我目前项目的图片大小不一，有的很大（22561080）,有的很小（3636）,在做图片适配的时候不太好实现（是我目前水平不够吧），为了能完成项目的需求，只能先实现效果先。
2. ImageView本身的scaleType属性不能实现效果。
   image.png
3. 我目前项目使用的图片加载库是Glide，在Glide的现有API中使用的效果和项目效果有差别，没有时间深入研究。

我也是在搜索了网络图片适配看到其他博客的介绍，才想到用WebView去加载图片。这里只是实现的一种方式，在具体项目中能用ImageView加载的图片最好还是用ImageView免得又出什么新`Bug。废话不多说了，show me the f**k code。

使用WebView加载网络图片

WebView webView = new WebView(activity);
//支持javascript
webView.getSettings().setJavaScriptEnabled(false);
// 设置可以支持缩放
webView.getSettings().setSupportZoom(false);
// 设置出现缩放工具
webView.getSettings().setBuiltInZoomControls(false);

//自适应屏幕
webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

// 设置滚动条不显示
webView.setHorizontalScrollBarEnabled(false);
webView.setVerticalScrollBarEnabled(false);

// 设置网络图片
webView.loadUrl(images.get(i));

// 这里是将 new 出来的 webview 收集，在不使用的时候统一清空
webViews.add(webView);

// 设置间距
LinearLayout.LayoutParams lineParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);            
lineParams.setMargins(0, DensityUtil.dp2px(10),0,0);            
webView.setLayoutParams(lineParams);            
layoutImage.addView(webView);         

WebView加载图片的点击事件

 final int finalI = i;
webView.setOnTouchListener(new View.OnTouchListener() {

      @Override
      public boolean onTouch(View v, MotionEvent event) {
              switch (event.getAction()) {
              case MotionEvent.ACTION_DOWN:
                    DownX = event.getX();//float DownX
                    DownY = event.getY();//float DownY
                    moveX = 0;
                    moveY = 0;
                    currentMS = System.currentTimeMillis();//long currentMS     获取系统时间
                    break;
              case MotionEvent.ACTION_MOVE:
                    moveX += Math.abs(event.getX() - DownX);//X轴距离
                    moveY += Math.abs(event.getY() - DownY);//y轴距离
                    DownX = event.getX();
                    DownY = event.getY();
                    break;
              case MotionEvent.ACTION_UP:
                    long moveTime = System.currentTimeMillis() - currentMS;//移动时间

                    // 这里的 55 和 250 是测试的时候取的值（这样做不太好，有1/10 的可能时候会误操作，有更好解决办法想能留言回复我，多谢了~）
                    if( moveTime > 55 && moveTime < 250 && ( moveX == 0.0 || moveY == 0.0 )){
                             // 处理点击事件
                             return true;
                    }
                    break;
              default:
                    break;
             }
        return false;
     }
 });

清空，防止内存泄漏

使用 Webview 是有内存泄露风险的，所以在不使用的时候要及时置空。

    /**
     * 在 onDestory 中移除 webview 防止内存泄漏
     */
    public void removeWebView() {
        for (int i = 0; i < webViews.size(); i++) {
            WebView webView = webViews.get(i);
            if (webView != null){
                webView.removeAllViews();
                webView.destroy();
                webView.setVisibility(View.GONE);
            }
        }
    }

本文完~，欢迎留言一起进步。