Swift - 一步一步创建一个表情键盘
2020-08-20 本文已影响0人
北海有鱼w
先上效果图
Aug-20-2020 11-46-12.gif
忽略粗糙的UI和表情😊
一、准备数据
这里的数据结构是以plist文件的形式，包含图片名称，图片服务器名称以及图片路径。每一个图片文件夹都包含一个
info.plist文件，再创建一个总的配置plist文件。如图：
F7CE2097-96D7-4E1B-A5A6-68A1322EA236.png
到此为止，plist文件准备好了，接下来就是创建数据模型，首先创建Emoticon模型即表情模型：
/// 发送给服务器的字符串
@objc var ch: String?
/// 本地图片名称
@objc var png: String?
/// 本地图片文件路径
var imagePath: String {
return Bundle.main.path(forResource: "Emoticons.bundle", ofType: nil)! + "/" + (png ?? "")
}
/// 是否删除按钮
var remove: Bool = false
/// 是否空按钮
var empty: Bool = false
//MARK: - 构造函数
init(remove: Bool) {
super.init()
self.remove = remove
}
init(empty: Bool) {
super.init()
self.empty = empty
}
init(dict: [String: Any]) {
super.init()
setValuesForKeys(dict)
}
/// 重写undefinedkey，防止未找到key崩溃问题
override func setValue(_ value: Any?, forUndefinedKey key: String) {
print(key)
}
/// 重写描述信息
override var description: String {
let keys = ["ch","png"]
return dictionaryWithValues(forKeys: keys).description
}
其次创建表情包模型EmoticonPack
/// 文件路径名称(对应总配置文件)
@objc var id: String?
/// 表情组名称
@objc var name: String?
/// 表情模型
@objc lazy var emoticons = [Emoticon]()
需要在EmoticonPack的构造函数中，配置emoticons数组
init(dict: [String: Any]) {
super.init()
id = dict["id"] as? String
name = dict["name"] as? String
if let array = (dict["emoticons"] as? [[String: Any]]) {
var index = 0
for var d in array {
if let png = d["png"] as? String, let dir = id {
d["png"] = dir + "/" + png
}
emoticons.append(Emoticon(dict: d))
index += 1
// 添加删除按钮
if index == 20 {
emoticons.append(Emoticon(remove: true))
index = 0
}
}
}
addEmpty()
}
/// 添加空白按钮
private func addEmpty() {
let count = emoticons.count % 21
// 有表情并且能被整除不添加
if emoticons.count > 0 && count == 0 {
return
}
for _ in count..<20 {
emoticons.append(Emoticon(empty: true))
}
emoticons.append(Emoticon(remove: true))
}
最后准备一个单例，依次加载每个plist文件，获取到图片的完整路径，添加到UI数据源。
static let sharedManager = EmoticonManager()
var packs = [EmoticonPack]()
private override init() {
super.init()
// 加载icon.plist文件
let path = Bundle.main.path(forResource: "icon.plist", ofType: nil, inDirectory: "Emoticons.bundle")
let dict = NSDictionary(contentsOfFile: path ?? "") as! [String: Any]
// 获取字典数组中的key对应的value
let array = (dict["icons"] as! NSArray).value(forKey: "id")
/**
(
"com.wzc.icon",
"com.wzc.iconfont"
)
*/
for s in (array as! [String]) {
loadInfoPlist(id: s)
}
}
/// 加载info.plist文件
/// - Parameter id: 文件名称
private func loadInfoPlist(id: String) {
let path = Bundle.main.path(forResource: "info.plist", ofType: nil, inDirectory: "Emoticons.bundle/\(id)")
let dict = NSDictionary(contentsOfFile: path ?? "") as! [String: Any]
packs.append(EmoticonPack(dict: dict))
}
到此位置，数据模型准备完成，开始UI的设置。
二、准备UI
1.UI部分由3个部分组成：
-UICollectionView即中间的表情键盘
-UIToolBar即上面的表情切换按钮和下面的表情名称
自定义一个EnIconView，声明两个属性
private lazy var collectionView: UICollectionView =
UICollectionView(frame: CGRect.zero,
collectionViewLayout: EniconLayout())
private lazy var toolbar = UIToolbar()
为了方便FlowLayout的创建和配置，自定义EniconLayout继承自UICollectionViewFlowLayout，可通过私有类的方式写在自定义EnIconView里面
private class EniconLayout: UICollectionViewFlowLayout {
override func prepare() {
super.prepare()
let col: CGFloat = 7
let row: CGFloat = 3
let w: CGFloat = (collectionView?.bounds.width)! / col
let margin = ((collectionView?.bounds.height)! - row * w) * 0.4999
itemSize = CGSize(width: w, height: w)
minimumLineSpacing = 0
minimumInteritemSpacing = 0
sectionInset = UIEdgeInsets(top: margin, left: 0, bottom: margin, right: 0)
scrollDirection = .horizontal
collectionView?.isPagingEnabled = true
collectionView?.bounces = false
collectionView?.showsHorizontalScrollIndicator = false
}
}
自定义EnIconView的构造函数，这里使用闭包传值，声明一个闭包属性以记录选中表情回调参数。
/// 选中表情回调
private var selectedEmoticonCallBack: (_ emoticon: Emoticon) -> ()
init(selectedEmoticon: @escaping (_ emoticon: Emoticon) -> ()) {
selectedEmoticonCallBack = selectedEmoticon
var rect = UIScreen.main.bounds
rect.size.height = 216+kGestureHeight
super.init(frame: rect)
backgroundColor = UIColor.white
setupUI()
}
根据数据模型数据，创建绑定数据模型，加载表情视图。
这里分享一个小技巧，创建表情视图cell的时候，可以通过bounds.insetBy(dx: 4, dy: 4)函数，返回一个中心点相同x和y缩小4的frame，这样就不用去计算minimumLineSpacing和minimumInteritemSpacing
collectionView的自定义cell：
//MARK: - 构造函数
override init(frame: CGRect) {
super.init(frame: frame)
iconButton.isUserInteractionEnabled = false
contentView.addSubview(iconButton)
iconButton.backgroundColor = UIColor.white
// 返回一个中心点相同x和y缩小4的frame
iconButton.frame = bounds.insetBy(dx: 4, dy: 4)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//MARK: - 懒加载控件
private lazy var iconButton: UIButton = UIButton()
最后，通过didSet绑定图片和删除按钮等。
三、关于表情图片和文字的编排，也可以叫图文混排？
我们知道可以通过NSMutableAttributedString插入图片，而图片时通过NSTextAttachment附件传递的，为了取到图片对应的服务器名称，自定义一个继承自NSTextAttachment的EmoticonAttachment，它的功能是方便获取插入的图片所对应的表情模型，取到我们需要的数据。
class EmoticonAttachment: NSTextAttachment {
var emoticon: Emoticon
//MARK: - 构造函数
init(emoticon: Emoticon) {
self.emoticon = emoticon
super.init(data: nil, ofType: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
这样，通过EmoticonAttachment的构造函数，就可以轻松的把表情模型作为一个属性存储在EmoticonAttachment里面，可以通过这个属性获取表情模型，取到需要的字符。
接下来在在一个视图控制器中，引用自定义EnIconView
private lazy var eniconView: EnIconView = EnIconView { [weak self](emoticon) in
self?.textView.inserEmoticonView(em: emoticon)
}
插入图片
func inserEmoticonView(em: Emoticon) {
if em.empty {
return
}
if em.remove {
deleteBackward()
return
}
let imageText = EmoticonAttachment(emoticon: em).imageText(font: font!)
let attributeM = NSMutableAttributedString(attributedString: attributedText)
// 插入图片
attributeM.replaceCharacters(in: selectedRange, with: imageText)
// 记录光标位置
let range = selectedRange
attributedText = attributeM
selectedRange = NSRange(location: range.location+1, length: 0)
}
这样就可以实现表情图片和文字混排了，最后需要把表情图片所代表的特殊字符串发送到后台：
func sendText() -> String {
let attributeText = attributedText
var strM = String()
attributeText?.enumerateAttributes(in: NSRange(location: 0, length: attributeText!.length), options: [], using: { (dict, range, _) in
if let attachment = dict[NSAttributedString.Key(rawValue: "NSAttachment")] as? EmoticonAttachment {
strM += attachment.emoticon.ch ?? ""
} else {
let str = (attributeText!.string as NSString).substring(with: range)
strM += str
}
})
return strM
}
在此处，便利循环textView的attributeText属性，获取图片所代表的服务器字段，重新append就ok了。
FA44D897-D3D9-4D89-B126-5449944D9833.png
可以直接下载Emoticon导入项目更换里面的表情包。
使用：只需要两步：
1、在控制器中引用
private lazy var eniconView: EnIconView = EnIconView { [weak self](emoticon) in
self?.textView.inserEmoticonView(em: emoticon)
}
2、设置textView的inpuView
textView.inputView = textView.inputView == nil ? eniconView : nil
如有错误和疏漏之处，欢迎在评论区留言斧正。
完整Demo传送门 提取密码:mq4e
