簡介

自定義的表情輸入鍵盤在很多應用中都會有用到，譬如微信、QQ 等社交聊天軟件中更是不可缺少的部分。本文將解析一下個人的自定義表情輸入控件庫 PandaEmoView 的實現和使用。

該庫具有以下特點：

• 支持 emoji 表情圖片
• 支持 gif 動態表情輸入顯示
• 支持單張貼圖表情（與微信收藏表情一致）
• 支持題圖表情庫的添加刪除

效果圖：

效果圖

快速使用

引入庫

compile 'com.pandaq:PandaEmoView:1.0.0'

表情資源及配置文件

• 默認的 emoji 和 gif 表情以及他們的配置文件是放在開發包 assets 目錄下的，若表情比較多比較大也可自行修改源碼在 APP 啟動時從服務器下載。

assets 目錄圖片

• emoji 表情配置文件

config 截圖

• 非自定義 sticker 配置文件(自定義 sticker 是沒有配置文件的)

sticker config 截圖

具體使用規則

與表情輸入控件相關的 EditText 必須使用 PandaEditText
PandaEditText 只是重寫了 onKeyPreIme() 獲取按返回鍵的通知，繼承自 EditText 的控件可繼承 PandaEditText 自定義

1.應用 Application 中進行全局參數配置

    private void configPandaEmoView() {
        new PandaEmoManager.Builder()
                .with(getApplicationContext()) // 傳遞 Context
                .configFileName("emoji.xml")// 配置文件名稱
                .emoticonDir("face") // asset 下存放表情的目錄路徑（asset——> configFileName 之間的路徑,結尾不帶斜杠）
                .sourceDir("images") // 存放 emoji 表情資源文件夾路徑（emoticonDir 圖片資源之間的路徑,結尾不帶斜杠）
                .showAddTab(true)//tab欄是否顯示添加按鈕
                .showStickers(true)//tab欄是否顯示貼圖切換按鍵
                .showSetTab(true)//tab欄是否顯示設置按鈕
                .defaultBounds(30)//emoji 表情顯示出來的寬高
                .cacheSize(1024)//加載資源到內存時 LruCache 緩存大小
                .defaultTabIcon(R.drawable.ic_default)//emoji表情Tab欄圖標
                .emojiColumn(7)//單頁顯示表情的列數
                .emojiRow(3)//單頁顯示表情的行數
                .stickerRow(2)//單頁顯示貼圖表情的行數
                .stickerColumn(4)//單頁顯示貼圖表情的列數
                .maxCustomStickers(30)//允許添加的收藏表情數
                .imageLoader(new IImageLoader() {
                    @Override
                    public void displayImage(String path, ImageView imageView) { // 加載貼圖表情的圖片加載接口
                        Picasso.with(getApplicationContext())
                                .load(path)
                                .fit()
                                .centerCrop()
                                .into(imageView);
                    }
                })
                .build(); //構建 PandaEmoManager 單利
    }

2.使用此控件的 Activity 在 manifest 文件中配置

// 這句是一定要加上的。
android:windowSoftInputMode="adjustResize"

3.使用此控件的界面 xml 文件規則
布局規則如下圖，lockView 即是我們正常顯示內容的 View 它與表情輸入控件 PandaEmoView 屬于同一層級，父布局必須為縱向線性布局，且設置 lockView 權重為 1 ，PandaEmoView 高度包裹內容即可

布局規則說明

4.使用控件的 Activity Java 代碼設置

//界面控件初始化后 .attachEditText()綁定輸入控件

//初始化 KeyBoardManager，PandaEmoView.attachEditText() 必須在后調用

主要使用類及公有方法概覽

PandaEmoEditText

• 表情輸入框繼承自 EditText 只對 onKeyIme() 進行復寫用于監聽輸入鍵盤或者軟鍵盤的彈出與關閉

PandaEmoView

• 表情輸入控件 View 繼承自 RelativeLayout

PandaEmoManager

• PandaEmoManager 為核心配置類，表情控件的各種參數都通過此類的構造器進行配置

剩余方法都為屬性值的 getter() setter() 不在贅述。

PandaEmoManager.Builder

• PandaEmoManager 的構造器類，屬性及方法都與 PandaEmoManager 一一對應；

KeyBoardManager

• KeyBoardManager 為輸入法軟鍵盤與表情輸入控件協調管理類

EmoticonManager

• EmoticonManager 為 emoji 表情加載管理類，此類提供方法將資源文件根據配置文件加載進內存，方法大多數為私有方法，源碼中可查看注釋。

StickerManager

• StickerManager 為 sticker 表情加載管理類，此類提供方法將資源文件根據配置文件加載進內存，與 EmoticonManager 類似

PandaEmoTranslator

• PandaEmoTranslator 為 emoji 表情 [文字] 轉表情的轉換工具類

關于內存優化

因為表情，gif 表情，自定義貼圖，表情包貼圖這些都涉及到圖片資源加載到內存中。因此開發過程中不可避免的也遇到了許多的內存優化相關的問題。

工具

就地取材，直接使用 Android Studio 的 Monitors 工具可以直觀的查看到應用運行過程中內存的變化過程

優化點1 —— Gif 播放類的優化

• 問題：
  參考網上的 gif 圖文混排項目，雖然實現了 gif 與文字的圖文混排效果，但存在致命的缺陷。該項目中每一個 gif 動態表情圖都有一個對應的 Runable 對象去執行 gif 圖片的逐幀播放，當一個表情重復輸入也會有新的 Runable 對象去執行這樣的操作，這樣做的后果就是當輸入的表情數量增加時，所消耗的內存是持續增長的。這顯然不能滿足生產使用的需求。
• 解決方案：
  考慮到此處內存增加的原因是讓表情動起來的 Runable 泛濫引起的，因此減少 Runable 的數量就是解決此處內存問題的關鍵。我的方案做的比較徹底，整個應用 gif 表情這一塊兒都交給一個 Runable 去處理，這個 Runable 在 PandaTranslator 中進行圖文轉化時會被初始化

 // PandaTranslator 的 103 - 107 行 
 103                   if (mGifRunnable == null) {
 104                      mGifRunnable = new GifRunnable(gifDrawable, mHandler);
 105                   } else {
 106                      mGifRunnable.addGifDrawable(gifDrawable);
 107                   }

因為 PandaTranslator 是一個單例實現，所以在他初始化后 mGifRunnable 也將保持唯一性。無論是新建初始化還是 addGifDrawable() 都是把 Gif 表情對象放入 GifRunnable 中的一個 Map 中。Map 的 key value 分別是表情控件依附的 Activity 的 LocalName 和 一個 AnimatedGifDrawable 的 List。在 GifRunnable 的 run 方法中會根據當前的 Activity 的 LocalName 去取出對應的 AnimatedGifDrawable 列表，遍歷執行并按第一張 gif 表情的幀間隔去刷新 Drawable 并觸發 TextView 刷新回調

@Override
    public void run() {
        isRunning = true;
        if (currentActivity != null) {
            List<AnimatedGifDrawable> runningDrawables = mGifDrawableMap.get(currentActivity);
            if (runningDrawables != null) {
                for (AnimatedGifDrawable gifDrawable : runningDrawables) {
                    AnimatedGifDrawable.RunGifCallBack listener = gifDrawable.getUpdateListener();
                    List<AnimatedGifDrawable.RunGifCallBack> runningListener = listenersMap.get(currentActivity);
                    if (runningListener != null) {
                    // 避免一個 TextView 多個表情時重復添加回調
                        if (!runningListener.contains(listener)) {
                            runningListener.add(listener);
                        }
                    } else {
                        // 為空時肯定不存在直接添加
                        runningListener = new ArrayList<>();
                        runningListener.add(listener);
                        listenersMap.put(currentActivity, runningListener);
                    }
                    gifDrawable.nextFrame();
                }
                for (AnimatedGifDrawable.RunGifCallBack callBack : listenersMap.get(currentActivity)) {
                    if (callBack != null) {
                        callBack.run();
                    }
                }
                frameDuration = runningDrawables.get(0).getFrameDuration();
            }
        }
        mHandler.postDelayed(this, frameDuration);
    }

這樣就實現了全局使用一個 Runable 來執行 gif 動起來的任務，不同的界面也僅需要將該界面的 AnimatedGifDrawable 對象加入任務 Map 即可。

優化點2 —— 界面暫停或退出時 Gif 播放資源同步退出回收

上面說到的將 AnimatedGifDrawable 列表加入任務 Map，只進不出顯然是不科學的也會持續增加內存的消耗。我們希望在 Activity 退出時能將將當前 Activity 的 AnimatedGifDrawable 列表銷毀移除，在界面不可見但是可能會恢復時（pause 狀態）暫停 Runable 的執行，減少資源消耗。于是 GifRunable 提供了如下三個方法給外部調用

/**
     * 使用了表情轉換的界面退出時調用，停止動態圖handler
     */
    public void clearHandler(String activityName) {
        currentActivity = null;
        //清除當前頁的數據
        mGifDrawableMap.remove(activityName);
        // 當退出當前Activity后沒表情顯示時停止 Runable 清除所有動態表情數據
        listenersMap.remove(activityName);
        if (mGifDrawableMap.size() == 0) {
            clearAll();
        }
    }

    private void clearAll() {
        mHandler.removeCallbacks(this);
        mHandler.removeCallbacksAndMessages(null);
        mGifDrawableMap.clear();
        isRunning = false;
    }

    /**
     * 啟動運行
     */
    public void startHandler(String activityName) {
        currentActivity = activityName;
        if (mGifDrawableMap != null && mGifDrawableMap.size() > 0 && !isRunning) {
            run();
        }
    }

它的調用入口都在 PandaTranslator 中，然后我們只需在使用到 PandaEmoView 或者直接在 BaseActivity 的 onResume(),onPause(),onDestory() 中分別調用以下三個方法：

PandaTranslator.getInstance().resumeGif(activityLocalName);

PandaTranslator.getInstance().pauseGif();

PandaTranslator.getInstance().clearGif(activityLocalName)

優化點3 —— 使用 LruCache 緩存 emoji 資源

根據 LRU 規則將表情 Gif 緩存，避免重復加載創建新對象。

最后

因為離職從南京回到成都還有工作的各種各樣的原因，也是有四個多月沒更博客了。這是重新開始寫博客的第一篇，之后大概會以一個月 2-3 篇的樣子更新，記錄與分享，歡迎大家關注我的簡書。

本庫地址 PandaEmoView 歡迎 star 和提 issue