ZJAttributedText 是高性能輕量級富文本框架

前言

如果遇到上面一個需求, 你會怎么處理, 若干個 UILabel + UIImageView? NSAttributedString拼接? CoreText?

我相信不論是哪種方式代碼量都不小, 并且難以復(fù)用, 其他語言寫富文本是那么輕松, Android 天生支持簡單 HTML, RN(JS) 標簽套標簽, 而只要用過 iOS 中的富文本都會覺得難用... 目前業(yè)界功能強大、較為好用的是 YYText, 但設(shè)計思想是盡可能與 UILabel、UITextView 相似, 所以相對使用也不是特別簡單, 而且框架較重。

基于現(xiàn)狀開發(fā)了一套輕量的框架?ZJAttributedText，ZJAttributedText 是高性能輕量級富文本框架，滿足大部分富文本需求, 并且提供了手勢響應(yīng)、 繪制回調(diào)、 圖文對齊、 CoreText 屬性擴展、 支持網(wǎng)絡(luò)圖片、 異步繪制性能優(yōu)化, 最重要的是使用簡單, 通過鏈式語法輕松寫出一篇圖文混排文本.

示例說明

如圖所示一篇圖文混排, 涉及到字體, 顏色, 字間距, 行間距, 圖片對齊, 文字對齊, 描邊等等屬性, 還有網(wǎng)絡(luò)圖片與本地圖片混排, 手勢響應(yīng)等需求, 使用本框架可以下面這樣實現(xiàn):

????//...省略常量聲明

????//標題
????title.font(titleFont).color(titleColor).onClicked(titleOnClicked).onLayout(titleOnLayout);
????//首段
????firstPara.color(firstParaColor).align(@0);
????//圖片需要用一個空字符串起頭
????NSString?*webImageString?=?@"".append(webImageURL).font(separateLineFont).minLineHeight(@100);
????//分割線
????separateLine.font(separateLineFont).strokeColor(separateLineColor).strokeWidth(@1);
????//本地圖片
????NSString?*locolImageString?=?@"".append(locolImage);
????//最后一段
????lastPara.font(lastParaFont).align(@1);
????//書名
????bookName.font(bookNameFont).color(bookNameColor).onClicked(bookOnClicked).align(@1);
????//引用
????quote.color(quoteColor).letterSpace(@0).minLineSpace(@8).align(@0);
????
????//設(shè)置全局默認屬性,?優(yōu)先級低于指定屬性
????NSString?*defaultAttributes?=?@"".entire()
????.maxSize(maxSize).align(@2).letterSpace(@3).minLineHeight(@20).maxLineHeight(@20).imageAlign(@1).onClicked(textOnClicked).imageSize(imageSize);
????
????//拼接
????title.append(firstPara).append(webImageString).append(separateLine).append(locolImageString).append(lastPara).append(bookName).append(quote)
????//設(shè)置默認屬性
????.append(defaultAttributes)
????//繪制View
????.drawView(^(UIView?*drawView)?{
????????[self.view?addSubview:drawView];
????});

甚至可以這樣實現(xiàn):

????//...省略常量聲明

????@""
????//拼接全文
????.append(title).font(titleFont).color(titleColor).onClicked(titleOnClicked).onLayout(titleOnLayout)
????.append(firstPara).color(firstParaColor).align(@0)
????.append(webImageURL).font(separateLineFont).minLineHeight(@100)
????.append(separateLine).font(separateLineFont).strokeColor(separateLineColor).strokeWidth(@1)
????.append(locolImage)
????.append(lastPara).font(lastParaFont).align(@1)
????.append(bookName).font(bookNameFont).color(bookNameColor).onClicked(bookOnClicked).align(@1)
????.append(quote).color(quoteColor).letterSpace(@0).minLineSpace(@8).align(@0)
????//設(shè)置默認屬性
????.entire().maxSize(maxSize).align(@2).letterSpace(@3).minLineHeight(@20).maxLineHeight(@20).imageAlign(@1).onClicked(textOnClicked).imageSize(imageSize)
????//繪制
????.drawView(^(UIView?*drawView)?{
????????[self.view?addSubview:drawView];
????});

核心方法與屬性

對 NSString 的擴展

核心方法

• append(id content)

  拼接
  content?可以是文本(NSString)、圖片(UIImage)、圖片鏈接(NSURL)(必須指定imageSize屬性)、視圖(CALayer/UIView)

• entire()

  設(shè)置整段富文本
  優(yōu)先級低于指定屬性,?較為重要的屬性?maxSize?設(shè)置繪制約束,?部分段落屬性只在整段中設(shè)置生效

• drawLayer(^(CALayer *drawLayer)completion)

  繪制layer,?無法響應(yīng)手勢

• drawView(^(UIView *drawView)completion)

  繪制View,?可響應(yīng)手勢

屬性

通用屬性

• verticalOffset 垂直偏移

• onClicked 點擊回調(diào)

• onLayout 展示回調(diào)

• cacheFrame 緩存該段文本繪制位置

字符串屬性

• font 字體: 文字字體/圖片居中對齊字體

• color 顏色

• letterSpace 字間距

• strokeWidth 描邊寬度, 整數(shù)為鏤空, Color不生效; 負數(shù)Color生效

• strokeColor 描邊顏色

• verticalForm 文字繪制隨文字書寫方向, 默認 否(0), 是(非0)

• underline 下劃線類型, 整形, 0為none, 1為細線 2為加粗 9為雙條 參考 CTUnderlineStyle(僅枚舉了三種, 其他值也有不同效果)

圖片屬性

• imageSize 圖片尺寸, 默認為圖片本身尺寸, 會根據(jù)圖片縮放(2x 3x)自動調(diào)整

• imageAlign 圖片對齊模式, 0為默認, 基準線對齊. 1為居中對齊至特定字體大小 參看 ZJTextImageAlign

段落屬性

• maxSize 繪制的約束尺寸, 默認不限制

• minLineSpace 最小行間距

• maxLineSpace 最大行間距

• minLineHeight 最小行高

• maxLineHeight 最小行高

• align 對齊, 整形, 0為默認靠左 1為靠右 2為居中, 參考 CTTextAlignment

• lineBreakMode 對齊, 整形, 參考 NSLineBreakMode

性能

總體采用 CoreText + 異步繪制圖片完成, 理論上性能會比較高, 經(jīng)過測試如下數(shù)據(jù)供參考:

內(nèi)容: 一段文本加上兩張圖片

機型: iPhone 6

測試結(jié)果:

常規(guī)(使用NSAttributedString + UILabel)過程: 創(chuàng)建->顯示(繪制) 常規(guī)分析:

1. 主線程代碼在 28ms 左右. (主線程代碼開始 至 結(jié)束耗時)

2. UILabel 顯示(繪制)耗時在 42ms 左右. (addSubview 至 drawRect 耗時)

3. 綜合耗時 70ms 左右, 全部在主線程

異步繪制(本框架)過程: 創(chuàng)建->異步繪制->顯示 異步繪制分析:

1. 主線程(創(chuàng)建)代碼在 28ms 左右. (主線程代碼開始 至 結(jié)束耗時)

2. 創(chuàng)建(主線程) + 異步繪制耗時 84ms 左右. (主線程代碼開始 至 繪制出圖片回調(diào))

3. 由 1、2 得出子線程繪制耗時 56ms 左右, 另外經(jīng)過多次試驗(大段文字繪制)得出繪制復(fù)雜的段落也耗時增長較少

4. 顯示耗時 0.75 ms 左右. (addSubview 至 drawRect 耗時)

5. 綜合耗時 85ms 左右, 其中主線程 29ms, 子線程 56ms

結(jié)論:

1. 相較于常規(guī)方式降低了主線程壓力 70ms -> 29ms

2. 越復(fù)雜的文本收益越高(多控件合一, 異步繪制), 上圖中大段富文本繪制時間也只多了 15ms, 耗時增長少

3. 總體耗時增加了15ms, 都在子線程, 畢竟處理的邏輯比系統(tǒng)的多.

安裝

Github

ZJAttributedText

Pod

pod?'ZJAttributedText'

本框架依賴 SDWebImage (幾乎所有App都集成了, 可以共用一套緩存邏輯)

尾巴

內(nèi)部實現(xiàn)代碼不多, 幾乎所有步驟都添加了注釋, 如果需要學習 CoreText, 異步繪制, 鏈式語法, 還算是個不錯的 Demo, 如果大家感興趣, 可以補充下 CoreText 相關(guān)內(nèi)容, 這部分網(wǎng)上的資料都比較老, 錯誤也比較多. 歡迎 issue 與 star~