我們在實際項目開發過程中, 常常會有這樣一種需求: 文字和圖片一起作為字符串顯示. 常用的有微信和QQ的聊天對話框, 還有微博的發布微博信息的文本輸入框. 表情和文字共存就是其中最典型的圖文混排例子.

最近工作沒那麼忙碌, 趁著這段時間, 剛好可以寫一些demo, 我弟弟也在大學學軟件開發, 他的課程偏向J2EE, 但對移動開發有很強烈的興趣. 常常叫我寫一些demo, 讓他學習. 所以我就答應他, 做一個仿發布微博的demo, 順便自己用swift3.0來寫, 對自己熟悉swift也有莫大的幫助.

好啦, 費話不多說...

這一次用swift來玩玩UITextView的圖文混排, 好興奮喲!

簡單說說思路:

類似Label的圖文混排的方法, UITextView的圖文混排當然需要用到富文本這個神奇的東西.

富文本是個什麼鬼哦?

你可以把富文本想像成色彩斑斓的文本, 可以顯示不同字體大小和顏色的文字, 色彩豐富的圖片, 修改字體的樣式, 加入下劃線等等神奇的功能, 就像魔術師一樣.

text 和 attributedText

text就像素顏時候的女孩, 而attributedText就是化妝過後的美女.
所以女孩們想變得更漂亮, 就要化妝, 對應的想文本顯示更有效果, 就要使用attributedText這個屬性.

實現步驟:

• 生成一個圖片的附件

• 創建一個富文本對象

• 設置圖片的bounds

• 將圖片添加到富文本上

• 把圖片富文本轉換成可變的富文本

• 調用富文本的對象方法 addAttributes

圖片文本

1. 創建NSTextAttachment的對象，用來裝載圖片

2. 將NSTextAttachment對象的image屬性設置為想要使用的圖片

3. 設置NSTextAttachment對象bounds大小，也就是要顯示的圖片的大小

4. 用[NSAttributedString attributedStringWithAttachment:attch]方法，將圖片添加到富文本上

下面是在微博裡發表情文本的示例代碼, 已經寫上詳細的注釋:

//圖片表情
//1. 生成一個圖片的附件, Attachment:附件
let attachMent = NSTextAttachment()

//2. 使用NSTextAttachment將想要插入的圖片作為一個字符處理，轉換成NSAttributedString
attachMent.image = UIImage(named: emotion.fullPath!)

//3. 因為圖片的大小是按照原圖的尺寸, 所以要設置圖片的bounds, 也就是大小
attachMent.bounds = CGRect(x: 0, y: -4, width: font!.lineHeight, height: font!.lineHeight)

//4. 將圖片添加到富文本上
let attachString = NSAttributedString(attachment: attachMent)

//5. 把圖片富文本轉換成可變的富文本
let mutiAttachString = NSMutableAttributedString(attributedString: attachString)

//6. 調用富文本的對象方法 addAttributes(_ attrs: [String : Any] = [:], range: NSRange)
//來修改對應range范圍中 attribute屬性的 value值
//這裡是修改富文本所有文本的字體大小為textView裡的文本大小
mutiAttachString.addAttributes([NSFontAttributeName: font!], range: NSMakeRange(0, attachString.length))

現在已經創建好表情的富文本了, 那麼可以直接賦值給textView的attributedText屬性就可以顯示相應的表情.

順便附上, 插入表情或者是替換所選文本, 還有光標變化的實現代碼.

// selectedRange  textView的選中范圍
var range = selectedRange

// attributedText textView的富文本屬性
let attriText = attributedText.copy()

// 把當前textView裡的富文本變成可變的富文本
let mutiAttriText = NSMutableAttributedString(attributedString: attriText as! NSAttributedString)

// 替換所選的范圍(當前textView裡已有的富文本替換剛插入的圖片富文本)
mutiAttriText.replaceCharacters(in: range, with: attachString)

// 修改textView富文本對應范圍內的字體(針對新插入的圖片富文本和原來的富文本)
mutiAttriText.addAttributes([NSFontAttributeName: font!], range: NSMakeRange(0, mutiAttriText.length))

// 設置新的textView富文本
attributedText = mutiAttriText

// 光標後移一位(不管在任何位置插入一個, 或者替換圖片富文本, 光標所在位置後移一位)
range.location += 1

// 沒有選擇任何內容
range.length = 0

// 更新當前所在的光標位置
selectedRange = range

好了, 簡單的UITextView的圖文混排就這樣完成了.
這裡有整個信發布微博信息的demo, 有需要的可以下載學習:)
https://github.com/VitasLiu/WeiBoComposeDemo.git