前言

最近在公司做了個表情鍵盤的需求，這個需求的技術難度不會很大，比較偏向業務。但是要把用戶體驗做的好也是不容易的，其中有幾個點需要特別注意。話不多說，下面開始正文(注：本文對應的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開發頻道。