自定義表情包含圖片表情和Emoji表情
- Emoji表情為十六進(jìn)制編碼的字符串,可以第三方庫將編碼轉(zhuǎn)換為字符串通過文本設(shè)置
- 設(shè)置富文本時(shí)需要提前記錄TextView的上一次富文本,添加的富文本內(nèi)容和之前記錄富文本內(nèi)容進(jìn)行處理后再對(duì)TextView的attributedText進(jìn)行賦值:
// 記錄上一次的富文本記錄
let oldAttr = NSMutableAttributedString(attributedString: composeTextView.attributedText)
- 圖片表情需要使用到富文本的文本附件,文本附件可以設(shè)置和顯示image,另外TextView中需要同時(shí)顯示文本和圖片,圖片和文字的大小可能不一致,圖片的位置也可能會(huì)有偏移,所以還需要設(shè)置文本附件的bounds,通過bounds來約束圖片的寬高和偏移
未設(shè)置文本附件bounds的寬高:
設(shè)置文本附件bounds的寬高后,x,y先設(shè)置了0,文本附件的寬高約束好了,但是圖片在Y軸方向上有所偏移:
設(shè)置文本附件bounds的Y坐標(biāo),相對(duì)自身偏移4個(gè)單位,這樣文本附件的約束就設(shè)置好了,但添加多個(gè)表情時(shí):
第一個(gè)表情的Y軸,寬高問題解決,后面添加的表情大小不一致
接下來還需要在賦值前設(shè)置富文本的font,讓font統(tǒng)一:
設(shè)置文本附件的的bounds 和富文本font代碼:
// 獲取TextView文本的行高
let height = composeTextView.font!.lineHeight
attachment.bounds = CGRect(x: 0, y: -4, width: height, height: height)
// 設(shè)置富文本的font
oldAttr.addAttributes([NSFontAttributeName:composeTextView.font!], range: NSRange(location: 0, length: oldAttr.length))
- 富文本賦值的幾種情形與弊端
① 如果直接進(jìn)行賦值:那么每一次添加的內(nèi)容會(huì)覆蓋上一次的內(nèi)容
② 如果通過拼接賦值:那么無法滿足中間插入的需求:要么前面追加,要么后面追加
③ 如果通過插入賦值:那么需要獲取當(dāng)前選中光標(biāo)位置,改變插入后的光標(biāo)位置
// 獲取選中位置光標(biāo)
let selectedRange = composeTextView.selectedRange
oldAttr.insertAttributedString(attr, atIndex: selectedRange.location)
在指定位置上添加完內(nèi)容后,默認(rèn)光標(biāo)會(huì)顯示在最后,需要讓光標(biāo)保留在追加內(nèi)容的后面,所以loc + 1
// 設(shè)置富文本
composeTextView.attributedText = oldAttr
// 更改TextView中的光標(biāo)位置
composeTextView.selectedRange = NSRange(location: selectedRange.location + 1, length: 0)
而且需要注意的是,更改光標(biāo)的位置要放在富文本賦值后,比如我在插入富文本后、賦值富文本前更改光標(biāo),現(xiàn)在在TextView中的數(shù)字后面表情前面插入內(nèi)容,那么添加完內(nèi)容后,雖然表情位置插入正確,但是光標(biāo)仍然在文本的最后面
但還無法滿足替換選中區(qū)域內(nèi)容的需求:
④ 最終通過替換的方式與之前記錄的富文本進(jìn)行合并處理
代碼:
// 獲取選中位置光標(biāo)
let selectedRange = composeTextView.selectedRange
// 替換
oldAttr.replaceCharactersInRange(selectedRange, withAttributedString: attr)
每一個(gè)表情都是一個(gè)button,在點(diǎn)擊button的時(shí)候,發(fā)送通知,在控制器中監(jiān)聽到通知的時(shí)候,實(shí)現(xiàn)一個(gè)自定義的方法,方法中,完成TextView顯示表情的操作:(因?yàn)榻缑鎸蛹?jí)比較深,使用代理,閉包都比較麻煩,所以使用了通知)
// 表情鍵盤按鈕通知點(diǎn)擊事件
@objc private func emoticonButtonClick (notic: NSNotification) -> Void {
if let obj = notic.object as? JSEmoticonModel {
if obj.isEmoji {
// emoji表情
composeTextView.insertText((obj.code ?? "").emojiStr())
} else {// 圖片表情
// 記錄上一次的富文本記錄
let oldAttr = NSMutableAttributedString(attributedString: composeTextView.attributedText)
// 拼接全路徑
let path = obj.path ?? ""
let png = obj.png ?? ""
let name = path + png
// 創(chuàng)建文本附件 (使用它需要設(shè)置bounds)
let attachment = NSTextAttachment()
attachment.image = UIImage(named: name, inBundle: JSEmoticonTool.sharedTool.emoticonBundle, compatibleWithTraitCollection: nil)
// 設(shè)置bounds
// 行高
let height = composeTextView.font!.lineHeight
attachment.bounds = CGRect(x: 0, y: -4, width: height, height: height)
// 創(chuàng)建一個(gè)不可變的富文本
let attr = NSAttributedString(attachment: attachment)
// 獲取選中位置光標(biāo)
let selectedRange = composeTextView.selectedRange
// 方式01-拼接富文本(拼接方式會(huì)導(dǎo)致時(shí)鐘都在最后添加,將光標(biāo)移動(dòng)到文本中間位置添加內(nèi)容時(shí),將無法滿足)
// oldAttr.appendAttributedString(attr)
// 方式02-插入富文本(無法滿足選中區(qū)域替換的需求)
// oldAttr.insertAttributedString(attr, atIndex: selectedRange.location)
// 方式03-替換光標(biāo)選中區(qū)域的富文本(如果沒有選中,選中光標(biāo)的length就是0,對(duì)插入不影響)
oldAttr.replaceCharactersInRange(selectedRange, withAttributedString: attr)
// 設(shè)置富文本的font
oldAttr.addAttributes([NSFontAttributeName:composeTextView.font!], range: NSRange(location: 0, length: oldAttr.length))
// 設(shè)置富文本
composeTextView.attributedText = oldAttr
// 更改TextView中的光標(biāo)位置 (在指定位置上添加完內(nèi)容后,默認(rèn)光標(biāo)會(huì)顯示在最后,需要讓光標(biāo)保留在追加內(nèi)容的后面,所以loc + 1)
composeTextView.selectedRange = NSRange(location: selectedRange.location + 1, length: 0)
}
}
}
