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)
}
}
}