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

忘是亡心i 2022-04-04 04:40 425阅读 0赞

### 主要内容 ###

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

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

原因有三：

1.  我目前项目的图片大小不一，有的很大（2256*1080）,有的很小（36*36）,在做图片适配的时候不太好实现（是我目前水平不够吧），为了能完成项目的需求，只能先实现效果先。
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);
                }
            }
        }

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

[image.png]: /images/20220404/ef03c50a462145b0a703a99916df8b18.png