从打造新闻app学到的(6)：显示html格式文件/数据

发表于   |   分类于

虽然我的新闻客户端app进展告一段落，暂停两个礼拜，但之前积攒下来的东西还没有写完，继续总结码字。
我从API拿到的数据，具体的新闻信息，使用的是HTML格式，包括图片地址什么的。我不想用WebView，一方面是网络方面的东西我还没怎么接触，怕麻烦、不会，另一方面因为还有标题、评论什么的，最好是能直接解析显示出来，放在一个TextView里面。我的目的是学习，那些第三方库什么的能不用也都不用了，于是找了找，TextView确实能解决这个问题，一般都是OC版的，用Swift写是这样：

let opt = [NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType]
let html =  "<div style=\"background-color:#F1F1F1; font-size:14px; color:#304182; \n  text-align:center; margin-left:10px; padding-right:10px\"> \n<p>Test <span style=\"font-size:18px; color:#E88834;\">测试结束</span> Tips</p>\n</div>"

do{
let attributedString = try NSMutableAttributedString(data: html.dataUsingEncoding(NSUnicodeStringEncoding)!, options:opt, documentAttributes: nil)
post.attributedText = attributedString
}catch {print(error)}

不但能解析字体、颜色等等html标识，有图片的话也是没问题的。不过，事情没这么容易解决……

你看到的是非授权版本！爬虫凶猛，请尊重知识产权！

转载请注明出处：http://conanwhf.github.io/2015/12/31/newsreader-6/

访问原文「从打造新闻app学到的(6)：显示html格式文件/数据」获取最佳阅读体验并参与讨论

 用这种方法显示的页面，图片是不会自动缩放的，好在我们有万能的互联网😃。我在一个前端开发的回答中找到了很赞的答案：在head的配置中将img配置为按固定宽度缩放：

<head><style>img{max-width:200px !important;}</style></head>

一试果然OK了，只要我们能够正确地拿到View的宽度就行了。受到这个的启发，我发现我完全可以自己添加各种配置来config整个页面的细节，只要在我拿到的数据前面加上这个配置好的头部就行了：

let img_width = Int(post.frame.width)
let fontsize = 16
var config = "img{max-width:\(img_width)px !important;}"   //img style
config.appendContentsOf("body {font-size:\(fontsize)px;}")   //body style
config.appendContentsOf("h1{font-size: \(fontsize+4)px}")      //title style
config = "<head><style>" + config + "</style></head>"
html = config + "<h1>标题测试</h1><hr/>" + html

这样一来，不但可以解决图像显示问题，还可以把具体新闻的标题、时间信息、网友评论等等全部糅合到一起，并且字体大小格式Style等随心所欲！😏
这里安利一个HTML的教学网站，基本上按照CSS的规则去配置就行了，我完全是开着它照葫芦画瓢，so easy😬！如果你需要看看这篇文章的测试源代码，传送门