在iOS应用程序中使用HTML标签显示文本的最佳方法？

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:

<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:

1. 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.
2. 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).

Is there any other (better) way to display such data (styled text + images)?

Answer 1

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.

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.

The parsing and NSAttributedString rendering can all be done manually using an XML parser and CoreText, but DTCoreText will make your life much easier.

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.

Answer 2

You can get idea from RTLabel stuff. It is doing same thing which you want.

Answer 3

You can also convert HTML to NSAttributedString with native iOS classes. Look the following post https://stackoverflow.com/a/18886718/1760527