iOS中表情鍵盤的完整實(shí)現(xiàn)方法詳解

第iOS中表情鍵盤的完整實(shí)現(xiàn)方法詳解前言

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

市面上的表情鍵盤的分析

首先來看一下市面上主要的幾個(gè)APP上的表情鍵盤，平時(shí)使用的時(shí)候不會(huì)去關(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

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

微博國(guó)際版誤觸.JPG

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

微博國(guó)際版黏貼.JPG

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

微博表情鍵盤.jpg

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

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

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

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

演示.GIF

基本思路

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

表情的組織.jpg

PPStickerDataManager類主要負(fù)責(zé)數(shù)據(jù)部分，用單例的形式，這樣可以在初始化的時(shí)候只會(huì)讀取一次plist文件