自定义表情包含图片表情和Emoji表情
- Emoji表情为十六进制编码的字符串,可以第三方库将编码转换为字符串通过文本设置
- 设置富文本时需要提前记录TextView的上一次富文本,添加的富文本内容和之前记录富文本内容进行处理后再对TextView的attributedText进行赋值:
// 记录上一次的富文本记录
let oldAttr = NSMutableAttributedString(attributedString: composeTextView.attributedText)
- 图片表情需要使用到富文本的文本附件,文本附件可以设置和显示image,另外TextView中需要同时显示文本和图片,图片和文字的大小可能不一致,图片的位置也可能会有偏移,所以还需要设置文本附件的bounds,通过bounds来约束图片的宽高和偏移
未设置文本附件bounds的宽高:
bounds_01.png
设置文本附件bounds的宽高后,x,y先设置了0,文本附件的宽高约束好了,但是图片在Y轴方向上有所偏移:
bounds_02.png
设置文本附件bounds的Y坐标,相对自身偏移4个单位,这样文本附件的约束就设置好了,但添加多个表情时:
第一个表情的Y轴,宽高问题解决,后面添加的表情大小不一致
bounds_03.png
接下来还需要在赋值前设置富文本的font,让font统一:
bounds_04.png
设置文本附件的的bounds 和富文本font代码:
// 获取TextView文本的行高
let height = composeTextView.font!.lineHeight
attachment.bounds = CGRect(x: 0, y: -4, width: height, height: height)
// 设置富文本的font
oldAttr.addAttributes([NSFontAttributeName:composeTextView.font!], range: NSRange(location: 0, length: oldAttr.length))
- 富文本赋值的几种情形与弊端
① 如果直接进行赋值:那么每一次添加的内容会覆盖上一次的内容
② 如果通过拼接赋值:那么无法满足中间插入的需求:要么前面追加,要么后面追加
③ 如果通过插入赋值:那么需要获取当前选中光标位置,改变插入后的光标位置
// 获取选中位置光标
let selectedRange = composeTextView.selectedRange
oldAttr.insertAttributedString(attr, atIndex: selectedRange.location)
在指定位置上添加完内容后,默认光标会显示在最后,需要让光标保留在追加内容的后面,所以loc + 1
// 设置富文本
composeTextView.attributedText = oldAttr
// 更改TextView中的光标位置
composeTextView.selectedRange = NSRange(location: selectedRange.location + 1, length: 0)
而且需要注意的是,更改光标的位置要放在富文本赋值后,比如我在插入富文本后、赋值富文本前更改光标,现在在TextView中的数字后面表情前面插入内容,那么添加完内容后,虽然表情位置插入正确,但是光标仍然在文本的最后面
Insert_01.png
insert_02.png
但还无法满足替换选中区域内容的需求:
insert_03.png
insert_04.png
④ 最终通过替换的方式与之前记录的富文本进行合并处理
insert_05.png
insert_06.png
代码:
// 获取选中位置光标
let selectedRange = composeTextView.selectedRange
// 替换
oldAttr.replaceCharactersInRange(selectedRange, withAttributedString: attr)
每一个表情都是一个button,在点击button的时候,发送通知,在控制器中监听到通知的时候,实现一个自定义的方法,方法中,完成TextView显示表情的操作:(因为界面层级比较深,使用代理,闭包都比较麻烦,所以使用了通知)
// 表情键盘按钮通知点击事件
@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
// 创建文本附件 (使用它需要设置bounds)
let attachment = NSTextAttachment()
attachment.image = UIImage(named: name, inBundle: JSEmoticonTool.sharedTool.emoticonBundle, compatibleWithTraitCollection: nil)
// 设置bounds
// 行高
let height = composeTextView.font!.lineHeight
attachment.bounds = CGRect(x: 0, y: -4, width: height, height: height)
// 创建一个不可变的富文本
let attr = NSAttributedString(attachment: attachment)
// 获取选中位置光标
let selectedRange = composeTextView.selectedRange
// 方式01-拼接富文本(拼接方式会导致时钟都在最后添加,将光标移动到文本中间位置添加内容时,将无法满足)
// oldAttr.appendAttributedString(attr)
// 方式02-插入富文本(无法满足选中区域替换的需求)
// oldAttr.insertAttributedString(attr, atIndex: selectedRange.location)
// 方式03-替换光标选中区域的富文本(如果没有选中,选中光标的length就是0,对插入不影响)
oldAttr.replaceCharactersInRange(selectedRange, withAttributedString: attr)
// 设置富文本的font
oldAttr.addAttributes([NSFontAttributeName:composeTextView.font!], range: NSRange(location: 0, length: oldAttr.length))
// 设置富文本
composeTextView.attributedText = oldAttr
// 更改TextView中的光标位置 (在指定位置上添加完内容后,默认光标会显示在最后,需要让光标保留在追加内容的后面,所以loc + 1)
composeTextView.selectedRange = NSRange(location: selectedRange.location + 1, length: 0)
}
}
}
