Android 点击WebView图片预览图片

1. 概述

在实际开发中，我们可能会遇到用webview去展示一篇文章或者其他内容，然后我们需要点击里面的图片能够展示出来，这就是我们今天的重点–点击webview的图片进行展示。先看一个效果图。

2.流程分析

1.用webview加载文章；
2.点击图片某个图片获取当前图片的url和所有图片的url；
3.将所有图片用ViewPager展示出来。

3.代码实现

3.1 添加权限：

<uses-permission android:name="android.permission.INTERNET" />


3.2 添加依赖：

implementation 'com.github.bumptech.glide:glide:4.7.1'

3.3 代码实现：

先看MainActivity的代码：

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.wv_webview);
        initWebConfig();
        webView.loadUrl("http://m.pocoimg.cn/works/works_detail?works_id=20001630&app_blog=1");

    }

    private void initWebConfig() {
        webView.addJavascriptInterface(new MJavascriptInterface(this), "imagelistener");//将js对象与java对象进行映射
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);//设置java与js交互
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setDisplayZoomControls(false);
        webSettings.setDefaultTextEncodingName("utf-8");
        webSettings.setDomStorageEnabled(true);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }


            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                addImageClickListener(view);//待网页加载完全后设置图片点击的监听方法
            }
        });
    }

    /**
     * 设置图片点击事件
     *
     * @param webView
     */
    private void addImageClickListener(WebView webView) {
        //"cc_detail_blog_img"这个ClassName和前端对应的，前端那边不能修改，对应的是img的ClassName
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByClassName(\"cc_detail_blog_img\"); " +
                " var array=new Array(); " + " for(var j=0;j<objs.length;j++){ " + "array[j]=objs[j].src;" + " }  " +
                "for(var i=0;i<objs.length;i++)  " +
                "{" +
                "  objs[i].onclick=function()  " +
                "  {  " +
                "    window.imagelistener.openImage(this.src,array);  " +
                "  }  " +
                "}" +
                "})()");
    }
}

从代码里面可以看出主要是做了webview的初始化，并在onPageFinished回调方法添加了图片的点击事件。

addImageClickListener的代码实现很简单，通过js找到相应的所有的img，然后为这些图片设置点击监听事件——>每当点击时调用自定义的openImage(url)方法。这个openImage(this.src,array)方法与MJavascriptInterface中对应的方法交相辉映，这样就形成了js调用本地的方法。

再看看MJavascriptInterface代码（主要为与js对应的本地方法的实现）

public class MJavascriptInterface {
    private Activity context;
    private static final String TAG="SIMON";
    public MJavascriptInterface(Activity context) {
        this.context = context;
    }

    @android.webkit.JavascriptInterface //必须添加
    public void openImage(String img, String[] array) {
        Log.i(TAG, "openImage: "+img);
        for (String imgUrl:array){
            Log.i(TAG, "openImage: "+imgUrl);
        }
        Intent intent = new Intent(context, ViewPhotoActivity.class);
        intent.putExtra("imageUrls", array);
        intent.putExtra("curImg", img);
        context.startActivity(intent);
    }
}

最后在另外一个activity用ViewPager展示出来，比较简单。

特别注意：项目中暴露的js接口类：MJavascriptInterface不能混淆，其调用的方法的声明也不能混淆！

最后附上gayhub的地址：github地址 ！