前言:当前Web内容在移动进行功能处理需求越来越多,尤其像新闻资讯类的APP,应用协议web,使用指南等。。。
文章解决简单文本显示与图文适配,图片点击问题
问题:简单文本内容显示
方法:android 提供Html.fromHtml()方法,进行转换一下即可。
问题:图文内容,需求图片只适应屏幕,可点击查看
1.解决适配屏幕问题。调用如下方法把需要显示html内容进行加工处理即可。
代码如下:
private String getHtmlData(String bodyHTML) {
String head = "
" +" " +
"" +
"";
return "" + head + "
" + bodyHTML + "";}
2.解决图片点击大图查看,通过JS解决肯定需要添加JS 相关代码
第一步:WebView 控件支持JS,设置WebView.setSettings().setJavaScriptEnable(true);
第二步:在WebView页面加载结束之后,设置JS相关代码。如何判断页面加载完成?通过WebView.setWebViewClient(WebViewClient)方法;,需要自定义WebVIewClient类,重载onPageFinished(ViewView view,String url)方法。
代码如下:
private class MyWebViewClient extends WebViewClient {
//在页面加载结束时调用。
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl( getJavascript( "IMG","imagelistner","openImage"));
}
}
/***
* 设置JS
* @param key 图片标签
* @param callbackName 回调接口名
* @param fcName 回调方法名
* @return
*/
private String getJavascript(String key,String callbackName,String fcName){
return "javascript:(function(){" +
"var imgs=document.getElementsByTagName(\""+key+"\");" +
"for(var i=0;i
"imgs[i].οnclick=function(){" +
"window."+callbackName+"."+fcName+"(this.src);" +
"}}})()";
}
第三步:设置图片点击响应方法,点击事件响应通过JS 代码,WebView监听JS事件进行响应。
我们需要调用WebView.addJavcScriptInterface(Object obj,String name)监听事件。此方法参数理解:
【Object参数1】事件接受实现对象,【String参数2】事件接受对象回调接口的名称。需要注意的是此参数,必须与步骤2中getJavascript(String key,StringcallbackName,String fcName)callbackName
一致,否则无法响应事件。最后我们在事件接受实现对象中实现已fcName为方法名的方法即可。
代码如下:
//java回调js代码,不要忘了@JavascriptInterface这个注解,不然点击事件不起作用@JavascriptInterface
public void openImage(String img) {
AirlineLookImageActivity.startContentUI(context, img);
}