android如何在 WebView 控件中组装 HTML 显示

  次阅读 来源:互联网(转载协议) 2015-10-02 21:18 我要评论(0)

本篇将介绍如何在 WebView 控件中组装 HTML 显示。

先上张效果图:

由于在 WebView 上显示HTML,不可能只显示纯文本,而没有一点样式,这会显得很难看,下面代码就是定义了一个全局的样式:

public final static String WEB_STYLE = "<style>* {font-size:16px;line-height:20px;} p {color:#333;} a {color:#3E62A6;} img {max-width:310px;} " +

"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;}</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);

完整代码:

//资讯内容

String body = newsDetail.getBody();

if(!body.trim().startsWith("<style>")){

body = WEB_STYLE + body;

}

//相关资讯

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);

}

//读取用户设置:是否加载文章图片

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");

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

    Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

  • teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

    teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

  • Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

    Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

  • 2018深圳国际人工智能展览会 2018 shenzhen International Artif

    2018深圳国际人工智能展览会 2018 shenzhen International Artif

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...