iOS中表情键盘的完整实现方法详解

前言

最近在公司做了个表情键盘的需求，这个需求的技术难度不会很大，比较偏向业务。但是要把用户体验做的好也是不容易的，其中有几个点需要特别注意。话不多说，下面开始正文(注：本文对应的Demo放在Github上：https://github.com/VernonVan/PPStickerKeyboard  )。

市面上的表情键盘的分析

首先来看一下市面上主要的几个APP上的表情键盘，平时使用的时候不会去关注细节，这次特意去使用了表情键盘，发现各个APP的体验还是有优有劣的。

首先是QQ和微信，这两者差不多，切换到表情键盘的时候都是没有光标的，这样的用户体验是非常不好的，没有办法在输入表情的时候框选区域，也不能拖动光标进行特定位置的复制黏贴删除等操作，微信甚至在输入框里显示的都不是点击的表情图片，而是文字描述。

微信QQ表情键盘.JPG

接下来看一下微博国际版，国际版调起表情键盘时是有光标的，是一个"真正的"键盘，但是想要拖拽光标的时候，很大概率上会触发到保存图片的行为（如下图所示），导致根本没办法拖动光标。

微博国际版误触.JPG

同时微博国际版输入框表情黏贴后的光标定位是错误的，如下图，开始时光标是在第4个表情后面，然后复制狗头+害羞两个表情黏贴到光标后，光标还是在第4个表情后，同时黏贴的表情前后都莫名多了空格。

微博国际版黏贴.JPG

最后是微博，微博客户端的表情键盘的体验是非常好的，上面说到的问题都不存在，而且表情键盘的删除按钮还能长按删除输入框的内容。

微博表情键盘.jpg

表情键盘的实现

实现效果

主要实现了以下几个功能

• 能输入表情，有光标，支持复制黏贴删除表情等
• 长按预览表情
• 删除表情、长按连续删除表情
• 适配 iPhone X

演示.GIF

基本思路

首先，表情包的图片是用bundle的形式组织的，用PPSticker类表征一套表情包，用PPEmoji类表征某一个表情，用一个plist作为配置文件，存储表情包的信息。

表情的组织.jpg

PPStickerDataManager类主要负责数据部分，用单例的形式，这样可以在初始化的时候只会读取一次plist文件中的所有表情信息；同时我们把输入框内容发到服务端以及从服务端请求到的都是纯文本的，比如会把 "笑死了
注：相关教程知识阅读请移步到IOS开发频道。