Android开发中实现点击Webview中的图片调用原生组件进行展示

去年有一段时间工作不忙，闲暇之余就自己做了一个阅读类的应用——《知豆了》，这个应用很简单，就是通过fiddler抓取豆瓣一刻，知乎日报，一个，每日一文和国家地理等应用的网络APi，并分析他们的数据，然后将数据应用到自己的应用中去。
应用截图：

（文章列表）

（文章详情）

（图片浏览）

做什么？

其实要做的很简单，我们可以看到图1是文章列表，这里的数据是豆瓣一刻的Api返回的Json数据，通过解析该数据就可以得到一个图文混排的列表数据内容，之后再利用ListView的Adapter的getItemViewType方法实现三种不同的item混合调用即可。
之后，图2是点击进某个文章后看到的数据内容，这部分内容是Html数据，这个数据有Html代码也有css代码，利用的就是WebView来加载网页的方式达到快速的实现图文混排的目的，用原生的Android组件是没办法很快速很完美的实现这个效果的，所以这是最快的解决方案，但是这个方案就带来了一个问题，那就是如果我想收藏或者单独浏览这个网页中的某张图片便会很困难，因为无法快速的将图片数据加载到原生的Android组件中去，于是便要想办法，让Android原生与Html进行交互，从而达到我们的目的。
其实说到底，我们只要在用户点击图片的时候获得这个图片的Url然后将Url告诉我们的安卓图片组件就可以了，前一步有过web开发经验的朋友应该都很容易想到，只要利用JavaScript的onClick监听就可以轻松实现获取图片Url的效果，但是如何将获得Url告诉Android组件，则需要用到Android与JavaScript交互的相关知识了。

怎么做？

因为用到了WebView，那么话不多说了，直接要在Activity中初始化WebView组件才是正事：

mWebView=(WebView) this.findViewById(R.id.news_detail_webView);

之后再对WebView进行初始化设置：

mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
     mWebView.getSettings().setJavaScriptEnabled(true);  
     mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);  
     mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //设置 缓存模式  
     // 开启 DOM storage API 功能  
     mWebView.getSettings().setDomStorageEnabled(true);  
     //开启 database storage API 功能  
     mWebView.getSettings().setDatabaseEnabled(true);   
     //开启 Application Caches 功能  
     mWebView.getSettings().setAppCacheEnabled(true);  
     mWebView.getSettings().setBlockNetworkImage(false);
     mWebView.getSettings().setLoadsImagesAutomatically(true); //自动加载图片 
     mWebView.getSettings().setPluginState(PluginState.OFF);
     
     DisplayMetrics metrics = new DisplayMetrics();
     getWindowManager().getDefaultDisplay().getMetrics(metrics);

设置的具体内容看代码都能看懂，注意一定要加上setJavaScriptEnabled(true);这个设置，不然的话JavaScript在WebView中都不起作用，还谈什么交互呢？
然后在Oncreate方法中继续加入如下两行代码：

mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");  
mWebView.setWebViewClient(new MyWebViewClient());

注意了，这两行代码就是Android与JavaScript交互的关键。
我们先看第一行代码：

mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”);

这行代码的意思就是，给WebView组件加上javaScript的接口，至于接口的内容是什么，接口叫什么名字，方法中的两个参数就是了。

先看第一个参数，看到可以new就应该知道，这个应该是一个类了，你可以把这个类写成一个内部类，也可以把它提取成一个独立的类，现在来看看这个类的内容：

// js通信接口
		public class JavascriptInterface {

			private Context context;

			public JavascriptInterface(Context context) {
				this.context = context;
			}

			public void openImage(String img) {
				//
				Intent intent = new Intent();
				intent.putExtra("image", img);
				intent.setClass(context, ShowWebImageActivity.class);
				context.startActivity(intent);
			}
		}

这段代码就是用来实现程序在点击后应该执行什么操作的，看代码可以知道，我是将得到的图片路径当作参数传递给ShowWebImageActivity的，这个Activity负责的就是根据图片的Url地址加载图片。
你可能着急了，这里的代码也只是交互完毕后的工作内容啊，具体怎么交互啊？
别急，我们来看刚才OnCreate方法的最后一行代码：

mWebView.setWebViewClient(new MyWebViewClient());

这个方法是用来自定义WebView加载过程中的操作的，具体看 MyWebViewClient 这个类：

// 监听
	private class MyWebViewClient extends WebViewClient {
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {

			return super.shouldOverrideUrlLoading(view, url);
		}

		@Override
		public void onPageFinished(WebView view, String url) {

			view.getSettings().setJavaScriptEnabled(true);

			super.onPageFinished(view, url);
			// html加载完成之后，添加监听图片的点击js函数
			addImageClickListner();

		}

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			view.getSettings().setJavaScriptEnabled(true);

			super.onPageStarted(view, url, favicon);
		}

		@Override
		public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

			super.onReceivedError(view, errorCode, description, failingUrl);

		}
	}

可以看到，大部分都是调用的父类的方法，只是在OnPageFinished这个方法里加入了一个自己的方法，addImageClickListener()方法，这里其实就是交互的关键了，我们继续看这个方法：

// 注入js函数监听
		private void addImageClickListner() {
			// 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，
			//函数的功能是在图片点击的时候调用本地java接口并传递url过去
			mWebView.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);  " + 
			"    }  " + 
			"}" + 
			"})()");
		}

好了，这个就是注入的关键了，首先利用WebView的方法loadUrl(“javascript:xxx”)来实现注入，之后就可以看注入的方法内容了，学过JS的应该很容易理解，其实就是遍历当前的Html,然后将Html中的Img组件全部获取到后，再给每个IMG组件加入onClick事件，该事件的方法体就是：

window.imagelistner.openImage(this.src);

注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”); 定义的方法名，而openImage就是我们自定义的JavaScriptInterface中的openImage方法。

至此，Android与JavaScript的交互就已经完毕了，点击WebView中的图片就可以调用我们原生的Android组件来加载了，想缩放，想下载就随你啦！