很多同窗在工做中都能遇到圖文混排的需求。可是實現圖文混排的技術方案有好幾種,相應的方案優劣也有差異。今天和你們一塊兒分享一下圖文混排的技術方案以及個人選擇。html
Demo和解析工具已經開源 GitHubgit
Html
結合WebView
。CoreText
,手動解析手動佈局。先說第一種方案,優勢是:對於客戶端來講,開發難度和代碼量都是比較小的。同時也能作到爲所欲爲的佈局,不須要考慮圖片,緩存,和交互等等問題。缺點是:須要準備相應的Html頁面,若是頁面中涉及到權限驗證,處理起來比較麻煩,另外,若是在業務場景複雜的狀況下,針對性能和交互的優化須要花更多的時間。github
第二種方案,經過原生的CoreText
,使咱們能接管整個圖文排版過程當中數據的管理以及界面的排布展現,優勢是:自由度高,可以爲所欲爲展現排版樣式、交互方式,效率上比較高。缺點是:代碼量比較大,須要本身造好幾個輪子,而且由於須要關注的地方比較多,如:圖片緩存,排版交互等,開發週期上會比較長,同時先後端數據交互格式也須要相互配合。web
第三種方案,這個方案省去造輪子的時間,能夠將注意力放在排版和優化上,筆者採用的也是這個方案。後端
在獲取數據的環節,重點在於先後端對於數據格式的配合。這一步直接影響了接下來咱們解析數據的工做。 根據業務需求,分別有多少種佈局,須要設計好具體的數據規則,按照預約好的設計規則將數據傳遞給移動端。在這個環節,團隊通過討論的結果是直接沿用Html
的數據規則。這麼作的優勢是,這是一套成熟的規則,不須要咱們另外去針對複雜的佈局設定複雜的規則,往後便於維護,對於後端來講也更爲友好,不須要花費太多的時間對數據從新處理。緩存
如bash
"<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提供的接口和類來作佈局。 個人作法是構造一個繼承於YYTextAttachment
,將上一步處理好的數據中找到圖片部分替換成YYTextAttachment
,將圖片的展現交給YYTextAttachment
,而且YYTextAttachment
可以接受UIImageView
類型的Content
,這樣一來能夠直接使用SDWebImage
來作圖片緩存。而且能夠在UIImageView
中方便的添加點擊事件。 另外,經過YYTextLayout
能夠靈活地實現咱們預想的佈局。佈局
webView
的方式適合輕量級以及簡單的業務需求的頁面,而且具有靈活性。
CoreText
的方式適合較爲發雜的業務場景以及較長的開發時間。
YYText
毫無疑問是一份優秀的開源組件,適合絕大部分下的業務需求。
達到圖文混排的方式有多種,這裏與你們分享的技術方案可能未必適合大家,但願能對大家在作技術選型時提供一點靈感。