相容iOS與OSX的輕量級富文字處理Label (自己造的小輪子)

dearmiku發表於2018-03-07
iOS

簡述

最近開發的OSX應用時,一些地方需要用到圖文混排,與可點選文字的地方,這時我就特別懷念在iOS用的YYText,然後轉念一想,反正時間比較富裕就自己造一個Swift的輪子吧,所以就寫了MK_Text

目前就完成了YYLabel的大部分功能,但基本夠用了,後續我也會去豐富裡面的功能,大家有什麼想法也可以提,如果我覺得比較實用我也會盡力去實現的~ 接下來我就介紹下MK_Text吧~

介紹

github連結:MK_Text

特性

支援圖文混排,支援富文字與View混排

支援非同步排版渲染

支援高亮文字設定

支援OSX 與 iOS

支援自動佈局

用法

圖文混排

可自定義圖片顯示大小,預設顯示圖片原始大小~

可設定圖片與其所在子行的對其方式,預設為與字行中線一致~

        let imStr = NSMutableAttributedString.mk_image(im: MK_Image.init(named: NSImage.Name.init("face"))!, size: CGSize.init(width: 30, height: 30), alignType: NSMutableAttributedString.AlignType.top)
        
        //控制元件的用法與圖片基本一致
        
        let v = UISwitch.init()
        let viewStr = NSMutableAttributedString.mk_view(view: v, superView: ml, size: v.bounds.size)
        
複製程式碼

高亮文字

使用高亮屬性時需先建立MK_TapResponse結構體,可選返回兩個閉包: 1,高亮時的富文字屬性~ 2,完成點選時回撥的閉包~

這裡判斷點選是否完成的邏輯與Button一致~


        let tap = NSMutableAttributedString.init(string: "可點選字元")
        let response = MK_TapResponse.init(highlitedBlock: { (str) -> [NSAttributedStringKey : Any]? in
            return [NSAttributedStringKey.foregroundColor : UIColor.red]
        }) { (str, range) in
            print("點選字串~")
        }
        tap.addTapAttr(response: response, range: nil)
複製程式碼

對齊方式

通過MK_Label的 alignment屬性 進行設定(預設為左對齊),此處以居中對此為例子 居中對齊效果圖

提前換行

為了較好的閱讀效果,有時我們需要提前換行,否則一個完整的單詞就會分兩行顯示,就像UILable一樣.我提供下面的屬性,來實現這樣的效果

    ///判斷是否進行提前換行條件閉包
    ///引數一: Label要繪製的富文字
    ///引數二: 本行結尾字元的下標
    var makeNewLineEarlyConditionBlock:((NSAttributedString,Int)->(Bool)) = {(str,index)->Bool in
        return false
    }

    ///單詞分隔符(單個字元)陣列
    var wordSeparatorArr:[String] = [" "]
複製程式碼

wordSeparatorArr陣列中儲存著單詞的分隔符,預設陣列中只有" "(空格)一個元素.就如UILabel一樣,不同單詞間以空格區分

makeNewLineEarlyConditionBlock在本行即將換行時,若存在將一個詞分割為兩行顯示時,則會回撥該閉包,來確定是否要提前換行,因為對於中文而言,則不存在這樣一個字分兩行顯示的問題,這裡使用者可以根據自己的實際情況來處理~

效果圖

1,未使用提前換行

未提前換行效果圖

2,使用提前換行(分隔符為" ",閉包直接返回true)

提前換行效果圖

非同步渲染

通過設定 Label的isAsync屬性來確定~ 預設為false

效果

目前只實現了上述的功能,其他功能會在後續豐富~

iOS效果圖 OSX效果圖

效能

關於效能我只是簡單的測試了一下,和YY_Text比較一下,下面是為繪製所用的時間的簡單對比~

效能測試結果圖 效能測試結果圖

這裡是測試耗時的地方

MK_Text

效能測試程式碼圖

YY_Text

效能測試程式碼圖

測下來的結果是MK_Text快一些,可能是我的功能相對簡單和使用Swift的原因吧~ 總計不算慢~

使用注意

中途修改富文字屬性

若需要在修改富文字屬性的同時重新整理UI介面,請使用下面這個方法

public func mk_setAttrtbute(dic:[NSAttributedStringKey : Any], range: NSRange)->Void
複製程式碼

自動佈局

MK_Text對於自動約束的支援是參照UILabel來做的, 當View的translatesAutoresizingMaskIntoConstraints為true時, 則按照View的frame進行渲染.

若為false,則會判斷約束是否約束到寬高, 若約束到 則按約束的寬高進行渲染,若未約束到,則會根據渲染內容來補充寬高約束~

安裝

CocoaPods

在 Podfile 中新增 pod 'MK_Text'

系統要求

OSX 10.10 或 iOS 8.0

總結

本框架測試的不多(就我一個人測),若大家發現Bug或有什麼好想法 歡迎提Issues,感覺還不錯的話可以點個Star (๑•ᴗ•๑)

相關文章