使用UIWebView中html標簽顯示富文本
用UIWebView來渲染文本並期望達到富文本的效果開銷很大哦!
Work
本人此處直接加載自定義字體"新蒂小丸子體",源碼不公開,望見諒.
代碼如下:
渲染后效果如下圖所示,效果是不是挺不錯的呢.
我們再把盡頭兩個字渲染成紅色試試.
源碼:
- (void)viewDidLoad { [super viewDidLoad]; // 注冊字體 REGISTER_FONT(bundleFont(@"XinDiXiaoWanZi.ttf"), @"新蒂小丸子體"); NSString *jsString = [NSString stringWithFormat: @"<html> \n" // 設置字體的css樣式 "<head> \n" "<style type=\"text/css\"> \n" "body {font-size: %f; font-family: \"%@\"; color: %@;}\n" "</style> \n" "</head> \n" // 字符串顯示部分 "<body>%@</body> \n" "</html>", 37.f, // 字體大小 CUSTOM_FONT(@"新蒂小丸子體", 0), // 字體類型 @"#000000", // 字體顏色 @"走向世界的<span style=\"color:red;\">盡頭</span>!"]; UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 100, 320, 70)]; [webView loadHTMLString:jsString baseURL:nil]; [self.view addSubview:webView]; }
效果如下:
Question
Currently I am working on iOS client for web-chat. Thus chat messages have HTML tags (bold, italic, underlined, font color, images (smiles), etc.). For example:
最近,我要給一個網頁聊天的網站做一個客戶端.這些聊天信息包含了很多HTML標簽(bold, italic, underlined, font color, images (smiles), etc.),例如:
<b>bold</b> <i>italic</i> <!--smile:bird--><img style="vertical-align: middle;border: none;" alt="bird" src="http://www.site.com/engine/data/emo_chat/bird.gif" /><!--/smile--> ordinaty text
For the moment I have 2 ideas how to display messages:
當下,我有兩個思路來顯示這些信息:
- Add UIWebView to tables cell. But I think that it's not an option, because we will have a lot of messages and a lot of WebViews. 將UIWebView添加到cell中,但這個備選方案問題多多,因為我有很火很多消息需要顯示,同時也需要很多很多的WebView.
- Add UITextView to tables cell, parse HTML tags and make necessary changes to attributed string. But UITextView doesn't support images (if I am right). 將UITextView添加到cell中,解析HTML標簽並轉換成富文本標簽.但是,UITextView不支持圖片顯示(如果我沒猜錯的話).
Is there any other (better) way to display such data (styled text + images)?
是否有其他更好的方式來顯示富文本加圖片呢?
Answer
Using a webview per-cell is not going to work as you suspect. Webviews take a noticeable time to render which means you will likely end up with old webview content being momentarily displayed in reused cells until the new content renders. Webview is also a pretty heavy-weight UI element and you will encounter performance issues with having many of them on the screen updating at once.
將webView添加到cell中絕對達不到你的預期.WebView需要很長很長時間來渲染,在cell中重用你就會死.WebView是開銷非常大的UI控件.
You will want to parse the HTML text you are given into an attributed string using a library like DTCoreText. From here, if you can target iOS 6 or later you can set the attributedText property on a standard UILabel. If you need to target earlier iOS versions you can again use DTCoreText, specifically the DTAttributedLabel or DTAttributedTextCell components.
也許你需要 DTCoreText 來幫助你將HTML標簽解析成富文本.
The parsing and NSAttributedString rendering can all be done manually using an XML parser and CoreText, but DTCoreText will make your life much easier.
雖然解析HTML以及富文本的渲染都可以通過手動的XML解析器以及CoreText來實現, 只不過 DTCoreText 讓你更輕松而已.
Update: You mentioned in a comment that you want support for <img/>. DTCoreText does have some basic image support, but this is a really hard problem if you are rendering text with CoreText because you have to make text flow around the image correctly, and reserve some space in the core text renderer to put your image into. If there is just a single image for each cell, I would suggest you manually extract the image path/url and lay it out with a UIImageView alongside your text.
注意:你提到了一個要素就是想支持<img/>.DTCoreText 支持幾種基本的image,但是如果你想用 CoreText 來實現這種圖文混排的工作會讓你非常蛋疼.如果你僅僅是展示一張圖片到一個cell當中.我建議你直接用UIImageView來顯示圖片算了.