前言

最近在公司做了個(gè)表情鍵盤的需求，這個(gè)需求的技術(shù)難度不會很大，比較偏向業(yè)務(wù)。但是要把用戶體驗(yàn)做的好也是不容易的，其中有幾個(gè)點(diǎn)需要特別注意。話不多說，下面開始正文(注：本文對應(yīng)的Demo放在Github上：https://github.com/VernonVan/PPStickerKeyboard  )。

市面上的表情鍵盤的分析

首先來看一下市面上主要的幾個(gè)APP上的表情鍵盤，平時(shí)使用的時(shí)候不會去關(guān)注細(xì)節(jié)，這次特意去使用了表情鍵盤，發(fā)現(xiàn)各個(gè)APP的體驗(yàn)還是有優(yōu)有劣的。

首先是QQ和微信，這兩者差不多，切換到表情鍵盤的時(shí)候都是沒有光標(biāo)的，這樣的用戶體驗(yàn)是非常不好的，沒有辦法在輸入表情的時(shí)候框選區(qū)域，也不能拖動(dòng)光標(biāo)進(jìn)行特定位置的復(fù)制黏貼刪除等操作，微信甚至在輸入框里顯示的都不是點(diǎn)擊的表情圖片，而是文字描述。

微信QQ表情鍵盤.JPG

接下來看一下微博國際版，國際版調(diào)起表情鍵盤時(shí)是有光標(biāo)的，是一個(gè)"真正的"鍵盤，但是想要拖拽光標(biāo)的時(shí)候，很大概率上會觸發(fā)到保存圖片的行為（如下圖所示），導(dǎo)致根本沒辦法拖動(dòng)光標(biāo)。

微博國際版誤觸.JPG

同時(shí)微博國際版輸入框表情黏貼后的光標(biāo)定位是錯(cuò)誤的，如下圖，開始時(shí)光標(biāo)是在第4個(gè)表情后面，然后復(fù)制狗頭+害羞兩個(gè)表情黏貼到光標(biāo)后，光標(biāo)還是在第4個(gè)表情后，同時(shí)黏貼的表情前后都莫名多了空格。

微博國際版黏貼.JPG

最后是微博，微博客戶端的表情鍵盤的體驗(yàn)是非常好的，上面說到的問題都不存在，而且表情鍵盤的刪除按鈕還能長按刪除輸入框的內(nèi)容。

微博表情鍵盤.jpg

表情鍵盤的實(shí)現(xiàn)

實(shí)現(xiàn)效果

主要實(shí)現(xiàn)了以下幾個(gè)功能

• 能輸入表情，有光標(biāo)，支持復(fù)制黏貼刪除表情等
• 長按預(yù)覽表情
• 刪除表情、長按連續(xù)刪除表情
• 適配 iPhone X

演示.GIF

基本思路

首先，表情包的圖片是用bundle的形式組織的，用PPSticker類表征一套表情包，用PPEmoji類表征某一個(gè)表情，用一個(gè)plist作為配置文件，存儲表情包的信息。

表情的組織.jpg

PPStickerDataManager類主要負(fù)責(zé)數(shù)據(jù)部分，用單例的形式，這樣可以在初始化的時(shí)候只會讀取一次plist文件中的所有表情信息；同時(shí)我們把輸入框內(nèi)容發(fā)到服務(wù)端以及從服務(wù)端請求到的都是純文本的，比如會把 "笑死了
注：相關(guān)教程知識閱讀請移步到IOS開發(fā)頻道。