iOS - 圖文混排技術方案分享

前言

很多同窗在工做中都能遇到圖文混排的需求。可是實現圖文混排的技術方案有好幾種，相應的方案優劣也有差異。今天和你們一塊兒分享一下圖文混排的技術方案以及個人選擇。

Demo和解析工具已經開源 GitHub

現有方案

1. Html結合WebView。
2. 利用CoreText，手動解析手動佈局。
3. 第三方庫，如：YYText

先說第一種方案，優勢是：對於客戶端來講，開發難度和代碼量都是比較小的。同時也能作到爲所欲爲的佈局，不須要考慮圖片，緩存，和交互等等問題。缺點是：須要準備相應的Html頁面，若是頁面中涉及到權限驗證，處理起來比較麻煩，另外，若是在業務場景複雜的狀況下，針對性能和交互的優化須要花更多的時間。

第二種方案，經過原生的CoreText，使咱們能接管整個圖文排版過程當中數據的管理以及界面的排布展現，優勢是：自由度高，可以爲所欲爲展現排版樣式、交互方式，效率上比較高。缺點是：代碼量比較大，須要本身造好幾個輪子，而且由於須要關注的地方比較多，如：圖片緩存，排版交互等，開發週期上會比較長，同時先後端數據交互格式也須要相互配合。

第三種方案，這個方案省去造輪子的時間，能夠將注意力放在排版和優化上，筆者採用的也是這個方案。

主要流程

獲取數據

在獲取數據的環節，重點在於先後端對於數據格式的配合。這一步直接影響了接下來咱們解析數據的工做。 根據業務需求，分別有多少種佈局，須要設計好具體的數據規則，按照預約好的設計規則將數據傳遞給移動端。在這個環節，團隊通過討論的結果是直接沿用Html的數據規則。這麼作的優勢是，這是一套成熟的規則，不須要咱們另外去針對複雜的佈局設定複雜的規則，往後便於維護，對於後端來講也更爲友好，不須要花費太多的時間對數據從新處理。

如

"<p>9.微分方程<img width="67" height="21" src="http://xxx.xxx/xxxxxxx.gif" align="absmiddle" />的特徵方程爲______.</p>"
複製代碼

解析數據 & 數據緩存

在解析數據的環節，須要作的就是將獲得的數據，按照事先約定好的規則進行解析。固然，數據內容的緩存也能夠在解析以前作。在解析數據以前作數據緩存的好處是能夠經過多線程來將解析數據和數據緩存兩個工做並行進行，效率較高，缺點就是往後數據再取出來複用的時候須要再跑一次解析過程。

個人解析的大體思路是：經過正則先找出文本中的圖片，通過處理，如：圖片縮放，拼接地址等，再使用NSMutableAttributedString的構造方法，生成NSMutableAttributedString，到這一步數據解析已經基本完成。

+ (NSMutableAttributedString *)outputAttributedString:(NSString *)html{
    NSData *data = [html dataUsingEncoding:NSUTF8StringEncoding];
    NSMutableAttributedString * mutAttributedStr = [[NSMutableAttributedString alloc] initWithAttributedString:[[NSAttributedString alloc] initWithData:data options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType, NSCharacterEncodingDocumentAttribute: @(NSUTF8StringEncoding)} documentAttributes:NULL error:nil]];
    return mutAttributedStr;
}
複製代碼

YYText

到了這一步，主要是利用YYText提供的接口和類來作佈局。 個人作法是構造一個繼承於YYTextAttachment，將上一步處理好的數據中找到圖片部分替換成YYTextAttachment,將圖片的展現交給YYTextAttachment，而且YYTextAttachment可以接受UIImageView類型的Content,這樣一來能夠直接使用SDWebImage來作圖片緩存。而且能夠在UIImageView中方便的添加點擊事件。 另外，經過YYTextLayout能夠靈活地實現咱們預想的佈局。

總結

webView的方式適合輕量級以及簡單的業務需求的頁面，而且具有靈活性。

CoreText的方式適合較爲發雜的業務場景以及較長的開發時間。

YYText毫無疑問是一份優秀的開源組件，適合絕大部分下的業務需求。

達到圖文混排的方式有多種，這裏與你們分享的技術方案可能未必適合大家，但願能對大家在作技術選型時提供一點靈感。