Android高仿微信表情輸入與鍵盤輸入詳解
最近公司在項(xiàng)目上要使用到表情與鍵盤的切換輸入,自己實(shí)現(xiàn)了一個(gè),還是存在些缺陷,比如說(shuō)鍵盤與表情切換時(shí)出現(xiàn)跳閃問題,這個(gè)相當(dāng)困擾我,不過(guò)所幸在Github(其中一個(gè)不錯(cuò)的開源項(xiàng)目,其代碼整體結(jié)構(gòu)很不錯(cuò))并且在論壇上找些解決方案,再加上我也是研究了好多個(gè)開源項(xiàng)目的代碼,最后才苦逼地整合出比較不錯(cuò)的實(shí)現(xiàn)效果,可以說(shuō)跟微信基本一樣(嘿嘿,只能說(shuō)目前還沒發(fā)現(xiàn)大Bug,若發(fā)現(xiàn)大家一起日后慢慢完善,這里我也只是給出了實(shí)現(xiàn)方案,拓展其他表情我并沒有實(shí)現(xiàn)哈,不過(guò)代碼中我實(shí)現(xiàn)了一個(gè)可拓展的fragment模板以便大家實(shí)現(xiàn)自己的表情包),我只是實(shí)現(xiàn)了一頁(yè)表情,代碼我也進(jìn)行另外的封裝與拓展,大家需要多表情的話只需要實(shí)現(xiàn)自己的表情fragment界面,然后根據(jù)工廠類獲取即可,廢話不多說(shuō)先上圖看效果:
效果還不錯(cuò)吧,哈哈。下面開始介紹:
本篇主要分析的核心類EmotionKeyboard.Java,EmotionComplateFragment.java,EmotionMainFragment.java,FragmentFactory.java,還有一個(gè)是工具類里的EmotionUtils.java和GlobalOnItemClickManagerUtils.java 這幾個(gè)類我會(huì)重點(diǎn)分析一下,其他的大家自行看源碼哈。下面就開始咯,先來(lái)看看本篇主要內(nèi)容以及大概思路:
1.解決表情與鍵盤切換跳閃問題
1.1跳閃問題概述
為了讓大家對(duì)這個(gè)問題有一定了解,我先來(lái)個(gè)簡(jiǎn)單案例,用紅色面板代表表情面板,效果如下:
圖(1-1)
我們先來(lái)看圖(1-1),即上圖,通過(guò)上圖我們可以看出,當(dāng)表情顯示時(shí),我們點(diǎn)擊表情按鈕,隱藏表情顯示軟件盤時(shí),內(nèi)容Bar有一個(gè)明顯的先向下后恢復(fù)的跳閃現(xiàn)象,這樣用戶體驗(yàn)相當(dāng)?shù)牟?,我們希望的是下圖(1-2)的效果,無(wú)論怎么切換都不會(huì)有跳閃現(xiàn)象,這就是我所有說(shuō)的鍵盤與表情切換的跳閃問題。
圖(1-2)
到這里,我們對(duì)這個(gè)問題有了大概了解后,再來(lái)深入分析如何實(shí)現(xiàn)圖(1-2)的不跳閃效果。這里我們做個(gè)約定,我們把含有表情那個(gè)bar統(tǒng)稱為內(nèi)容Bar。
1.2 解決跳閃問題的思路:
Android系統(tǒng)在彈出軟鍵盤時(shí),會(huì)把我們的內(nèi)容 Bar 頂上去,因此只有表情面板的高度與軟鍵盤彈出時(shí)高度一致時(shí),才有可能然切換時(shí)高度過(guò)渡更自然,所以我們必須計(jì)算出軟鍵盤的高度并設(shè)置給表情面板。僅僅有這一步跳閃問題還是依舊存在,因此這時(shí)我們必須想其他辦法固定內(nèi)容Bar,因?yàn)樗械奶W都是表情面板隱藏,而軟鍵盤往上托出瞬間,Activity高度變高(為什么會(huì)變高后面會(huì)說(shuō)明),內(nèi)容Bar往下滑后,又被軟鍵盤頂回原來(lái)位置造成的。因此只要固定了內(nèi)容Bar的位置,閃跳問題就迎刃而解了。那么如何固定內(nèi)容Bar的位置呢?我們知道在一個(gè)布局中一個(gè)控件的位置其實(shí)是由它上面所有控件的高度決定的,如果其上面其他控件的高度不變,那么當(dāng)前控件的高度自然也不會(huì)變化,即使到時(shí)Activity的高度發(fā)生了變化也也不會(huì)影響該控件的位置(整個(gè)界面的顯示是掛載在window窗體上的,而非Activity,不了解的可以先研究一下窗體的創(chuàng)建過(guò)程),因此我們只要在軟鍵盤彈出前固定內(nèi)容Bar上面所有控件高度,從而達(dá)到固定內(nèi)容Bar位置(高度)的目的。好了,有思路了,我們接下來(lái)一步步按上面思路解決問題。
1.3 解決跳閃問題的套路:
1.3.1 先獲取鍵盤高度,并設(shè)置表情面板的高度為軟鍵盤的高度
Android系統(tǒng)在界面上彈出軟鍵盤時(shí)會(huì)將整個(gè)Activity的高度壓縮,此時(shí)windowSoftInputMode屬性設(shè)置為adjustResize(對(duì)windowSoftInputMode不清楚的話,請(qǐng)自行查閱相關(guān)資料哈),這個(gè)屬性表示Activity的主窗口總是會(huì)被調(diào)整大小,從而保證軟鍵盤顯示空間。在這種情況下我們可以通過(guò)以下方法計(jì)算軟鍵盤的高度:
Rect r = new Rect(); /* * decorView是window中的最頂層view,可以從window中通過(guò)getDecorView獲取到decorView。 * 通過(guò)decorView獲取到程序顯示的區(qū)域,包括標(biāo)題欄,但不包括狀態(tài)欄。 */ mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r); //獲取屏幕的高度 int screenHeight = mActivity.getWindow().getDecorView().getRootView().getHeight(); //計(jì)算軟件盤的高度 int softInputHeight = screenHeight - r.bottom;
這里我們隊(duì)對(duì)r.bottom和mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r)進(jìn)行簡(jiǎn)單解釋,直接上圖吧:
這下就清晰了吧,右邊是Rect參數(shù)解析圖,輔助我們對(duì)rect的理解。
Rect r = new Rect();
mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r)
這兩句其實(shí)將左圖中藍(lán)色邊框( 其實(shí)也就是actvity的大小)的size大小參數(shù)封裝到Rect中,以便我們后續(xù)使用。雖然計(jì)算出來(lái)的區(qū)域大小不包含狀態(tài)欄,但是r.bottom(紅色箭頭長(zhǎng)度)的大小是從屏幕頂部開始計(jì)算的所以包含了狀態(tài)欄的高度。需要注意的是,區(qū)域大小是這樣計(jì)算出來(lái)的:
區(qū)域的高:r.bottom-r.top
區(qū)域的寬:r.right-r.left
當(dāng)然這個(gè)跟計(jì)算軟鍵盤高度沒關(guān)系,只是順帶提一下。因此我們可以通過(guò)即可獲取到軟以下方式獲取鍵盤高度:
鍵盤高度=屏幕高度-r.bottom
1.3.2 固定內(nèi)容Bar的高度,解決閃跳問題
軟鍵盤高度解決后,現(xiàn)在剩下的問題關(guān)鍵就在于控制內(nèi)容Bar的高度了,那么如何做呢?我們先來(lái)看一個(gè)布局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/listview" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp" /> <FrameLayout android:id="@+id/fl_emotionview_main" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
其中ListView的layout_height為0dp、layout_weight為1,這樣這個(gè)ListView就會(huì)自動(dòng)充滿整個(gè)布局,這里L(fēng)istView可以替換成任意控件,FrameLayout則為表情布局(也可認(rèn)為就是我們前面所說(shuō)的內(nèi)容Bar,只不過(guò)這里最終會(huì)被替換成整個(gè)表情布局),我們的目的就是在彈出軟鍵盤時(shí)固定FrameLayout的高度,以便去除跳閃問題。根據(jù)我們前面的思路,F(xiàn)rameLayout的高度是由其上面的控件決定的也就是由ListView決定的,也就是說(shuō)我們只要在軟鍵盤彈出前固定ListView的內(nèi)容高度即可。因此我們可以通過(guò)下面的方法來(lái)鎖定ListView的高度,(mContentView就是我們所指的ListView,這些方法都封裝在EmotionKeyboard.java類中)
/** * 鎖定內(nèi)容高度,防止跳閃 */ private void lockContentHeight(){ LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContentView.getLayoutParams(); params.height = mContentView.getHeight(); params.weight = 0.0F; }
將weight置0,然后將height設(shè)置為當(dāng)前的height,在父控件(LinearLayout)的高度變化時(shí)它的高度也不再會(huì)變化。釋放ListView的高度:
private void unlockContentHeightDelayed() { mEditText.postDelayed(new Runnable() { @Override public void run() { ((LinearLayout.LayoutParams) mContentView.getLayoutParams()).weight = 1.0F; } }, 200L); }
其中的LinearLayout.LayoutParams.weight = 1.0F;,在代碼里動(dòng)態(tài)更改LayoutParam的weight,會(huì)導(dǎo)致父控件重新onLayout(),也就達(dá)到改變控件的高度的目的。到此兩個(gè)主要問題都解決了,我們直接上核心類代碼,該類來(lái)自github上的開源項(xiàng)目我在使用中直接從該項(xiàng)目中抽取了該類, 并做了細(xì)微修改,也添加了代碼注釋。
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 : shinezejian@163.com * description :源碼來(lái)自開源項(xiàng)目https://github.com/dss886/Android-EmotionInputDetector * 本人僅做細(xì)微修改以及代碼解析 */ 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;//內(nèi)容布局view,即除了表情布局或者軟鍵盤布局以外的布局,用于固定bar的高度,防止跳閃 private EmotionKeyboard(){ } /** * 外部靜態(tài)調(diào)用 * @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; } /** * 綁定內(nèi)容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();//顯示軟件盤時(shí),鎖定內(nèi)容高度,防止跳閃。 hideEmotionLayout(true);//隱藏表情布局,顯示軟件盤 //軟件盤顯示后,釋放內(nèi)容高度 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();//顯示軟件盤時(shí),鎖定內(nèi)容高度,防止跳閃。 hideEmotionLayout(true);//隱藏表情布局,顯示軟件盤 unlockContentHeightDelayed();//軟件盤顯示后,釋放內(nèi)容高度 } else { if (isSoftInputShown()) {//同上 lockContentHeight(); showEmotionLayout(); unlockContentHeightDelayed(); } else { showEmotionLayout();//兩者都沒顯示,直接顯示表情布局 } } } }); return this; } /** * 設(shè)置表情內(nèi)容布局 * @param emotionView * @return */ public EmotionKeyboard setEmotionView(View emotionView) { mEmotionLayout = emotionView; return this; } public EmotionKeyboard build(){ //設(shè)置軟件盤的模式:SOFT_INPUT_ADJUST_RESIZE 這個(gè)屬性表示Activity的主窗口總是會(huì)被調(diào)整大小,從而保證軟鍵盤顯示空間。 //從而方便我們計(jì)算軟件盤的高度 mActivity.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); //隱藏軟件盤 hideSoftInput(); return this; } /** * 點(diǎn)擊返回鍵時(shí)先隱藏表情布局 * @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(); } } } /** * 鎖定內(nèi)容高度,防止跳閃 */ private void lockContentHeight() { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContentView.getLayoutParams(); params.height = mContentView.getHeight(); params.weight = 0.0F; } /** * 釋放被鎖定的內(nèi)容高度 */ private void unlockContentHeightDelayed() { mEditText.postDelayed(new Runnable() { @Override public void run() { ((LinearLayout.LayoutParams) mContentView.getLayoutParams()).weight = 1.0F; } }, 200L); } /** * 編輯框獲取焦點(diǎn),并顯示軟件盤 */ 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中通過(guò)getDecorView獲取到decorView。 * 通過(guò)decorView獲取到程序顯示的區(qū)域,包括標(biāo)題欄,但不包括狀態(tài)欄。 */ mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r); //獲取屏幕的高度 int screenHeight = mActivity.getWindow().getDecorView().getRootView().getHeight(); //計(jì)算軟件盤的高度 int softInputHeight = screenHeight - r.bottom; /** * 某些Android版本下,沒有顯示軟鍵盤時(shí)減出來(lái)的高度總是144,而不是零, * 這是因?yàn)楦叨仁前颂摂M按鍵欄的(例如華為系列),所以在API Level高于20時(shí), * 我們需要減去底部虛擬按鍵欄的高度(如果有的話) */ 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(); //這個(gè)方法獲取可能不是真實(shí)屏幕的高度 mActivity.getWindowManager().getDefaultDisplay().getMetrics(metrics); int usableHeight = metrics.heightPixels; //獲取當(dāng)前屏幕的真實(shí)高度 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類使用的是設(shè)計(jì)模式中的builder模式來(lái)創(chuàng)建對(duì)象。其中mEmotionLayout是表情布局,mContentView是內(nèi)容布局view,即除了表情布局或者軟鍵盤布局以外的布局,用于固定bar的高度,防止跳閃,當(dāng)然mContentView可以是任意布局。
/** * 綁定表情按鈕 * @param emotionButton * @return */ public EmotionKeyboard bindToEmotionButton(View emotionButton) { emotionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (mEmotionLayout.isShown()) { lockContentHeight();//顯示軟件盤時(shí),鎖定內(nèi)容高度,防止跳閃。 hideEmotionLayout(true);//隱藏表情布局,顯示軟件盤 unlockContentHeightDelayed();//軟件盤顯示后,釋放內(nèi)容高度 } else { if (isSoftInputShown()) {//同上 lockContentHeight(); showEmotionLayout(); unlockContentHeightDelayed(); } else { showEmotionLayout();//兩者都沒顯示,直接顯示表情布局 } } } }); return this; }
這里我們主要重點(diǎn)說(shuō)明一下點(diǎn)擊表情按鈕時(shí),顯示或者隱藏表情布局以及軟鍵盤的邏輯。首先我們通過(guò)mEmotionLayout.isShown()去判斷表情是否已經(jīng)顯示,如果返回true,這時(shí)肯定要去切換成軟鍵盤,因此必須先通過(guò)lockContentHeight()方法鎖定mContentView內(nèi)容高度,然后通過(guò)hideEmotionLayout(true)方法因此表情布局并顯示軟鍵盤,這里傳入true表示顯示軟鍵盤,如果傳入false則表示不顯示軟鍵盤,軟鍵盤顯示后通過(guò)unlockContentHeightDelayed()方法去解鎖mContentView內(nèi)容高度。但如果mEmotionLayout.isShown()返回了false,這有兩種情況,第1種是如果此時(shí)軟鍵盤已經(jīng)顯示,則需先鎖定mContentView內(nèi)容高度,再去隱藏軟鍵盤,然后顯示表情布局,最后再解鎖mContentView內(nèi)容高度。第2種情況是軟鍵盤和表情都沒顯示,這下就簡(jiǎn)單了,直接顯示表情布局即可。好,這個(gè)類解析到這,其他直接看源碼哈,注釋杠杠的哈。最后我們來(lái)看看在外部使用該類的例子代碼如下:
mEmotionKeyboard = EmotionKeyboard.with(getActivity()) .setEmotionView(rootView.findViewById(R.id.ll_emotion_layout))//綁定表情面板 .bindToContent(contentView)//綁定內(nèi)容view .bindToEditText(!isBindToBarEditText ? ((EditText) contentView) : ((EditText) rootView.findViewById(R.id.bar_edit_text)))//判斷綁定那種EditView .bindToEmotionButton(rootView.findViewById(R.id.emotion_button))//綁定表情按鈕 .build();
2.實(shí)現(xiàn)表情表情面板切換的思路
這里我們主要采用NoHorizontalScrollerViewPager+RecyclerView+Fragment實(shí)現(xiàn),思路是這樣的,我們以NoHorizontalScrollerViewPager作為載體,fragment作為展示界面,RecyclerView作為底部滾動(dòng)條,每當(dāng)點(diǎn)擊RecyclerView的item時(shí),我們使用viewPager.setCurrentItem(position,false)方法來(lái)切換fragment界面即可(這里傳入false是表示不需要viewPager的切換動(dòng)畫)。這樣我們就可以實(shí)現(xiàn)不同類表情的切換了。(提示一下這里所指的fragment其實(shí)是就工程目錄中的EmotiomComplateFragment.java類)這個(gè)比較簡(jiǎn)單,就不多啰嗦了。實(shí)現(xiàn)代碼稍后會(huì)一起提供。下面是不可橫向滑動(dòng)的ViewPager的實(shí)現(xiàn)代碼,非常簡(jiǎn)單,不攔截子類事件即可。
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 shinezejian@163.com * Description:不可橫向滑動(dòng)的ViewPager */ public class NoHorizontalScrollerViewPager extends ViewPager{ public NoHorizontalScrollerViewPager(Context context) { super(context); } public NoHorizontalScrollerViewPager(Context context, AttributeSet attrs) { super(context, attrs); } /** * 重寫攔截事件,返回值設(shè)置為false,這時(shí)便不會(huì)橫向滑動(dòng)了。 * @param ev * @return */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { return false; } /** * 重寫攔截事件,返回值設(shè)置為false,這時(shí)便不會(huì)橫向滑動(dòng)了。 * @param ev * @return */ @Override public boolean onTouchEvent(MotionEvent ev) { return false; } }
3.單個(gè)表情面板的實(shí)現(xiàn)思路
3.1 表情圖片的本質(zhì)與顯示
表情的顯示從直觀上看確實(shí)是一個(gè)圖片,但實(shí)際只是一種特殊的文本(ImageSpan),比如微博里表情就是”[表情名字]”的接口,可愛的表情就是[可愛]…因此這里我們也打算利用”[表情名字]”作為key,圖片的R值作為內(nèi)容進(jìn)行存取,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 : shinezejian@163.com * @description :表情加載類,可自己添加多種表情,分別建立不同的map存放和不同的標(biāo)志符即可 */ public class EmotionUtils { /** * 表情類型標(biāo)志符 */ public static final int EMOTION_CLASSIC_TYPE=0x0001;//經(jīng)典表情 /** * 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("[陰險(xiǎn)]", 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); } /** * 根據(jù)名稱獲取當(dāng)前表情圖標(biāo)R值 * @param EmotionType 表情類型標(biāo)志符 * @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; } /** * 根據(jù)類型獲取表情數(shù)據(jù) * @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
/** * 獲取fragment的方法 * @param emotionType 表情類型,用于判斷使用哪個(gè)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; }
調(diào)用時(shí),如下:
//創(chuàng)建fragment的工廠類 FragmentFactory factory=FragmentFactory.getSingleFactoryInstance(); //創(chuàng)建修改實(shí)例 EmotiomComplateFragment f1= (EmotiomComplateFragment) factory.getFragment(EmotionUtils.EMOTION_CLASSIC_TYPE);
這里我們通過(guò)工廠類getFragment(int emotionType)方法的創(chuàng)建出模版表情類EmotiomComplateFragment,為什么說(shuō)是模版呢,因?yàn)橹灰覀儎?chuàng)建時(shí)傳遞集合標(biāo)志不同,例如經(jīng)典表情傳遞的就是EmotionUtils.EMOTION_CLASSIC_TYPE,這時(shí)EmotiomComplateFragment類內(nèi)部就會(huì)根據(jù)傳遞的集合類型去EmotionUtils類中獲取相對(duì)應(yīng)的集合,這樣也就會(huì)創(chuàng)建出我們所需要的表情面板。這里小結(jié)一下:通過(guò)上術(shù)分析我們可以知道如果我們要添加自己的其他類型表情,只需以下步驟:
步驟1.在EmotionUtils類創(chuàng)建一個(gè)表情集合,并賦予這個(gè)集合唯一標(biāo)志
步驟2.在EmotionUtils類中的兩個(gè)獲取方法中完善相應(yīng)的代碼。
步驟3.在創(chuàng)建新的EmotiomComplateFragment模板類時(shí),傳遞相應(yīng)的集合標(biāo)志符即可創(chuàng)建相應(yīng)的表情面板。接下來(lái)的問題就是表情如何顯示呢?其實(shí)這里主要用到了SpannableString拓展性字符串相關(guān)知識(shí)點(diǎn),SpannableString可以讓一段字符串在顯示的時(shí)候,將其中某小段文字附著上其他內(nèi)容或替換成其他內(nèi)容,拓展內(nèi)容可以是圖片或者是文字格式,比如加粗,顯示特殊顏色等。
下面我只對(duì)本篇需要用到的SpannableString作簡(jiǎn)要介紹:
ImageSpan,這個(gè)是可以將指定的特殊字符替換成我們所需要的圖片。也就是我們可以使用”[表情名字]”這個(gè)key作為指定的特殊字符,然后在文本中替換成該key所對(duì)應(yīng)的特殊表情即可。
簡(jiǎn)單實(shí)例如下:
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);
首先將我們要替換的字符串轉(zhuǎn)換成SpannableString再創(chuàng)建一個(gè)ImageSpan并把我們的表情圖片包含在內(nèi),最后利用SpannableString的setSpan方法,將span對(duì)象設(shè)置在對(duì)應(yīng)位置,這樣就完成了特殊字符與文字的轉(zhuǎn)換。參數(shù)解析如下,
start 是需要附著的內(nèi)容的開始位置
end 是需要附著的內(nèi)容的開始位置
flag 標(biāo)志位,這里是最常用的EXCLUSIVE_EXCLUSIVE的表示span拓展文本不包含前后(這個(gè)參數(shù)還有其他類型,這里不過(guò)多介紹)
3.2 利用正則表達(dá)式找出特殊字符便于轉(zhuǎn)換成表情
這里我們利用正則表達(dá)式找出特殊字符,根據(jù)我們自己的需求編寫特定的正則表達(dá)式,如下:
String regex = "\\[[\u4e00-\u9fa5\\w]+\\]";
其中[]是我們特殊需要的字符,因此必須使用“//”進(jìn)行轉(zhuǎn)義,\u4e00-\u9fa5表示中文,\w表示下劃線的任意單詞字符,+ 代表一個(gè)或者多個(gè)。因此這段正則就代表,匹配方括號(hào)內(nèi)有一或多個(gè)文字和單詞字符的文本。有了正則表達(dá)式,剩下就是找匹配的問題了,這里我們可以先用matcher.find()獲取到匹配的開始位置,作為setSpan的start值,再使用matcher.group()方法獲取到匹配規(guī)則的具體表情文字。對(duì)于matcher.find()和matcher.group()這里簡(jiǎn)單介紹一下:
matcher.find(),代表部分匹配,從當(dāng)前位置開始匹配,找到一個(gè)匹配的子串,將移動(dòng)下次匹配的位置。因此我們可以通過(guò)這個(gè)方法獲取到匹配的開始位置,作為setSpan的start值(如果字符串中有多個(gè)表情就會(huì)執(zhí)行多次匹配)。
matcher.group(),獲取匹配到的具體字符。
下面直接上SpanStringUtils.java類對(duì)代碼:
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 : shinezejian@163.com * @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(); // 利用表情名字獲取到對(duì)應(yīng)的圖片 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; } }
代碼相對(duì)比較簡(jiǎn)單,這里就不啰嗦啦。
3.3 表情面板的實(shí)現(xiàn)(ViewPager+GridView)
這里的自然就是使用到ViewPager和GridView相結(jié)合實(shí)現(xiàn)多界面滑動(dòng)的效果,參考了微信的實(shí)現(xiàn),每頁(yè)都是一個(gè)GridView顯示20個(gè)表情,末尾還有一個(gè)刪除按鈕。實(shí)現(xiàn)思路入下:
利用ViewPager作為滑動(dòng)控件,同時(shí)結(jié)合GridView來(lái)布局每個(gè)表情,GridView會(huì)顯示3行7列,共21個(gè)Item,即每頁(yè)都是一個(gè)GridView顯示20個(gè)表情,末尾還有一個(gè)刪除按鈕。為了讓Item能大小合適,我們?cè)谶@里利用動(dòng)態(tài)計(jì)算的方式設(shè)置寬高,因?yàn)槠聊粚挾雀饔胁煌?。每個(gè)item寬度的計(jì)算方式,由(屏幕的寬度-左右邊距大小(如果有的話就減去)-每個(gè)item間隙距離)/7,最終便得到item的寬度。至于表情面板的高度=(item寬度*3+間隙*6),即可獲取中高度,為什么間隙*6?這里并沒有什么計(jì)算原理,純粹是我在調(diào)試的過(guò)程中試出來(lái)的值,這個(gè)值相對(duì)比較合理,也比較美觀,當(dāng)然大家也可根據(jù)自己需要調(diào)整。最后就是有多少頁(yè)的問題了,這里可以通過(guò)for循環(huán)表情集合的所有元素,把每次循環(huán)獲取的元素添加到一個(gè)集合中,每次判斷集合是否滿20個(gè)元素,每滿20個(gè)集合就利用該集合去創(chuàng)建一個(gè)GridView的表情面板View,同時(shí)再新建一個(gè)集合存放新獲取到的元素,以次循環(huán)。最后把所有表情生成的一個(gè)個(gè)GridView放到一個(gè)總view集合中,利用ViewPager顯示即可。要注意的是在GridView的適配器和點(diǎn)擊事件中,都利用position判斷,如果是最后一個(gè)就進(jìn)行特殊的顯示(刪除按鈕)和點(diǎn)擊處理。
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 shinezejian@163.com * Description:可替換的模板表情,gridview實(shí)現(xiàn) */ public class EmotiomComplateFragment extends BaseFragment { private EmotionPagerAdapter emotionPagerGvAdapter; private ViewPager vp_complate_emotion_layout; private EmojiIndicatorView ll_point_group;//表情面板對(duì)應(yīng)的點(diǎn)列表 private int emotion_map_type; /** * 創(chuàng)建與Fragment對(duì)象關(guān)聯(lián)的View視圖時(shí)調(diào)用 * @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(); } /** * 初始化監(jiān)聽器 */ 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) { } }); } /** * 初始化表情面板 * 思路:獲取表情的總數(shù),按每行存放7個(gè)表情,動(dòng)態(tài)計(jì)算出每個(gè)表情所占的寬度大小(包含間距), * 而每個(gè)表情的高與寬應(yīng)該是相等的,這里我們約定只存放3行 * 每個(gè)面板最多存放7*3=21個(gè)表情,再減去一個(gè)刪除鍵,即每個(gè)面板包含20個(gè)表情 * 根據(jù)表情總數(shù),循環(huán)創(chuàng)建多個(gè)容量為20的List,存放表情,對(duì)于大小不滿20進(jìn)行特殊 * 處理即可。 */ private void initEmotion() { // 獲取屏幕寬度 int screenWidth = DisplayUtils.getScreenWidthPixels(getActivity()); // item的間距 int spacing = DisplayUtils.dp2px(getActivity(), 12); // 動(dòng)態(tài)計(jì)算item的寬度和高度 int itemWidth = (screenWidth - spacing * 8) / 7; //動(dòng)態(tài)計(jì)算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個(gè)表情作為一組,同時(shí)添加到ViewPager對(duì)應(yīng)的view集合中 if (emotionNames.size() == 20) { GridView gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight); emotionViews.add(gv); // 添加完一組表情,重新創(chuàng)建一個(gè)表情名字集合 emotionNames = new ArrayList<>(); } } // 判斷最后是否有不足20個(gè)表情的剩余情況 if (emotionNames.size() > 0) { GridView gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight); emotionViews.add(gv); } //初始化指示器 ll_point_group.initIndicator(emotionViews.size()); // 將多個(gè)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); } /** * 創(chuàng)建顯示表情的GridView */ private GridView createEmotionGridView(List<String> emotionNames, int gvWidth, int padding, int itemWidth, int gvHeight) { // 創(chuàng)建GridView GridView gv = new GridView(getActivity()); //設(shè)置點(diǎn)擊背景透明 gv.setSelector(android.R.color.transparent); //設(shè)置7列 gv.setNumColumns(7); gv.setPadding(padding, padding, padding, padding); gv.setHorizontalSpacing(padding); gv.setVerticalSpacing(padding * 2); //設(shè)置GridView的寬高 ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(gvWidth, gvHeight); gv.setLayoutParams(params); // 給GridView設(shè)置表情圖片 EmotionGridViewAdapter adapter = new EmotionGridViewAdapter(getActivity(), emotionNames, itemWidth,emotion_map_type); gv.setAdapter(adapter); //設(shè)置全局點(diǎn)擊事件 gv.setOnItemClickListener(GlobalOnItemClickManagerUtils.getInstance(getActivity()).getOnItemClickListener(emotion_map_type)); return gv; } }
注釋非常清晰哈。我就不啰嗦了。但這有個(gè)要注意的是在for循環(huán)時(shí)是通過(guò)EmotionUtils的getEmojiMap(emotion_map_type).keySet()獲取集合,這也印證前面我們所說(shuō)的EmotiomComplateFragment內(nèi)部是通過(guò)集合標(biāo)志判斷集合類型,最終獲取到所需的集合數(shù)據(jù),也就生成了不同表情類型的面板。
3.4 表情的輸入框插入和刪除
思路:在表情框輸入一個(gè)表情實(shí)際上是在當(dāng)前光標(biāo)位置插入一個(gè)表情,添加完表情后再把當(dāng)前光標(biāo)移動(dòng)到表情之后,所以我們首先要獲取到光標(biāo)到首位置,這個(gè)可以利用EditText.setSelectionStart()方法,添加完表情后要設(shè)置光標(biāo)的位置到表情之后,這個(gè)可以使用EditText.setSelection(position)方法。當(dāng)然如果點(diǎn)擊的是刪除按鈕,那么直接調(diào)用系統(tǒng)的 Delete 按鈕事件即可。下面直接上代碼:
// 點(diǎn)擊的是表情 EmotionGridViewAdapter emotionGvAdapter = (EmotionGridViewAdapter) itemAdapter; if (position == emotionGvAdapter.getCount() - 1) { // 如果點(diǎn)擊了最后一個(gè)回退按鈕,則調(diào)用刪除鍵事件 mEditText.dispatchKeyEvent(new KeyEvent( KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL)); } else { // 如果點(diǎn)擊了表情,則添加到輸入框中 String emotionName = emotionGvAdapter.getItem(position); // 獲取當(dāng)前光標(biāo)位置,在指定位置上添加表情圖片文本 int curPosition = mEditText.getSelectionStart(); StringBuilder sb = new StringBuilder(mEditText.getText().toString()); sb.insert(curPosition, emotionName); // 特殊文字處理,將表情等轉(zhuǎn)換一下 mEditText.setText(SpanStringUtils.getEmotionContent(emotion_map_type, mContext, mEditText, sb.toString())); // 將光標(biāo)設(shè)置到新增完表情的右側(cè) mEditText.setSelection(curPosition + emotionName.length()); }
這里要理解一點(diǎn)就是讓控件調(diào)用系統(tǒng)事件的方法為EditText.displatchKeyEvent(new KeyEvent(action, code));其中action就是動(dòng)作,用ACTION_DOWN按下動(dòng)作就可以了而code為按鈕事件碼,刪除對(duì)應(yīng)的就是KEYCODE_DEL。
4.表情點(diǎn)擊事件全局監(jiān)聽的實(shí)現(xiàn)
上面弄明白了表情的輸入與刪除操作后,我們就要考慮一個(gè)問題了,那就是在哪里設(shè)置監(jiān)聽?直接在創(chuàng)建GridView時(shí),這個(gè)確實(shí)行得通,不過(guò)我們還要再考慮一個(gè)問題,那就是如果我們存在多個(gè)GridView呢?多復(fù)制幾遍咯。但我們是高級(jí)工程師對(duì)吧,這樣重復(fù)代碼顯然是不可出現(xiàn)在我們眼前的,因此這里我們決定使用全局監(jiān)聽來(lái)設(shè)置點(diǎn)擊事件,當(dāng)然這個(gè)并非我想到的,這個(gè)是在github開源項(xiàng)目我在閱讀源碼時(shí),發(fā)現(xiàn)的,這種方式挺不錯(cuò),我就拿來(lái)用咯。直接上代碼:
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 shinezejian@163.com * Description:點(diǎn)擊表情的全局監(jiān)聽管理類 */ 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) { // 點(diǎn)擊的是表情 EmotionGridViewAdapter emotionGvAdapter = (EmotionGridViewAdapter) itemAdapter; if (position == emotionGvAdapter.getCount() - 1) { // 如果點(diǎn)擊了最后一個(gè)回退按鈕,則調(diào)用刪除鍵事件 mEditText.dispatchKeyEvent(new KeyEvent( KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL)); } else { // 如果點(diǎn)擊了表情,則添加到輸入框中 String emotionName = emotionGvAdapter.getItem(position); // 獲取當(dāng)前光標(biāo)位置,在指定位置上添加表情圖片文本 int curPosition = mEditText.getSelectionStart(); StringBuilder sb = new StringBuilder(mEditText.getText().toString()); sb.insert(curPosition, emotionName); // 特殊文字處理,將表情等轉(zhuǎn)換一下 mEditText.setText(SpanStringUtils.getEmotionContent(emotion_map_type, mContext, mEditText, sb.toString())); // 將光標(biāo)設(shè)置到新增完表情的右側(cè) mEditText.setSelection(curPosition + emotionName.length()); } } } }; } }
代碼相當(dāng)簡(jiǎn)單,就是創(chuàng)建一個(gè)AdapterView.OnItemClickListener的全局監(jiān)聽器,然后在里面實(shí)現(xiàn)表情的輸入與刪除操作即可。那么怎么使用呢?我們?cè)贓motionMainFragment類中使用創(chuàng)建GlobalOnItemClickManagerUtils,并綁定編輯框,部分代碼如下:
//創(chuàng)建全局監(jiān)聽 GlobalOnItemClickManagerUtils globalOnItemClickManager= GlobalOnItemClickManagerUtils.getInstance(getActivity()); if(isBindToBarEditText){ //綁定當(dāng)前Bar的編輯框 globalOnItemClickManager.attachToEditText(bar_edit_text); }else{ // false,則表示綁定contentView, 此時(shí)外部提供的contentView必定也是EditText globalOnItemClickManager.attachToEditText((EditText) contentView); mEmotionKeyboard.bindToEditText((EditText)contentView); }
綁定的編輯框可能有兩種情況,可能是Bar上的編輯框,但也可能是contentView,此時(shí)外部提供的contentView是EditText(可以直接理解為是把之前所說(shuō)的listview替換成了edittext)。最后別忘記在EmotiomComplateFragment類種創(chuàng)建GridView時(shí)注冊(cè)該監(jiān)聽器,
//設(shè)置全局點(diǎn)擊事件 gv.setOnItemClickListener(GlobalOnItemClickManagerUtils.getInstance(getActivity()).getOnItemClickListener(emotion_map_type));
好了,到此本篇也完結(jié)了,下面給出源碼下載方式:
以上就是對(duì)Android 高仿微信表情的示例,希望能幫助需要開發(fā)此功能的朋友,謝謝大家對(duì)本站的支持!
- android高仿微信表情輸入與鍵盤輸入代碼(詳細(xì)實(shí)現(xiàn)分析)
- 基于Android開發(fā)支持表情的實(shí)現(xiàn)詳解
- Android開發(fā)技巧之像QQ一樣輸入文字和表情圖像
- Android編程實(shí)現(xiàn)QQ表情的發(fā)送和接收完整實(shí)例(附源碼)
- Android編程開發(fā)實(shí)現(xiàn)TextView顯示表情圖像和文字的方法
- 完整的Android表情功能處理方案
- Android編程開發(fā)之EditText實(shí)現(xiàn)輸入QQ表情圖像的方法
- Android自帶emoji表情的使用方法詳解
- android仿微信表情雨下落效果的實(shí)現(xiàn)方法
相關(guān)文章
Flutter組件實(shí)現(xiàn)進(jìn)度指示器
這篇文章主要為大家詳細(xì)介紹了Flutter組件實(shí)現(xiàn)進(jìn)度指示器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Android基于Toolbar實(shí)現(xiàn)頂部標(biāo)題欄及后退鍵
這篇文章主要介紹了Android基于Toolbar實(shí)現(xiàn)頂部標(biāo)題欄及后退鍵,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09Android開發(fā)之AlertDialog實(shí)現(xiàn)彈出對(duì)話框
這篇文章主要為大家詳細(xì)介紹了Android開發(fā)之AlertDialog實(shí)現(xiàn)彈出對(duì)話框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09非常詳細(xì)的android so庫(kù)逆向調(diào)試教程
這篇文章主要給大家介紹了關(guān)于android so庫(kù)逆向調(diào)試的相關(guān)資料,文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì),對(duì)各位Android開發(fā)者具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08Android自定義View原理(實(shí)戰(zhàn))
這篇文章主要介紹了Android自定義View原理,由于Android系統(tǒng)內(nèi)置的View不滿足我們的業(yè)務(wù)需求,變產(chǎn)生了需要自定義View的原因,關(guān)于自定義詳情,需要的小伙伴可以參考下面文章具體詳情2022-05-05Android創(chuàng)建外部lib庫(kù)及自定義View的圖文教程
這篇文章主要給大家介紹了關(guān)于Android創(chuàng)建外部lib庫(kù)及自定義View的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11Android實(shí)現(xiàn)伸縮彈力分布菜單效果的示例
本文介紹下在Android中實(shí)現(xiàn)伸縮彈力分布菜單效果。這種效果比較炫酷,有需要的朋友可以參考一下。2016-10-10Android TV listview及焦點(diǎn)處理
這篇文章主要介紹了Android TV listview及焦點(diǎn)處理的相關(guān)資料,需要的朋友可以參考下2017-06-06Android ActionBarActivity設(shè)置全屏無(wú)標(biāo)題實(shí)現(xiàn)方法總結(jié)
這篇文章主要介紹了Android ActionBarActivity設(shè)置全屏無(wú)標(biāo)題實(shí)現(xiàn)方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04