有时候想用webview直接加载现成的我web页面,但是web页面直接放大手机上整体比较小,很难操作,说白了就是不合适,所以需要对html页面进行重组,直接上完整代码
String body = UIHelper.WEB_STYLE + newsDetail.getBody();
// 读取用户设置:是否加载文章图片--默认有wifi下始终加载图片
boolean isLoadImage;
AppContext ac = (AppContext) getApplication();
if (AppContext.NETTYPE_WIFI == ac.getNetworkType()) {
isLoadImage = true;
} else {
isLoadImage = ac.isLoadImage();
}
if (isLoadImage) {
// 过滤掉 img标签的width,height属性
body = body.replaceAll(
"(<img[^>]*?)\\s+width\\s*=\\s*\\S+", "$1");
body = body.replaceAll(
"(<img[^>]*?)\\s+height\\s*=\\s*\\S+", "$1");
// 添加点击图片放大支持
body = body.replaceAll("(<img[^>]+src=\")(\\S+)\"",
"$1$2\" onClick=\"javascript:mWebViewImageListener.onImageClick('$2')\"");
} else {
// 过滤掉 img标签
body = body.replaceAll("<\\s*img\\s+([^>]*)\\s*>", "");
}
// 更多关于***软件的信息
String softwareName = newsDetail.getSoftwareName();
String softwareLink = newsDetail.getSoftwareLink();
if (!StringUtils.isEmpty(softwareName)
&& !StringUtils.isEmpty(softwareLink))
body += String
.format("<div id='oschina_software' style='margin-top:8px;color:#FF0000;font-weight:bold'>更多关于: <a href='%s'>%s</a> 的详细信息</div>",
softwareLink, softwareName);
// 相关新闻
if (newsDetail.getRelatives().size() > 0) {
String strRelative = "";
for (Relative relative : newsDetail.getRelatives()) {
strRelative += String
.format("<a href='%s' style='text-decoration:none'>%s</a><p/>",
relative.url, relative.title);
}
body += String.format(
"<p/><hr/><b>相关资讯</b><div><p/>%s</div>",
strRelative);
}
body += "<div style='margin-bottom: 80px'/>";
System.out.println(body);
mWebView.loadDataWithBaseURL(null, body, "text/html",
"utf-8", null);
mWebView.setWebViewClient(UIHelper.getWebViewClient());
全局样式:
/** 全局web样式 */
public final static String WEB_STYLE = "<style>* {font-size:16px;line-height:20px;} p {color:#333;} a {color:#3E62A6;} img {max-width:310px;} "
+ "img.alignleft {float:left;max-width:120px;margin:0 10px 5px 0;border:1px solid #ccc;background:#fff;padding:2px;} "
+ "pre {font-size:9pt;line-height:12pt;font-family:Courier New,Arial;border:1px solid #ddd;border-left:5px solid #6CE26C;background:#f6f6f6;padding:5px;} "
+ "a.tag {font-size:15px;text-decoration:none;background-color:#bbd6f3;border-bottom:2px solid #3E6D8E;border-right:2px solid #7F9FB6;color:#284a7b;margin:2px 2px 2px 0;padding:2px 4px;white-space:nowrap;}</style>";
上面全局样式:“*”定义了字体大小以及行高;“p”标签内的字体颜色;“a”标签内的字体颜色;“img”标签的图片最大宽度;“pre”为代码样式;
资讯内容是由服务返回的一串带HTML标签的字符串:
String body = newsDetail.getBody();
相关资讯则是由服务返回的数据组装的:
String strRelative = ""; for(Relative relative : newsDetail.getRelatives()){ strRelative += String.format("<a href='%s' style='text-decoration:none'>%s</a><p/>", relative.url, relative.title); }
图片处理
WebView上显示图片,不能直接显示大图,这会影响页面的美观以及用户体验,因此要过滤掉原始图片的高宽属性,使用全局的图片样式。同时客户端可以根据用户设置,是否加载图片显示,以达到节省流量的目的。
if(isLoadImage){ //过滤掉 img标签的width,height属性 body = body.replaceAll("(<img[^>]*?)\\s+width\\s*=\\s*\\S+","$1"); body = body.replaceAll("(<img[^>]*?)\\s+height\\s*=\\s*\\S+","$1"); }else{ //过滤掉 img标签 body = body.replaceAll("<\\s*img\\s+([^>]*)\\s*>",""); }
WebView展示HTML
mWebView.loadDataWithBaseURL(null, body, "text/html", "utf-8",null);
oschina-app完整源码下载:http://download.csdn.net/detail/xiangxue336/7023661