android高仿微信表情輸入與鍵盤輸入詳解－解決跳閃與表情切換問題

阿新 • • 發佈：2018-12-23

private void unlockContentHeightDelayed() {
    mEditText.postDelayed(new Runnable() {
        @Override
        public void run() {
            ((LinearLayout.LayoutParams) mContentView.getLayoutParams()).weight = 1.0F;
        }
    }, 200L);
}

其中的LinearLayout.LayoutParams.weight = 1.0F;，在程式碼裡動態更改LayoutParam的weight，會導致父控制元件重新onLayout()，也就達到改變控制元件的高度的目的。

package com.zejian.emotionkeyboard.emotionkeyboardview;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.graphics.Rect;
import android.os.Build;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.LinearLayout;
import com.zejian.emotionkeyboard.utils.LogUtils;
/**
 * author : zejian
 * time : 2016年1月5日 上午11:14:27
 * email :  
[email protected]
 * description :原始碼來自開源專案https://github.com/dss886/Android-EmotionInputDetector
 * 				本人僅做細微修改以及程式碼解析
 */
public class EmotionKeyboard {
	
    	private static final String SHARE_PREFERENCE_NAME = "EmotionKeyboard";
        private static final String SHARE_PREFERENCE_SOFT_INPUT_HEIGHT = "soft_input_height";
	    private Activity mActivity;
	    private InputMethodManager mInputManager;//軟鍵盤管理類
	    private SharedPreferences sp;
	    private View mEmotionLayout;//表情佈局
	    private EditText mEditText;//
	    private View mContentView;//內容佈局view,即除了表情佈局或者軟鍵盤佈局以外的佈局，用於固定bar的高度，防止跳閃
	    private EmotionKeyboard(){
	    }
	    
	    /**
	     * 外部靜態呼叫
	     * @param activity
	     * @return
	     */
	    public static EmotionKeyboard with(Activity activity) {
	    	EmotionKeyboard emotionInputDetector = new EmotionKeyboard();
	        emotionInputDetector.mActivity = activity;
	        emotionInputDetector.mInputManager = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);
	        emotionInputDetector.sp = activity.getSharedPreferences(SHARE_PREFERENCE_NAME, Context.MODE_PRIVATE);
	        return emotionInputDetector;
	    }
	    
	    /**
	     * 繫結內容view，此view用於固定bar的高度，防止跳閃
	     * @param contentView
	     * @return
	     */
	    public EmotionKeyboard bindToContent(View contentView) {
	        mContentView = contentView;
	        return this;
	    }
	    
	    /**
	     * 繫結編輯框
	     * @param editText
	     * @return
	     */
	    public EmotionKeyboard bindToEditText(EditText editText) {
	        mEditText = editText;
	        mEditText.requestFocus();
	        mEditText.setOnTouchListener(new View.OnTouchListener() {
	            @Override
	            public boolean onTouch(View v, MotionEvent event) {
	                if (event.getAction() == MotionEvent.ACTION_UP && mEmotionLayout.isShown()) {
	                    lockContentHeight();//顯示軟體盤時，鎖定內容高度，防止跳閃。
	                    hideEmotionLayout(true);//隱藏表情佈局，顯示軟體盤
	                    //軟體盤顯示後，釋放內容高度
	                    mEditText.postDelayed(new Runnable() {
	                        @Override
	                        public void run() {
	                            unlockContentHeightDelayed();
	                        }
	                    }, 200L);
	                }
	                return false;
	            }
	        });
	        return this;
	    }
	    
	    /**
	     * 繫結表情按鈕
	     * @param emotionButton
	     * @return
	     */
	    public EmotionKeyboard bindToEmotionButton(View emotionButton) {
	        emotionButton.setOnClickListener(new View.OnClickListener() {
				@Override
				public void onClick(View v) {
					if (mEmotionLayout.isShown()) {
						lockContentHeight();//顯示軟體盤時，鎖定內容高度，防止跳閃。
						hideEmotionLayout(true);//隱藏表情佈局，顯示軟體盤
						unlockContentHeightDelayed();//軟體盤顯示後，釋放內容高度
					} else {
						if (isSoftInputShown()) {//同上
							lockContentHeight();
							showEmotionLayout();
							unlockContentHeightDelayed();
						} else {
							showEmotionLayout();//兩者都沒顯示，直接顯示錶情佈局
						}
					}
				}
			});
	        return this;
	    }
	    /**
	     * 設定表情內容佈局
	     * @param emotionView
	     * @return
	     */
	    public EmotionKeyboard setEmotionView(View emotionView) {
	        mEmotionLayout = emotionView;
	        return this;
	    }
	    public EmotionKeyboard build(){
//設定軟體盤的模式：SOFT_INPUT_ADJUST_RESIZE  這個屬性表示Activity的主視窗總是會被調整大小，從而保證軟鍵盤顯示空間。
	   //從而方便我們計算軟體盤的高度
	   mActivity.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN |
	                WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
	        //隱藏軟體盤
	        hideSoftInput();
	        return this;
	    }
	    /**
	     * 點選返回鍵時先隱藏表情佈局
	     * @return
	     */
	    public boolean interceptBackPress() {
	        if (mEmotionLayout.isShown()) {
	            hideEmotionLayout(false);
	            return true;
	        }
	        return false;
	    }
	    private void showEmotionLayout() {
	        int softInputHeight = getSupportSoftInputHeight();
	        if (softInputHeight == 0) {
	            softInputHeight = sp.getInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, 400);
	        }
	        hideSoftInput();
	        mEmotionLayout.getLayoutParams().height = softInputHeight;
	        mEmotionLayout.setVisibility(View.VISIBLE);
	    }
	    /**
	     * 隱藏表情佈局
	     * @param showSoftInput 是否顯示軟體盤
	     */
	    private void hideEmotionLayout(boolean showSoftInput) {
	        if (mEmotionLayout.isShown()) {
	            mEmotionLayout.setVisibility(View.GONE);
	            if (showSoftInput) {
	                showSoftInput();
	            }
	        }
	    }
	    /**
	     * 鎖定內容高度，防止跳閃
	     */
	    private void lockContentHeight() {
	        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContentView.getLayoutParams();
	        params.height = mContentView.getHeight();
	        params.weight = 0.0F;
	    }
	    /**
	     * 釋放被鎖定的內容高度
	     */
	    private void unlockContentHeightDelayed() {
	        mEditText.postDelayed(new Runnable() {
	            @Override
	            public void run() {
	                ((LinearLayout.LayoutParams) mContentView.getLayoutParams()).weight = 1.0F;
	            }
	        }, 200L);
	    }
	    /**
	     * 編輯框獲取焦點，並顯示軟體盤
	     */
	    private void showSoftInput() {
	        mEditText.requestFocus();
	        mEditText.post(new Runnable() {
				@Override
				public void run() {
					mInputManager.showSoftInput(mEditText, 0);
				}
			});
	    }
	    /**
	     * 隱藏軟體盤
	     */
	    private void hideSoftInput() {
	        mInputManager.hideSoftInputFromWindow(mEditText.getWindowToken(), 0);
	    }
	    /**
	     * 是否顯示軟體盤
	     * @return
	     */
	    private boolean isSoftInputShown() {
	        return getSupportSoftInputHeight() != 0;
	    }
	    /**
	     * 獲取軟體盤的高度
	     * @return
	     */
	    private int getSupportSoftInputHeight() {
	        Rect r = new Rect();
	        /**
	         * decorView是window中的最頂層view，可以從window中通過getDecorView獲取到decorView。
	         * 通過decorView獲取到程式顯示的區域，包括標題欄，但不包括狀態列。
	         */
	        mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r);
	        //獲取螢幕的高度
	        int screenHeight = mActivity.getWindow().getDecorView().getRootView().getHeight();
	        //計算軟體盤的高度
	        int softInputHeight = screenHeight - r.bottom;
	        /**
	         * 某些Android版本下，沒有顯示軟鍵盤時減出來的高度總是144，而不是零，
	         * 這是因為高度是包括了虛擬按鍵欄的(例如華為系列)，所以在API Level高於20時，
	         * 我們需要減去底部虛擬按鍵欄的高度（如果有的話）
	         */
	        if (Build.VERSION.SDK_INT >= 20) {
	            // When SDK Level >= 20 (Android L), the softInputHeight will contain the height of softButtonsBar (if has)
	            softInputHeight = softInputHeight - getSoftButtonsBarHeight();
	        }
	        if (softInputHeight < 0) {
	            LogUtils.w("EmotionKeyboard--Warning: value of softInputHeight is below zero!");
	        }
	        //存一份到本地
	        if (softInputHeight > 0) {
	            sp.edit().putInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, softInputHeight).apply();
	        }
	        return softInputHeight;
	    }
	    /**
	     * 底部虛擬按鍵欄的高度
	     * @return
	     */
	    @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
	    private int getSoftButtonsBarHeight() {
	        DisplayMetrics metrics = new DisplayMetrics();
	        //這個方法獲取可能不是真實螢幕的高度
	        mActivity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
	        int usableHeight = metrics.heightPixels;
	        //獲取當前螢幕的真實高度
	        mActivity.getWindowManager().getDefaultDisplay().getRealMetrics(metrics);
	        int realHeight = metrics.heightPixels;
	        if (realHeight > usableHeight) {
	            return realHeight - usableHeight;
	        } else {
	            return 0;
	        }
	    }
	/**
	 * 獲取軟鍵盤高度
	 * @return
	 */
	public int getKeyBoardHeight(){
		return sp.getInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, 400);
	}
}

EmotionKeyboard類使用的是設計模式中的builder模式來建立物件。其中mEmotionLayout是表情佈局，mContentView是內容佈局view,即除了表情佈局或者軟鍵盤佈局以外的佈局，用於固定bar的高度，防止跳閃，當然mContentView可以是任意佈局。

/**

* 繫結表情按鈕

* @param emotionButton

* @return

public EmotionKeyboard bindToEmotionButton(View emotionButton) {

emotionButton.setOnClickListener(new View.OnClickListener() {

@Override

publicvoid onClick(View v) {

if (mEmotionLayout.isShown()) {

lockContentHeight();//顯示軟體盤時，鎖定內容高度，防止跳閃。

hideEmotionLayout(true);//隱藏表情佈局，顯示軟體盤

unlockContentHeightDelayed();//軟體盤顯示後，釋放內容高度

} else {

if (isSoftInputShown()) {//同上

lockContentHeight();

showEmotionLayout();

unlockContentHeightDelayed();

} else {

showEmotionLayout();//兩者都沒顯示，直接顯示錶情佈局

}

});

returnthis;

}

這裡我主要重點說明一下點選表情按鈕時，顯示或者隱藏表情佈局以及軟鍵盤的邏輯：

首先我們通過mEmotionLayout.isShown()去判斷表情是否已經顯示，如果返回true,這時肯定要去切換成軟鍵盤，因此必須先通過lockContentHeight()方法鎖定mContentView內容高度，然後通過hideEmotionLayout(true)方法因此表情佈局並顯示軟鍵盤，這裡傳入true表示顯示軟鍵盤，如果傳入false則表示不顯示軟鍵盤，軟鍵盤顯示後通過unlockContentHeightDelayed()方法去解鎖mContentView內容高度。

但如果mEmotionLayout.isShown()返回了false，這有兩種情況，第1種是如果此時軟鍵盤已經顯示，則需先鎖定mContentView內容高度，再去隱藏軟鍵盤，然後顯示錶情佈局，最後再解鎖mContentView內容高度。第2種情況是軟鍵盤和表情都沒顯示，這下就簡單了，直接顯示錶情佈局即可。

好，這個類解析到這，其他直接看原始碼哈，註釋槓槓的。

最後我們來試著在外部使用該類，使用例子如下：

package com.zejian.emotionkeyboard.emotionkeyboardview;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
 * Created by zejian
 * Time  16/1/7 上午11:12
 * Email [email protected]
 * Description:不可橫向滑動的ViewPager
 */
public class NoHorizontalScrollerViewPager extends ViewPager{
    public NoHorizontalScrollerViewPager(Context context) {
        super(context);
    }
    public NoHorizontalScrollerViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    /**
     * 重寫攔截事件，返回值設定為false，這時便不會橫向滑動了。
     * @param ev
     * @return
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }
    /**
     * 重寫攔截事件，返回值設定為false，這時便不會橫向滑動了。
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
}

NoHorizontalScrollerViewPager+RecyclerView+Fragment實現思路：

我們以NoHorizontalScrollerViewPager作為載體，fragment作為展示介面，RecyclerView作為底部滾動條，每當點選RecyclerView的item時，我們使用viewPager.setCurrentItem(position,false)方法來切換fragment介面即可(這裡傳入false是表示不需要viewPager的切換動畫)。這樣我們就可以實現不同類表情的切換了。（提示一下這裡所指的fragment其實是就工程目錄中的EmotiomComplateFragment.java類）這個比較簡單，就不多囉嗦了。實現程式碼稍後會一起提供。

3.表情面板的實現思路

3.1 表情圖片的本質與顯示

表情的顯示從直觀上看確實是一個圖片，但實際只是一種特殊的文字（ImageSpan），比如微博裡表情就是"[表情名字]"的介面,可愛的表情就是[可愛]...因此這裡我打算利用"[表情名字]"作為key，圖片的r值作為內容進行存取，EmotionUtils類如下

package com.zejian.emotionkeyboard.utils;
import android.support.v4.util.ArrayMap;
import com.zejian.emotionkeyboard.R;
/**
 * @author : zejian
 * @time : 2016年1月5日 上午11:32:33
 * @email : [email protected]
 * @description :表情載入類,可自己新增多種表情，分別建立不同的map存放和不同的標誌符即可
 */
public class EmotionUtils {
	/**
	 * 表情型別標誌符
	 */
	public static final int EMOTION_CLASSIC_TYPE=0x0001;//經典表情
	/**
	 * key-表情文字;
	 * value-表情圖片資源
	 */
	public static ArrayMap<String, Integer> EMPTY_MAP;
	public static ArrayMap<String, Integer> EMOTION_CLASSIC_MAP;
	static {
		EMPTY_MAP = new ArrayMap<>();
		EMOTION_CLASSIC_MAP = new ArrayMap<>();
		EMOTION_CLASSIC_MAP.put("[呵呵]", R.drawable.d_hehe);
		EMOTION_CLASSIC_MAP.put("[嘻嘻]", R.drawable.d_xixi);
		EMOTION_CLASSIC_MAP.put("[哈哈]", R.drawable.d_haha);
		EMOTION_CLASSIC_MAP.put("[愛你]", R.drawable.d_aini);
		EMOTION_CLASSIC_MAP.put("[挖鼻屎]", R.drawable.d_wabishi);
		EMOTION_CLASSIC_MAP.put("[吃驚]", R.drawable.d_chijing);
		EMOTION_CLASSIC_MAP.put("[暈]", R.drawable.d_yun);
		EMOTION_CLASSIC_MAP.put("[淚]", R.drawable.d_lei);
		EMOTION_CLASSIC_MAP.put("[饞嘴]", R.drawable.d_chanzui);
		EMOTION_CLASSIC_MAP.put("[抓狂]", R.drawable.d_zhuakuang);
		EMOTION_CLASSIC_MAP.put("[哼]", R.drawable.d_heng);
		EMOTION_CLASSIC_MAP.put("[可愛]", R.drawable.d_keai);
		EMOTION_CLASSIC_MAP.put("[怒]", R.drawable.d_nu);
		EMOTION_CLASSIC_MAP.put("[汗]", R.drawable.d_han);
		EMOTION_CLASSIC_MAP.put("[害羞]", R.drawable.d_haixiu);
		EMOTION_CLASSIC_MAP.put("[睡覺]", R.drawable.d_shuijiao);
		EMOTION_CLASSIC_MAP.put("[錢]", R.drawable.d_qian);
		EMOTION_CLASSIC_MAP.put("[偷笑]", R.drawable.d_touxiao);
		EMOTION_CLASSIC_MAP.put("[笑cry]", R.drawable.d_xiaoku);
		EMOTION_CLASSIC_MAP.put("[doge]", R.drawable.d_doge);
		EMOTION_CLASSIC_MAP.put("[喵喵]", R.drawable.d_miao);
		EMOTION_CLASSIC_MAP.put("[酷]", R.drawable.d_ku);
		EMOTION_CLASSIC_MAP.put("[衰]", R.drawable.d_shuai);
		EMOTION_CLASSIC_MAP.put("[閉嘴]", R.drawable.d_bizui);
		EMOTION_CLASSIC_MAP.put("[鄙視]", R.drawable.d_bishi);
		EMOTION_CLASSIC_MAP.put("[花心]", R.drawable.d_huaxin);
		EMOTION_CLASSIC_MAP.put("[鼓掌]", R.drawable.d_guzhang);
		EMOTION_CLASSIC_MAP.put("[悲傷]", R.drawable.d_beishang);
		EMOTION_CLASSIC_MAP.put("[思考]", R.drawable.d_sikao);
		EMOTION_CLASSIC_MAP.put("[生病]", R.drawable.d_shengbing);
		EMOTION_CLASSIC_MAP.put("[親親]", R.drawable.d_qinqin);
		EMOTION_CLASSIC_MAP.put("[怒罵]", R.drawable.d_numa);
		EMOTION_CLASSIC_MAP.put("[太開心]", R.drawable.d_taikaixin);
		EMOTION_CLASSIC_MAP.put("[懶得理你]", R.drawable.d_landelini);
		EMOTION_CLASSIC_MAP.put("[右哼哼]", R.drawable.d_youhengheng);
		EMOTION_CLASSIC_MAP.put("[左哼哼]", R.drawable.d_zuohengheng);
		EMOTION_CLASSIC_MAP.put("[噓]", R.drawable.d_xu);
		EMOTION_CLASSIC_MAP.put("[委屈]", R.drawable.d_weiqu);
		EMOTION_CLASSIC_MAP.put("[吐]", R.drawable.d_tu);
		EMOTION_CLASSIC_MAP.put("[可憐]", R.drawable.d_kelian);
		EMOTION_CLASSIC_MAP.put("[打哈氣]", R.drawable.d_dahaqi);
		EMOTION_CLASSIC_MAP.put("[擠眼]", R.drawable.d_jiyan);
		EMOTION_CLASSIC_MAP.put("[失望]", R.drawable.d_shiwang);
		EMOTION_CLASSIC_MAP.put("[頂]", R.drawable.d_ding);
		EMOTION_CLASSIC_MAP.put("[疑問]", R.drawable.d_yiwen);
		EMOTION_CLASSIC_MAP.put("[困]", R.drawable.d_kun);
		EMOTION_CLASSIC_MAP.put("[感冒]", R.drawable.d_ganmao);
		EMOTION_CLASSIC_MAP.put("[拜拜]", R.drawable.d_baibai);
		EMOTION_CLASSIC_MAP.put("[黑線]", R.drawable.d_heixian);
		EMOTION_CLASSIC_MAP.put("[陰險]", R.drawable.d_yinxian);
		EMOTION_CLASSIC_MAP.put("[打臉]", R.drawable.d_dalian);
		EMOTION_CLASSIC_MAP.put("[傻眼]", R.drawable.d_shayan);
		EMOTION_CLASSIC_MAP.put("[豬頭]", R.drawable.d_zhutou);
		EMOTION_CLASSIC_MAP.put("[熊貓]", R.drawable.d_xiongmao);
		EMOTION_CLASSIC_MAP.put("[兔子]", R.drawable.d_tuzi);
	}
	/**
	 * 根據名稱獲取當前表情圖示R值
	 * @param EmotionType 表情型別標誌符
	 * @param imgName 名稱
	 * @return
	 */
	public static int getImgByName(int EmotionType,String imgName) {
		Integer integer=null;
		switch (EmotionType){
			case EMOTION_CLASSIC_TYPE:
				integer = EMOTION_CLASSIC_MAP.get(imgName);
				break;
			default:
				LogUtils.e("the emojiMap is null!!");
				break;
		}
		return integer == null ? -1 : integer;
	}
	/**
	 * 根據型別獲取表情資料
	 * @param EmotionType
	 * @return
	 */
	public static ArrayMap<String, Integer> getEmojiMap(int EmotionType){
		ArrayMap EmojiMap=null;
		switch (EmotionType){
			case EMOTION_CLASSIC_TYPE:
				EmojiMap=EMOTION_CLASSIC_MAP;
				break;
			default:
				EmojiMap=EMPTY_MAP;
				break;
		}
		return EmojiMap;
	}
}

ArrayMap<String, Integer> EMPTY_MAP是一個空集合這個主要是防止空指標情況的，而ArrayMap<String, Integer> EMOTION_CLASSIC_MAP則是我們前所顯示經典表情集合，這個集合有一個標誌(public static final int EMOTION_CLASSIC_TYPE=0x0001)這個標誌是在獲取表情集合和表情圖片的唯一標識，也就是說我們需要從EMOTION_CLASSIC_MAP集合中獲取表情時必須通過標誌符辨別，我們往下看可以看到getEmojiMap(int EmotionType)，這個方法就是根據EmotionType這個標誌型別來獲取我們表情集合的，同時這也說明了，如果我們自己需要新增別的表情型別，這時就需要在這個類中建立一個新的集合，同時還必須建立一個新的標誌型別來區別這個集合。可能大家還是不是很理解，這裡我再貼一下工廠類的獲取方法大家可能就明白了

/**
     * 獲取fragment的方法
     * @param emotionType 表情型別，用於判斷使用哪個map集合的表情
     */
    public Fragment getFragment(int emotionType){
        Bundle bundle = new Bundle();
        bundle.putInt(FragmentFactory.EMOTION_MAP_TYPE,emotionType);
  EmotiomComplateFragment fragment= EmotiomComplateFragment.newInstance(EmotiomComplateFragment.class,bundle);
        return fragment;
    }

呼叫時，如下：

//建立fragment的工廠類
 FragmentFactory factory=FragmentFactory.getSingleFactoryInstance();
 //建立修改例項
 EmotiomComplateFragment f1= (EmotiomComplateFragment) factory.getFragment(EmotionUtils.EMOTION_CLASSIC_TYPE);

這裡我們通過工廠類getFragment(int emotionType)方法的創建出模版表情類EmotiomComplateFragment，為什麼說是模版呢，因為只要我們建立時傳遞集合標誌不同，例如經典表情傳遞的就是EmotionUtils.EMOTION_CLASSIC_TYPE，這時EmotiomComplateFragment類內部就會根據傳遞的集合型別去EmotionUtils類中獲取相對應的集合，這樣也就會創建出我們所需要的表情面板。

這裡小結一下：通過上術分析我們可以知道如果我們要新增自己的其他型別表情，只需以下步驟：

步驟1.在EmotionUtils類建立一個表情集合，並賦予這個集合唯一標誌

步驟2.在EmotionUtils類中的兩個獲取方法中完善相應的程式碼。

步驟3.在建立新的EmotiomComplateFragment模板類時，傳遞相應的集合標誌符即可建立相應的表情面板。

接下來的問題就是表情如何顯示呢？其實這裡主要用到了SpannableString拓展性字串相關知識點，SpannableString可以讓一段字串在顯示的時候,將其中某小段文字附著上其他內容或替換成其他內容,拓展內容可以是圖片或者是文字格式,比如加粗，顯示特殊顏色等。對於SpannableString不熟悉，可先看看這篇文章

下面我只對本篇需要用到的SpannableString作簡要介紹：

ImageSpan，這個是可以將指定的特殊字元替換成我們所需要的圖片。也就是我們可以使用"[表情名字]"這個key作為指定的特殊字元，然後在文字中替換成該key所對應的特殊表情即可。

簡單例項如下：

SpannableString spannableString = new SpannableString(source);
int size = (int) tv.getTextSize()*13/10;
Bitmap bitmap = BitmapFactory.decodeResource(res, imgRes);
Bitmap scaleBitmap = Bitmap.createScaledBitmap(bitmap, size, size, true);
ImageSpan span = new ImageSpan(context, scaleBitmap);
spannableString.setSpan(span, start, start + key.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

首先將我們要替換的字串轉換成SpannableString再建立一個ImageSpan並把我們的表情圖片包含在內，最後利用SpannableString的setSpan方法,將span物件設定在對應位置，這樣就完成了特殊字元與文字的轉換。引數解析如下，

start就是需要附著的內容的開始位置

end是需要附著的內容的開始位置

flag標誌位,這裡是最常用的EXCLUSIVE_EXCLUSIVE的表示span拓展文字不包含前後（這個引數還有其他型別，這裡不過多介紹）

3.2 利用正則表示式找出特殊字元便於轉換成表情

這裡我們利用正則表示式找出特殊字元，根據我們自己的需求編寫特定的正則表示式，如下：

String regex = "\\[[\u4e00-\u9fa5\\w]+\\]";

其中［］是我們特殊需要的字元，因此必須使用“//”進行轉義，\u4e00-\u9fa5表示中文，\\w表示下劃線的任意單詞字元，+ 代表一個或者多個，

因此這段正則就代表,匹配方括號內有一或多個文字和單詞字元的文字。有了正則表示式，剩下就是找匹配的問題了，這裡我們可以先用

matcher.find()獲取到匹配的開始位置,作為setSpan的start值,再使用matcher.group()方法獲取到匹配規則的具體表情文字。

對於matcher.find()和matcher.group()這裡簡單介紹一下

matcher.find()代表部分匹配，從當前位置開始匹配，找到一個匹配的子串，將移動下次匹配的位置。因此我們可以通過這個方法獲取到匹配的

開始位置,作為setSpan的start值（如果字串中有多個表情就會執行多次匹配）。

matcher.group()，獲取匹配到的具體字元。

下面直接上SpanStringUtils.java類對程式碼：

package com.zejian.emotionkeyboard.utils;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.widget.TextView;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
/**
 * @author : zejian
 * @time : 2016年1月5日 上午11:30:39
 * @email : [email protected]
 * @description :文字中的emojb字元處理為表情圖片
 */
public class SpanStringUtils {
	
	public static SpannableString getEmotionContent(int emotion_map_type,final Context context, final TextView tv, String source) {
		SpannableString spannableString = new SpannableString(source);
		Resources res = context.getResources();
		String regexEmotion = "\\[([\u4e00-\u9fa5\\w])+\\]";
		Pattern patternEmotion = Pattern.compile(regexEmotion);
		Matcher matcherEmotion = patternEmotion.matcher(spannableString);
		while (matcherEmotion.find()) {
			// 獲取匹配到的具體字元
			String key = matcherEmotion.group();
			// 匹配字串的開始位置
			int start = matcherEmotion.start();
			// 利用表情名字獲取到對應的圖片
			Integer imgRes = EmotionUtils.getImgByName(emotion_map_type,key);
			if (imgRes != null) {
				// 壓縮表情圖片
				int size = (int) tv.getTextSize()*13/10;
				Bitmap bitmap = BitmapFactory.decodeResource(res, imgRes);
				Bitmap scaleBitmap = Bitmap.createScaledBitmap(bitmap, size, size, true);
ImageSpan span = new ImageSpan(context, scaleBitmap);
				spannableString.setSpan(span, start, start + key.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
			}
		}
		return spannableString;
	}
}

程式碼相對比較簡單，這裡就不囉嗦啦。

3.3 表情面板的實現(ViewPager+GridView)

這裡的自然就是使用到ViewPager和GridView相結合實現多介面滑動的效果，參考了微信的實現，每頁都是一個GridView顯示20個表情,末尾還有一個刪除按鈕。

實現思路：

利用ViewPager作為滑動控制元件，同時結合GridView來佈局每個表情，GridView會顯示3行7列,共21個Item,即每頁都是一個GridView顯示20個表情,末尾還有一個刪除按鈕。為了讓Item能大小合適,我們在這裡利用動態計算的方式設定寬高,因為螢幕寬度各有不同。每個item寬度的計算方式，由(螢幕的寬度－左右邊距大小(如果有的話就減去)－每個item間隙距離)/7，最終便得到item的寬度。至於表情面板的高度＝(item寬度＊3+間隙＊6),即可獲取中高度，為什麼間隙*6？這裡並沒有什麼計算原理，純粹是我在除錯的過程中試出來的值，這個值相對比較合理，也比較美觀，當然大家也可根據自己需要調整。最後就是有多少頁的問題了，這裡可以通過for迴圈表情集合的所有元素，把每次迴圈獲取的元素新增到一個集合中，每次判斷集合是否滿20個元素，每滿20個集合就利用該集合去建立一個GridView的表情面板View，同時再新建一個集合存放新獲取到的元素，以次迴圈。最後把所有表情生成的一個個GridView放到一個總view集合中,利用ViewPager顯示即可。要注意的是在GridView的介面卡和點選事件中,都利用position判斷,如果是最後一個就進行特殊的顯示(刪除按鈕)和點選處理。

package com.zejian.emotionkeyboard.fragment;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;
import android.widget.LinearLayout;
import com.zejian.emotionkeyboard.R;
import com.zejian.emotionkeyboard.adapter.EmotionGridViewAdapter;
import com.zejian.emotionkeyboard.adapter.EmotionPagerAdapter;
import com.zejian.emotionkeyboard.emotionkeyboardview.EmojiIndicatorView;
import com.zejian.emotionkeyboard.utils.DisplayUtils;
import com.zejian.emotionkeyboard.utils.EmotionUtils;
import com.zejian.emotionkeyboard.utils.GlobalOnItemClickManagerUtils;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by zejian
 * Time  16/1/5 下午4:32
 * Email [email protected]
 * Description:可替換的模板表情，gridview實現
 */
public class EmotiomComplateFragment extends BaseFragment {
    private EmotionPagerAdapter emotionPagerGvAdapter;
    private ViewPager vp_complate_emotion_layout;
    private EmojiIndicatorView ll_point_group;//表情面板對應的點列表
    private int emotion_map_type;
    /**
     * 建立與Fragment物件關聯的View檢視時呼叫
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_complate_emotion, container, false);
        initView(rootView);
        initListener();
        return rootView;
    }
    /**
     * 初始化view控制元件
     */
    protected void initView(View rootView){
        vp_complate_emotion_layout = (ViewPager) rootView.findViewById(R.id.vp_complate_emotion_layout);
        ll_point_group= (EmojiIndicatorView) rootView.findViewById(R.id.ll_point_group);
        //獲取map的型別
        emotion_map_type=args.getInt(FragmentFactory.EMOTION_MAP_TYPE);
        initEmotion();
    }
    /**
     * 初始化監聽器
     */
    protected void initListener(){
        vp_complate_emotion_layout.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            int oldPagerPos=0;
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                ll_point_group.playByStartPointToNext(oldPagerPos,position);
                oldPagerPos=position;
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
    /**
     * 初始化表情面板
     * 思路：獲取表情的總數，按每行存放7個表情，動態計算出每個表情所佔的寬度大小（包含間距），
     *      而每個表情的高與寬應該是相等的，這裡我們約定只存放3行
     *      每個面板最多存放7*3=21個表情，再減去一個刪除鍵，即每個面板包含20個表情
     *      根據表情總數，迴圈建立多個容量為20的List，存放表情，對於大小不滿20進行特殊
     *      處理即可。
     */
    private void initEmotion() {
        // 獲取螢幕寬度
        int screenWidth = DisplayUtils.getScreenWidthPixels(getActivity());
        // item的間距
        int spacing = DisplayUtils.dp2px(getActivity(), 12);
        // 動態計算item的寬度和高度
        int itemWidth = (screenWidth - spacing * 8) / 7;
        //動態計算gridview的總高度
        int gvHeight = itemWidth * 3 + spacing * 6;
        List<GridView> emotionViews = new ArrayList<>();
        List<String> emotionNames = new ArrayList<>();
        // 遍歷所有的表情的key
        for (String emojiName : EmotionUtils.getEmojiMap(emotion_map_type).keySet()) {
            emotionNames.add(emojiName);
            // 每20個表情作為一組,同時新增到ViewPager對應的view集合中
            if (emotionNames.size() == 20) {
                GridView gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight);
                emotionViews.add(gv);
                // 新增完一組表情,重新建立一個表情名字集合
                emotionNames = new ArrayList<>();
            }
        }
        // 判斷最後是否有不足20個表情的剩餘情況
        if (emotionNames.size() > 0) {
            GridView gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight);
            emotionViews.add(gv);
        }
        //初始化指示器
        ll_point_group.initIndicator(emotionViews.size());
        // 將多個GridView新增顯示到ViewPager中
        emotionPagerGvAdapter = new EmotionPagerAdapter(emotionViews);
        vp_complate_emotion_layout.setAdapter(emotionPagerGvAdapter);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(screenWidth, gvHeight);
        vp_complate_emotion_layout.setLayoutParams(params);
    }
    /**
     * 建立顯示錶情的GridView
     */
    private GridView createEmotionGridView(List<String> emotionNames, int gvWidth, int padding, int itemWidth, int gvHeight) {
        // 建立GridView
        GridView gv = new GridView(getActivity());
        //設定點選背景透明
        gv.setSelector(android.R.color.transparent);
        //設定7列
        gv.setNumColumns(7);
        gv.setPadding(padding, padding, padding, padding);
        gv.setHorizontalSpacing(padding);
        gv.setVerticalSpacing(padding * 2);
        //設定GridView的寬高
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(gvWidth, gvHeight);
        gv.setLayoutParams(params);
        // 給GridView設定表情圖片
        EmotionGridViewAdapter adapter = new EmotionGridViewAdapter(getActivity(), emotionNames, itemWidth,emotion_map_type);
        gv.setAdapter(adapter);
        //設定全域性點選事件
        gv.setOnItemClickListener(GlobalOnItemClickManagerUtils.getInstance(getActivity()).getOnItemClickListener(emotion_map_type));
        return gv;
    }
}

註釋非常清晰哈。我就不囉嗦了。

但這有個要注意的是在for迴圈時是通過EmotionUtils的getEmojiMap(emotion_map_type).keySet()獲取集合，這也印證前面我們所說的EmotiomComplateFragment內部是通過集合標誌判斷集合型別，最終獲取到所需的集合資料，也就生成了不同表情型別的面板。

3.4 表情的輸入框插入和刪除

思路：在表情框輸入一個表情實際上是在當前游標位置插入一個表情，新增完表情後再把當前游標移動到表情之後，所以我們首先要獲取到游標到首位置，這個可以利用EditText.setSelectionStart()方法，新增完表情後要設定游標的位置到表情之後，這個可以使用EditText.setSelection(position)方法。當然如果點選的是刪除按鈕，那麼直接呼叫系統的 Delete 按鈕事件即可。下面直接上程式碼：

                    // 點選的是表情
                    EmotionGridViewAdapter emotionGvAdapter = (EmotionGridViewAdapter) itemAdapter;
                    if (position == emotionGvAdapter.getCount() - 1) {
                        // 如果點選了最後一個回退按鈕,則呼叫刪除鍵事件
                        mEditText.dispatchKeyEvent(new KeyEvent(
                                KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL));
                    } else {
                        // 如果點選了表情,則新增到輸入框中
                        String emotionName = emotionGvAdapter.getItem(position);
                        // 獲取當前游標位置,在指定位置上新增表情圖片文字
                        int curPosition = mEditText.getSelectionStart();
                        StringBuilder sb = new StringBuilder(mEditText.getText().toString());
                        sb.insert(curPosition, emotionName);
                        // 特殊文書處理,將表情等轉換一下
                        mEditText.setText(SpanStringUtils.getEmotionContent(emotion_map_type,
                                mContext, mEditText, sb.toString()));
                        // 將游標設定到新增完表情的右側
                        mEditText.setSelection(curPosition + emotionName.length());
                    }

這裡要理解一點就是讓控制元件呼叫系統事件的方法為EditText.displatchKeyEvent(new KeyEvent(action, code));其中action就是動作,用ACTION_DOWN按下動作就可以了而

code為按鈕事件碼,刪除對應的就是KEYCODE_DEL。

4.表情點選事件全域性監聽的實現

上面弄明白了表情的輸入與刪除操作後，我們就要考慮一個問題了，那就是在哪裡設定監聽？直接在建立GridView時，這個確實行得通，不過我們還要再考慮一個問題，那就是如果我們存在多個GridView呢？怪我咯，多複製幾遍咯。我們是高階工程師對吧，這樣重複程式碼顯然是不可出現在我們眼前的，因此這裡我們決定使用全域性監聽來設定點選事件，當然這個並非我想到的，這個是在github開源專案我在閱讀原始碼時，發現的，這種方式挺不錯，我就拿來用咯。直接上程式碼：

package com.zejian.emotionkeyboard.utils;
import android.content.Context;
import android.view.KeyEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.EditText;
import com.zejian.emotionkeyboard.adapter.EmotionGridViewAdapter;
/**
 * Created by zejian
 * Time  16/1/8 下午5:05
 * Email [email protected]
 * Description:點選表情的全域性監聽管理類
 */
public class GlobalOnItemClickManagerUtils {
    private static GlobalOnItemClickManagerUtils instance;
    private EditText mEditText;//輸入框
    private static Context mContext;
    public static GlobalOnItemClickManagerUtils getInstance(Context context) {
        mContext=context;
        if (instance == null) {
            synchronized (GlobalOnItemClickManagerUtils.class) {
                if(instance == null) {
                    instance = new GlobalOnItemClickManagerUtils();
                }
            }
        }
        return instance;
    }
    public void attachToEditText(EditText editText) {
        mEditText = editText;
    }
    public AdapterView.OnItemClickListener getOnItemClickListener(final int emotion_map_type) {
        return new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Object itemAdapter = parent.getAdapter();
                if (itemAdapter instanceof EmotionGridViewAdapter) {
                    // 點選的是表情
                    EmotionGridViewAdapter emotionGvAdapter = (EmotionGridViewAdapter) itemAdapter;
                    if (position == emotionGvAdapter.getCount() - 1) {
                        // 如果點選了最後一個回退按鈕,則呼叫刪除鍵事件
                        mEditText.dispatchKeyEvent(new KeyEvent(
                                KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL));
                    } else {
                        // 如果點選了表情,則新增到輸入框中
                        String emotionName = emotionGvAdapter.getItem(position);
                        // 獲取當前游標位置,在指定位置上新增表情圖片文字
                        int curPosition = mEditText.getSelectionStart();
                        StringBuilder sb = new StringBuilder(mEditText.getText().toString());
                        sb.insert(curPosition, emotionName);
                        // 特殊文書處理,將表情等轉換一下
                        mEditText.setText(SpanStringUtils.getEmotionContent(emotion_map_type,
                                mContext, mEditText, sb.toString()));
                        // 將游標設定到新增完表情的右側
                        mEditText.setSelection(curPosition + emotionName.length());
                    }
                }
            }
        };
    }
}

程式碼相當簡單，就是建立一個AdapterView.OnItemClickListener的全域性監聽器，然後在裡面實現表情的輸入與刪除操作即可。那麼怎麼使用呢？

我們在EmotionMainFragment類中使用建立GlobalOnItemClickManagerUtils，並繫結編輯框，部分程式碼如下:

 //建立全域性監聽
        GlobalOnItemClickManagerUtils globalOnItemClickManager= GlobalOnItemClickManagerUtils.getInstance(getActivity());
        if(isBindToBarEditText){
            //綁定當前Bar的編輯框
            globalOnItemClickManager.attachToEditText(bar_edit_text);
        }else{
            // false,則表示繫結contentView, 此時外部提供的contentView必定也是EditText
            globalOnItemClickManager.attachToEditText((EditText) contentView);
            mEmotionKeyboard.bindToEditText((EditText)contentView);
        }

繫結的編輯框可能有兩種情況，可能是Bar上的編輯框，但也可能是contentView，此時外部提供的contentView是EditText(可以直接理解為是把之前所說的listview替換成了edittext)。最後別忘記在EmotiomComplateFragment類種建立GridView時註冊該監聽器，

//設定全域性點選事件
        gv.setOnItemClickListener(GlobalOnItemClickManagerUtils.getInstance(getActivity()).getOnItemClickListener(emotion_map_type));

好了，到此本篇也完結了，下面給出原始碼下載方式：

android高仿微信表情輸入與鍵盤輸入詳解－解決跳閃與表情切換問題

android高仿微信表情輸入與鍵盤輸入詳解－解決跳閃與表情切換問題

android高仿微信圖片瀏覽器

Android高仿微信/支付寶掃一掃（弱光檢測掃一掃自動放大功能）

Android 高仿微信發朋友圈瀏覽圖片效果

Android 高仿微信頭像擷取打造不一樣的自定義控制元件

android高仿微信佈局（二）

Android-通過SlidingMenu高仿微信6.2最新版手勢滑動返回(二)

Android 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉刷新

Android 仿微信/支付寶的密碼輸入框效果(一)

Android UI 之自定義RadarView——高仿微信雷達掃描

高仿微信對話列表滑動刪除效果

Android 超高仿微信圖片選擇器圖片該這麽載入

高仿微信聊天介面長按彈框樣式

Android .感測器仿微信搖一搖

Flutter仿微信，支付寶密碼輸入框+自定義鍵盤

高仿微信通訊錄

Android 超高仿微信圖片選擇器圖片該這麼載入

Android 超高仿微信圖片選擇器圖片該這麼載入

掃描二維碼研究總結（高仿微信掃一掃，輕鬆實現定製掃描介面）

用百度API高仿微信定位demo

android高仿微信表情輸入與鍵盤輸入詳解－解決跳閃與表情切換問題

相關推薦