前言:当前Web内容在移动进行功能处理需求越来越多,尤其像新闻资讯类的APP,应用协议web,使用指南等。。。
文章解决简单文本显示与图文适配,图片点击问题
问题:简单文本内容显示
方法:android 提供Html.fromHtml()方法,进行转换一下即可。
问题:图文内容,需求图片只适应屏幕,可点击查看
1.解决适配屏幕问题。调用如下方法把需要显示html内容进行加工处理即可。
代码如下:
private String getHtmlData(String bodyHTML) {
String head = "<head>" +
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +
"<style>img{max-width:100% !important; width:auto; height:auto;}</style>" +
"</head>";
return "<html>" + head + "<body style:'height:auto;max-width: 100%; width:auto;'>" + bodyHTML + "</body></html>";
}
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.length;i++){" +
"imgs[i].οnclick=function(){" +
"window."+callbackName+"."+fcName+"(this.src);" +
"}}})()";
}
我们需要调用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);
}