iOS表情鍵盤的完整實現

最近在公司作了個表情鍵盤的需求，這個需求的技術難度不會很大，比較偏向業務。可是要把用戶體驗作的好也是不容易的，其中有幾個點須要特別注意。話很少說，下面開始正文(注：本文對應的Demo放在Github上：github.com/VernonVan/P…)。

市面上的表情鍵盤的分析

首先來看一下市面上主要的幾個APP上的表情鍵盤，平時使用的時候不會去關注細節，此次特地去使用了表情鍵盤，發現各個APP的體驗仍是有優有劣的。

首先是QQ和微信，這二者差很少，切換到表情鍵盤的時候都是沒有光標的，這樣的用戶體驗是很是很差的，沒有辦法在輸入表情的時候框選區域，也不能拖動光標進行特定位置的複製黏貼刪除等操做，微信甚至在輸入框裏顯示的都不是點擊的表情圖片，而是文字描述。

接下來看一下微博國際版，國際版調起表情鍵盤時是有光標的，是一個"真正的"鍵盤，可是想要拖拽光標的時候，很大機率上會觸發到保存圖片的行爲（以下圖所示），致使根本沒辦法拖動光標。

同時微博國際版輸入框表情黏貼後的光標定位是錯誤的，以下圖，開始時光標是在第4個表情後面，而後複製狗頭+害羞兩個表情黏貼到光標後，光標仍是在第4個表情後，同時黏貼的表情先後都莫名多了空格。

最後是微博，微博客戶端的表情鍵盤的體驗是很是好的，上面說到的問題都不存在，並且表情鍵盤的刪除按鈕還能長按刪除輸入框的內容。

表情鍵盤的實現

實現效果

主要實現瞭如下幾個功能

• 能輸入表情，有光標，支持複製黏貼刪除表情等

• 長按預覽表情

• 刪除表情、長按連續刪除表情

• 適配 iPhone X

基本思路

首先，表情包的圖片是用bundle的形式組織的，用PPSticker類表徵一套表情包，用PPEmoji類表徵某一個表情，用一個plist做爲配置文件，存儲表情包的信息。

PPStickerDataManager類主要負責數據部分，用單例的形式，這樣能夠在初始化的時候只會讀取一次plist文件中的全部表情信息；同時咱們把輸入框內容發到服務端以及從服務端請求到的都是純文本的，好比會把 "笑死了🤣" 轉成 "笑死了[笑哭]" 這樣的純文本，而不是直接把表情圖片直接發到服務端，也就是說項目中有大量的地方會有把文本->表情的操做，因此PPStickerDataManager類也提供匹配某段純文本中的表情，並把文本替換爲圖片的功能，PPStickerDataManager類的頭文件以下：

@interface PPStickerDataManager : NSObject
​
+ (instancetype)sharedInstance;
​
/// 全部的表情包
@property (nonatomic, strong, readonly) NSArray<PPSticker *> *allStickers;
​
/* 匹配給定attributedString中的全部emoji，若是匹配到的emoji有本地圖片的話會直接換成本地的圖片
 *
 * @param attributedString 可能包含表情包的attributedString
 * @param font 表情圖片的對齊字體大小
 */
- (void)replaceEmojiForAttributedString:(NSMutableAttributedString *)attributedString font:(UIFont *)font;
​
@end複製代碼

"真正的"鍵盤

真正的鍵盤也就是說調起表情鍵盤時輸入框是有光標的，能進行拖拽光標、選中區域等的操做，這樣的體驗纔是與系統鍵盤一致的。其實系統已經提供好了接口給咱們直接使用，UITextView和UITextField都有的inputView和inputAccessoryView就是用來實現自定義鍵盤的，這兩個屬性的定義以下：

// Presented when object becomes first responder.  If set to nil, reverts to following responder chain.  If
// set while first responder, will not take effect until reloadInputViews is called.
@property (nullable, readwrite, strong) UIView *inputView;             
@property (nullable, readwrite, strong) UIView *inputAccessoryView;複製代碼

同時系統鍵盤在 設置->聲音->按鍵音 選項打開且手機非靜音狀態下輸入是有按鍵的聲音的，這個按鍵音也是能夠支持的，只要自定義鍵盤類遵循UIInputViewAudioFeedback協議，同時實現 enableInputClicksWhenVisible方法並返回YES，這樣就能夠在點擊表情的時候調用[[UIDevice currentDevice] playInputClick]方法發出按鍵音了，詳情請查看蘋果的官方文檔。

下面是Demo中鍵盤切換方法的實現：

- (void)changeKeyboardTo:(PPKeyboardType)toType
{
    switch (toType) {
        case PPKeyboardTypeSystem:
            self.textView.inputView = nil;    // 切換到系統鍵盤
            [self.textView reloadInputViews]; // 調用reloadInputViews方法會馬上進行鍵盤的切換
            break;
        case PPKeyboardTypeSticker:            
            self.textView.inputView = self.stickerKeyboard; // 切換到自定義的表情鍵盤
            [self.textView reloadInputViews];
            break;
        default:
            break;
    }
}複製代碼

去除表情的拖拽交互

在iOS11上，UITextView上的NSTextAttachment（表情）默承認以進行拖拽交互，可是卻致使拖動光標時很容易觸發這個交互（圖示能夠查看上面說到的微博國際版中的誤觸）。一番查找以後才找到一個比較隱蔽的屬性：textDragInteraction，直接設置爲NO就能禁止掉NSTextAttachment的拖拽交互。

if (@available(iOS 11.0, *)) {  // 只在iOS11及以上纔有這個屬性
     _textView.textDragInteraction.enabled = NO;
}複製代碼

與服務端的交互

咱們在輸入框中輸入的內容與服務端進行交互的時候都是用純文本的，好比會把 "笑死了🤣" 轉成 "笑死了[笑哭]" 這樣的純文本發到服務端，而不是直接發表情圖片，向服務端請求內容的時候也是傳回 "笑死了[笑哭]"，而後客戶端再根據正則匹配找出表情替換成對應的表情圖片，而後顯示到頁面上。具體過程能夠看下圖：

也就是說，咱們設置到輸入框的NSAttributedString中的每個NSTextAttachment都有一個"隱藏的"屬性—表情的文本描述，這裏對NSAttributedString進行拓展就能實現。pp_setTextBackedString能夠對NSAttributedString的指定range設置一個PPTextBackedString類型的屬性，而pp_plainTextForRange能拿到NSAttributedString指定range的純文本。具體實現以下：

@implementation NSAttributedString (PPAddition)
​
- (NSString *)pp_plainTextForRange:(NSRange)range
{
    if (range.location == NSNotFound || range.length == NSNotFound) {
        return nil;
    }
​
    NSMutableString *result = [[NSMutableString alloc] init];
    if (range.length == 0) {
        return result;
    }
​
    NSString *string = self.string;
    [self enumerateAttribute:PPTextBackedStringAttributeName inRange:range options:kNilOptions usingBlock:^(id value, NSRange range, BOOL *stop) {
        PPTextBackedString *backed = value;
        if (backed && backed.string) {
            [result appendString:backed.string];
        } else {
            [result appendString:[string substringWithRange:range]];
        }
    }];
    return result;
}
​
@end
​
@implementation NSMutableAttributedString (PPAddition)
​
- (void)pp_setTextBackedString:(PPTextBackedString *)textBackedString range:(NSRange)range
{
    if (textBackedString && ![NSNull isEqual:textBackedString]) {
        [self addAttribute:PPTextBackedStringAttributeName value:textBackedString range:range];
    } else {
        [self removeAttribute:PPTextBackedStringAttributeName range:range];
    }
}
​
@end複製代碼

靈活的光標

表情功能，UITextView都是用NSAttributedString進行賦值的，而且咱們底層其實仍是用上面說到的純文本進行實現的，那麼把 [笑死] 轉成 🤣 就會從4個字符變成1個字符，這裏是有差值的，若是不處理的話就會出現上面提到的微博國際版中複製黏貼輸入框的表情會致使光標位置不對，甚至莫名其妙多出先後空格的問題。爲了精準的定位光標，咱們須要自行處理好這些問題。

這裏本身繼承並實現了UITextView的子類PPStickerTextView，在這個類中重載複製、黏貼、剪切等操做，分別對應的方法以下：

- (void)cut:(id)sender;     // 剪切
​
- (void)copy:(id)sender;    // 複製
​
- (void)paste:(id)sender;   // 黏貼複製代碼

下面以剪切方法舉例，看看怎麼處理光標的問題，須要注意的地方請看對應的註釋：

- (void)cut:(id)sender
{
    // 1.從textView中拿到對應的純文本，好比：笑死了[笑死]
    NSString *string = [self.attributedText pp_plainTextForRange:self.selectedRange];
    if (string.length) {
        // 2. 將純文本寫入到剪貼板中
        [UIPasteboard generalPasteboard].string = string;
​
        // 3. 記住當前的光標位置
        NSRange selectedRange = self.selectedRange;
        NSMutableAttributedString *attributeContent = [[NSMutableAttributedString alloc] initWithAttributedString:self.attributedText];
        // 4. 將檢測到是表情的文本替換成對應的圖片
        [attributeContent replaceCharactersInRange:self.selectedRange withString:@""];
        self.attributedText = attributeContent;
      
        // 5. 從新設置光標
        self.selectedRange = NSMakeRange(selectedRange.location, 0);
    }
}複製代碼

技術點的分析就是以上這些，詳細的代碼能夠clone下來查看：github.com/VernonVan/P…