表情键盘及文字表情识别简单demo

1、前言

• 了解了简单图文混排 （属性字符串的使用）及 正则表达式的部分知识，为了加深印象，写了个简单表情键盘demo

• 展示文字用的是 UITextView

• 由于时间匆忙，存在一些bug，以及不完善的地方，仅作为小demo 练习一下

• 图文混排可以用 TextKit ，下次有时间学习下

• 环境 xcode 7.3 ， swift 2.3

2、效果

3、表情键盘相关

• Emoticons.bundle 资源包来源于网络

• 设计好模型 如（EmoticonPackage、EmoticonItem）

class EmoticonPackage: NSObject {
    // MARK: **** 属性 ****
    var id: String?
    lazy var emoticons: [EmoticonItem] = [EmoticonItem]()
    // MARK: **** kvc ****
    override init() {
    }
    init(dict: [String: AnyObject]) {
        super.init()
        setValuesForKeysWithDictionary(dict)
    }
    override func setValue(value: AnyObject?, forUndefinedKey key: String) {
    }
}

class EmoticonItem: NSObject {
    /// 文件夹名
    var id: String? {
        didSet {
            guard let pn = png else {
                return
            }
            guard let iD = id else {
                return
            }
            pngPath = iD  + "/" + pn
        }
    }
    /// emoji
    var code: String? {
        didSet {
            guard let codeStr = code else {
                return
            }
            let scanner = NSScanner(string: codeStr)
            var result: UInt32 = 0
            scanner.scanHexInt(&result)
            let ch = Character(UnicodeScalar(result))
            emojiCode = "\(ch)"
        }
    }
    var emojiCode: String?
    /// 文字
    var chs: String?
    /// 图片
    var png: String?
    /// 使用次数
    var count: Int = 0
    /// 图片路径
    var pngPath: String?

    // MARK: **** kvc ****
    override init() {
    }
    init(dict: [String: AnyObject]) {
        super.init()
        setValuesForKeysWithDictionary(dict)
    }
    override func setValue(value: AnyObject?, forUndefinedKey key: String) {
    }
}

• 表情键盘 EmoticonKeyboardView 为一个自定义view ，里面包含一个collectionView 来展示每个 EmoticonItem

  • collectionView 的cell 里面是一个button，因为表情能够显示图片也能够点击

  • 总共为4组数据， 最近这组数据为21个，包含最后的删除按钮，并且默认为空的，当点击其他组的表情时，会根据该表情的点击次数才决定在最近这组的显示前后

  • 默认为图片表情，浪小花为图片表情，emoji为系统emoji表情

• 设计了一个工具类 EmoticonTool 来处理数据模型

  • 每隔20个数据添加一个删除按钮 （删除按钮也是表情的模型，只是显示的图片是删除的图片）

  • 一页是21个，每组的数据不足整页的话需要补空白模型

• 最近这组表情数据的添加

// MARK: **** 最近这组 添加表情 ****
extension EmoticonPackage {
    // 最近  第一组添加表情
    func addEmoticon(emoticon: EmoticonItem) {
        // 先移除删除按钮
        self.emoticons.removeAtIndex(20)
        // 判断是否已经包含该表情
        let isContain = self.emoticons.contains(emoticon)
        if  !isContain {
            self.emoticons.append(emoticon)
        }
        // 数组中模型根据某一条件排序 生成新的数组
        let sortEmoArray = self.emoticons.sort { (e1, e2) -> Bool in
            return e1.count >= e2.count
        }
        self.emoticons = sortEmoArray
        // 添加删除按钮
        let deleEmo = EmoticonItem()
        deleEmo.png = "compose_emotion_delete"
        self.emoticons.insert(deleEmo, atIndex: 20)
        // 超过20 的 (空白)表情删除 , 永远只保留21个表情
        for i in 21..<self.emoticons.count {
            self.emoticons.removeAtIndex(i)
        }

    }
}

• 插入表情是 在 UITextView 里做的

// MARK: **** 插入表情 ****
extension TextView {
    /// 插入表情
    func insertEmoticon(emoticon: EmoticonItem) {
        // 1、emoji表情
        if  emoticon.code != nil && emoticon.emojiCode != nil   {
            // 获取光标的range

            guard let selectRange = self.selectedTextRange else {
                self.selectedRange = NSRange(location: 0, length: 0)
                self.replaceRange(self.selectedTextRange!, withText: emoticon.emojiCode!)
                return
            }
            self.replaceRange(selectRange, withText: emoticon.emojiCode!)
            return
        }
        // 2、图片表情
        // 获取当前的显示的内容 生成一个属性字符串
        let strM = NSMutableAttributedString(attributedString: self.attributedText)

        // strM 里 替换
        // textView 光标位置
        let range = self.selectedRange

        // 把图片 变成属性字符串 ，并设置 attachment 的高度, 设置图片表情的bounds，没有frame
        guard let attrStr = TextAttachment.createAttachmetn(emoticon, height: self.font!.lineHeight) else {
            return
        }
        strM.replaceCharactersInRange(range, withAttributedString: attrStr)
        // 设置 光标位置下一个的 strM 的字体大小为 textView的字体大小
        // 解决插入第一个表情图片大小合适，第二个以后的所有表情都比较小的问题
        strM.addAttribute(NSFontAttributeName, value: self.font! , range: NSMakeRange(range.location, 1))
        // 设置 textView 的属性文本
        self.attributedText = strM
        // 还原textView 的光标位置
        // 解决插入表情后光标始终在最后面而不是在当前位置
        self.selectedRange = NSRange(location: range.location + 1 , length: range.length)
    }

}

4、识别文字中的表情及高亮url、特殊字段

• 当UITextView 只是用来展示文字的时候需要 让UITextViw 不能编辑

• 根据表情文字找到对应的表情模型 ，在EmoticonTool工具类里

// MARK: **** 根据表情文字找到对应的表情模型 ****
extension EmoticonTool {
    /**
     根据表情文字找到对应的表情模型
     :param: str 表情文字
     :returns: 表情模型
     */
    class func emoticonWithStr(str: String) -> EmoticonItem?
    {
        var emoticon: EmoticonItem?
        for package in getDefaultEmoticon()!
        {
            // filter ,找数组中模型，条件是模型的某个属性等于某个值
            emoticon = package.emoticons.filter({ (emo) -> Bool in
                return emo.chs == str
            }).last
            if  emoticon != nil {
                break
            }

        }
        return emoticon
    }
}

• 识别、匹配表情

// MARK: **** 识别、匹配表情 ****
extension UITextView {
     func recognizeEmoticon() {
        // 表情符号的 range
        let pattern = "\\[\\w+\\]"
        guard let regex = try? NSRegularExpression(pattern: pattern, options: NSRegularExpressionOptions(rawValue: 0)) else {
            return
        }
        let result = regex.matchesInString(self.text, options: NSMatchingOptions(rawValue: 0), range: NSRange(location: 0, length: self.text.characters.count))
        // textView里面最开始的文字
        let strM = NSMutableAttributedString(attributedString: self.attributedText)
        // 记录textView 光标位置
        let cursorRange = self.selectedRange
        // 要从后往前遍历 寻找表情文字
        for temp in result.reverse()  {
            let resultStr = (self.text as NSString).substringWithRange(temp.range)
            guard let emo = EmoticonTool.emoticonWithStr(resultStr) else {
                continue
            }

            guard let attachStr = TextAttachment.createAttachmetn(emo, height: self.font!.lineHeight) else {
                return
            }
            // 生成总的属性字符串， 替换range位置 为  表情图片的属性字符串

            strM.replaceCharactersInRange(temp.range, withAttributedString: attachStr)
        }

        self.attributedText = strM
        self.selectedRange = cursorRange

    }
}

• 高亮特殊字段

// MARK: **** 高亮显示特殊字符 ****
extension TextView {

    func setupHighlight() {
        // 高亮显示
        let pattern1 = "#\\w+#"
        let pattern2 = "@\\w+:"
        let pattern3 = "(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]?"
        let pattern4 = "\\[\\w+\\]"
        let pattern = pattern1 + "|" + pattern2 + "|" + pattern3 + "|" + pattern4
        guard let regex = try? NSRegularExpression(pattern: pattern, options: NSRegularExpressionOptions(rawValue: 0)) else {
            return
        }
        let resultArray = regex.matchesInString(self.text, options: NSMatchingOptions(rawValue: 0), range: NSRange(location: 0, length: self.text.characters.count))
        // textView里面最开始的文字
        let strM = NSMutableAttributedString(attributedString: self.attributedText)
        for temp in resultArray {
            // 拿到range
            strM.setAttributes([NSForegroundColorAttributeName: UIColor.redColor(),
                NSFontAttributeName: self.font!], range: temp.range)
        }
        self.attributedText = strM

    }
}

• 监听特殊字段的点击

// MARK: **** 监听特殊字符的点击 ****
extension TextView {
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        // 获取点
        guard let touch = (touches as NSSet).anyObject() as? UITouch else {
            return
        }
        let point = touch.locationInView(self)

        //
        let pattern1 = "#\\w+#"
        let pattern2 = "@\\w+:"
        let pattern3 = "http(s)?://([\\w-]+\\.)+[\\w-]+(/[\\w- ./?%&=]*)?"
        let pattern4 = "\\[\\w+\\]"
        let pattern = pattern1 + "|" + pattern2 + "|" + pattern3 + "|" + pattern4
        guard let regex = try? NSRegularExpression(pattern: pattern, options: NSRegularExpressionOptions(rawValue: 0)) else {
            return
        }
        let resultArray = regex.matchesInString(text, options: NSMatchingOptions(rawValue: 0), range: NSRange(location: 0, length: text.characters.count))
        for temp in resultArray {
            // 拿到range
            selectedRange = temp.range
            let array =  self.selectionRectsForRange(selectedTextRange!)
            for tmp in array {

                if CGRectContainsPoint(tmp.rect, point)  {
                    // 点在 范围里 (tmp.rect frame)
                    // 加入想做的事情 

                    print( (text as NSString).substringWithRange(temp.range))

                }
            }
            // 最后取消选中的range ，设置 range 只是来转换为 rect frame
            self.selectedRange = NSRange(location: 0, length: 0)
        }
    }

}

5、小demo地址： https://github.com/CH-HOWIE/emoticon