douyin-ios-swift 表情系统源码解析：如何用 NSTextAttachment 实现抖音式表情编辑（完整指南）

douyin-ios-swift 表情系统源码解析如何用 NSTextAttachment 实现抖音式表情编辑完整指南【免费下载链接】douyin-ios-swift抖音 iOS Swift版项目地址: https://gitcode.com/gh_mirrors/do/douyin-ios-swiftdouyin-ios-swift 是一款用 Swift 编写的高仿抖音 iOS 客户端其 IM 群聊模块中用NSTextAttachment实现了完整的抖音式表情编辑能力在输入框里像输入文字一样插入表情图片、点击删除键整块删掉表情、发送时自动转回[文本]形式存储与传输。本文带你读懂这套表情系统的源码结构与核心实现。表情系统整体结构4个核心文件分工整个表情系统围绕编辑和展示两条链路展开涉及以下模块文件职责EmotionHelper.swift核心工具类文本⇄表情双向转换NSTextAttachmentEmotion.swift给附件附加表情键名EmotionSelector.swift底部表情选择器面板ChatTextView.swift聊天输入框插入/删除表情入口数据方面则依赖 emotion.json表情键值映射表和 Emoticons.bundle 里 100 多张2x/3x表情图片资源。NSTextAttachment 实现原理表情为什么算一个字符核心思想非常巧妙一个表情在文本中只占 1 个字符的位置但渲染时是一张图片。创建一个NSTextAttachment附件把表情图片赋给image属性用NSAttributedString(attachment:)把它包装成长度为 1 的富文本替换掉原占位文本插入UITextView。因此在表情上按删除键时系统会把它当作一个普通字符整体删除这正是整块删除表情效果的关键 。附件的显示区域由bounds决定EmotionHelper.swift 中这样设置让图片高度对齐一行文字attachment.bounds CGRect(x: 0, y: EmotionFont.descender, width: EmotionFont.lineHeight, height: EmotionFont.lineHeight / (image.size.width / image.size.height))表情数据是如何组织的emotion.json 包含两个部分dictkiss → [飞吻]的映射字典key 是 Emoticons.bundle 中的图片文件名不含后缀value 是表情对应的方括号文本array二维数组描述选择器每一页排布的表情文件名供翻页展示。EmotionHelper.swift 通过String.readJson2DicWithFileName定义于 String.swift静态加载这两份数据并提供emotionKeyFromValue/emotionValueFromKey两个方法做 key⇄value 互查。文本⇄表情双向转换的核心代码发送前图片表情转回文本用户在输入框插入的是图片附件但消息要发给服务端必须先转成纯文本。emotionToString遍历富文本中所有attachment属性把每个附件替换回[文本]static func emotionToString(str: NSMutableAttributedString) - NSAttributedString { str.enumerateAttribute(.attachment, in: NSRange(location: 0, length: str.length), options: .longestEffectiveRangeNotRequired) { value, range, stop in if let attachment value as? NSTextAttachment, let key attachment.emotionKey { str.replaceCharacters(in: range, with: EmotionHelper.emotionValueFromKey(key: key)) } } return str }这里有个小细节附件上的emotionKey是通过关联对象Associated Object扩展NSTextAttachment加上的见 NSTextAttachmentEmotion.swift——因为原生NSTextAttachment无法直接添加属性extension NSTextAttachment { var emotionKey: String? { get { objc_getAssociatedObject(self, NSTextAttachment._emotionKey) as? String } set { objc_setAssociatedObject(self, NSTextAttachment._emotionKey, newValue, .OBJC_ASSOCIATION_RETAIN) } } }展示时文本再转回图片收到消息后例如[飞吻]stringToEmotion用正则\\[.*?\\]找出所有方括号文本逐一查表换成图片附件并维护lengthOffset修正替换后偏移let pattern \\[.*?\\] let matches regex?.matches(in: str.string, options: [], range: NSRange(location: 0, length: str.length)) ?? [] for match in matches { let attachment NSTextAttachment() attachment.image UIImage(contentsOfFile: emotionPath) // ... 设置 bounds 后用 replaceCharacters 原位替换 }聊天列表各消息 CellTextMessageCell.swift、SystemMessageCell.swift、TimeCell.swift都在initData和计算高度时调用stringToEmotion保证气泡内显示图片表情且高度计算与显示一致。表情选择器与输入框的联动EmotionSelector.swift 用横向滚动的UICollectionView呈现三页表情每页 21 个格子第 20 行固定放删除键底部带页码指示点左右滑动手势切换页面。ChatTextView.swift 作为总控处理三个关键事件选中表情onSelect在光标位置调用EmotionHelper.insertEmotion插入附件并把光标后移 1 位删除键onDelete直接textView.deleteBackward()由于表情只占 1 字符自然整块删除发送onSend先emotionToString转回纯文本再交给上层发送同时用 KVO 监听attributedText变化来控制发送按钮的可用状态。func onSelect(emotionKey: String) { let location textView.selectedRange.location textView.attributedText EmotionHelper.insertEmotion(str: textView.attributedText, index: location, key: emotionKey) textView.selectedRange NSRange(location: location 1, length: 0) }总结这套表情系统值得借鉴的 3 个设计一符一图用NSTextAttachment让表情在文本流中只占 1 个字符删除、计数、光标移动全部免费获得正确行为存文本、展图片传输层永远是[文本]展示层才转图片天然兼容 WebSocket 纯文本协议数据驱动表情列表由 emotion.json 声明新增表情只需加图片文件和一行映射零代码改动。读懂这个模块你也就掌握了 iOS 富文本表情编辑的通用套路可以迁移到自己的 IM 或评论系统中 ✨。【免费下载链接】douyin-ios-swift抖音 iOS Swift版项目地址: https://gitcode.com/gh_mirrors/do/douyin-ios-swift创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考