Preface
我們?cè)趯?shí)際項(xiàng)目開發(fā)過程中, 常常會(huì)有這樣一種需求: 文字和圖片一起作為字符串顯示. 常用的有微信和QQ的聊天對(duì)話框, 還有微博的發(fā)布微博信息的文本輸入框. 表情和文字共存就是其中最典型的圖文混排例子.
最近工作沒那么忙碌, 趁著這段時(shí)間, 剛好可以寫一些demo, 我弟弟也在大學(xué)學(xué)軟件開發(fā), 他的課程偏向J2EE, 但對(duì)移動(dòng)開發(fā)有很強(qiáng)烈的興趣. 常常叫我寫一些demo, 讓他學(xué)習(xí). 所以我就答應(yīng)他, 做一個(gè)仿發(fā)布微博的demo, 順便自己用swift3.0來寫, 對(duì)自己熟悉swift也有莫大的幫助.
好啦, 費(fèi)話不多說...
這一次用swift來玩玩UITextView的圖文混排, 好興奮喲!
效果圖:
簡(jiǎn)單說說思路:
類似Label的圖文混排的方法, UITextView的圖文混排當(dāng)然需要用到富文本這個(gè)神奇的東西.
富文本是個(gè)什么鬼哦?
你可以把富文本想像成色彩斑斕的文本, 可以顯示不同字體大小和顏色的文字, 色彩豐富的圖片, 修改字體的樣式, 加入下劃線等等神奇的功能, 就像魔術(shù)師一樣.
text 和 attributedText
text就像素顏時(shí)候的女孩, 而attributedText就是化妝過后的美女.
所以女孩們想變得更漂亮, 就要化妝, 對(duì)應(yīng)的想文本顯示更有效果, 就要使用attributedText這個(gè)屬性.
實(shí)現(xiàn)步驟:
- 生成一個(gè)圖片的附件
- 創(chuàng)建一個(gè)富文本對(duì)象
- 設(shè)置圖片的bounds
- 將圖片添加到富文本上
- 把圖片富文本轉(zhuǎn)換成可變的富文本
- 調(diào)用富文本的對(duì)象方法 addAttributes
圖片文本
- 創(chuàng)建NSTextAttachment的對(duì)象，用來裝載圖片
- 將NSTextAttachment對(duì)象的image屬性設(shè)置為想要使用的圖片
- 設(shè)置NSTextAttachment對(duì)象bounds大小，也就是要顯示的圖片的大小
- 用[NSAttributedString attributedStringWithAttachment:attch]方法，將圖片添加到富文本上
下面是在微博里發(fā)表情文本的示例代碼, 已經(jīng)寫上詳細(xì)的注釋:
//圖片表情
//1. 生成一個(gè)圖片的附件, Attachment:附件
let attachMent = NSTextAttachment()
//2. 使用NSTextAttachment將想要插入的圖片作為一個(gè)字符處理鸦难，轉(zhuǎn)換成NSAttributedString
attachMent.image = UIImage(named: emotion.fullPath!)
//3. 因?yàn)閳D片的大小是按照原圖的尺寸, 所以要設(shè)置圖片的bounds, 也就是大小
attachMent.bounds = CGRect(x: 0, y: -4, width: font!.lineHeight, height: font!.lineHeight)
//4. 將圖片添加到富文本上
let attachString = NSAttributedString(attachment: attachMent)
//5. 把圖片富文本轉(zhuǎn)換成可變的富文本
let mutiAttachString = NSMutableAttributedString(attributedString: attachString)
//6. 調(diào)用富文本的對(duì)象方法 addAttributes(_ attrs: [String : Any] = [:], range: NSRange)
//來修改對(duì)應(yīng)range范圍中 attribute屬性的 value值
//這里是修改富文本所有文本的字體大小為textView里的文本大小
mutiAttachString.addAttributes([NSFontAttributeName: font!], range: NSMakeRange(0, attachString.length))
現(xiàn)在已經(jīng)創(chuàng)建好表情的富文本了, 那么可以直接賦值給textView的attributedText屬性就可以顯示相應(yīng)的表情.
順便附上, 插入表情或者是替換所選文本, 還有光標(biāo)變化的實(shí)現(xiàn)代碼.
// selectedRange textView的選中范圍
var range = selectedRange
// attributedText textView的富文本屬性
let attriText = attributedText.copy()
// 把當(dāng)前textView里的富文本變成可變的富文本
let mutiAttriText = NSMutableAttributedString(attributedString: attriText as! NSAttributedString)
// 替換所選的范圍(當(dāng)前textView里已有的富文本替換剛插入的圖片富文本)
mutiAttriText.replaceCharacters(in: range, with: attachString)
// 修改textView富文本對(duì)應(yīng)范圍內(nèi)的字體(針對(duì)新插入的圖片富文本和原來的富文本)
mutiAttriText.addAttributes([NSFontAttributeName: font!], range: NSMakeRange(0, mutiAttriText.length))
// 設(shè)置新的textView富文本
attributedText = mutiAttriText
// 光標(biāo)后移一位(不管在任何位置插入一個(gè), 或者替換圖片富文本, 光標(biāo)所在位置后移一位)
range.location += 1
// 沒有選擇任何內(nèi)容
range.length = 0
// 更新當(dāng)前所在的光標(biāo)位置
selectedRange = range
好了, 簡(jiǎn)單的UITextView的圖文混排就這樣完成了.
這里有整個(gè)發(fā)布微博信息的demo, 有需要的可以下載學(xué)習(xí):)
My github
