Android高仿微信表情輸入與鍵盤(pán)輸入詳解
最近公司在項(xiàng)目上要使用到表情與鍵盤(pán)的切換輸入，自己實(shí)現(xiàn)了一個(gè)，還是存在些缺陷，比如說(shuō)鍵盤(pán)與表情切換時(shí)出現(xiàn)跳閃問(wèn)題，這個(gè)相當(dāng)困擾我，不過(guò)所幸在Github（其中一個(gè)不錯(cuò)的開(kāi)源項(xiàng)目，其代碼整體結(jié)構(gòu)很不錯(cuò)）并且在論壇上找些解決方案，再加上我也是研究了好多個(gè)開(kāi)源項(xiàng)目的代碼，最后才苦逼地整合出比較不錯(cuò)的實(shí)現(xiàn)效果，可以說(shuō)跟微信基本一樣（嘿嘿，只能說(shuō)目前還沒(méi)發(fā)現(xiàn)大Bug，若發(fā)現(xiàn)大家一起日后慢慢完善，這里我也只是給出了實(shí)現(xiàn)方案，拓展其他表情我并沒(méi)有實(shí)現(xiàn)哈，不過(guò)代碼中我實(shí)現(xiàn)了一個(gè)可拓展的fragment模板以便大家實(shí)現(xiàn)自己的表情包），我只是實(shí)現(xiàn)了一頁(yè)表情，代碼我也進(jìn)行另外的封裝與拓展，大家需要多表情的話只需要實(shí)現(xiàn)自己的表情fragment界面，然后根據(jù)工廠類(lèi)獲取即可，廢話不多說(shuō)先上圖看效果:
效果還不錯(cuò)吧，哈哈。下面開(kāi)始介紹：
本篇主要分析的核心類(lèi)EmotionKeyboard.Java,EmotionComplateFragment.java,EmotionMainFragment.java,FragmentFactory.java,還有一個(gè)是工具類(lèi)里的EmotionUtils.java和GlobalOnItemClickManagerUtils.java 這幾個(gè)類(lèi)我會(huì)重點(diǎn)分析一下，其他的大家自行看源碼哈。下面就開(kāi)始咯，先來(lái)看看本篇主要內(nèi)容以及大概思路：
1.解決表情與鍵盤(pán)切換跳閃問(wèn)題
1.1跳閃問(wèn)題概述
為了讓大家對(duì)這個(gè)問(wèn)題有一定了解，我先來(lái)個(gè)簡(jiǎn)單案例，用紅色面板代表表情面板，效果如下：
圖（1-1）
我們先來(lái)看圖（1-1），即上圖，通過(guò)上圖我們可以看出，當(dāng)表情顯示時(shí)，我們點(diǎn)擊表情按鈕，隱藏表情顯示軟件盤(pán)時(shí)，內(nèi)容Bar有一個(gè)明顯的先向下后恢復(fù)的跳閃現(xiàn)象，這樣用戶體驗(yàn)相當(dāng)?shù)牟?，我們希望的是下圖（1-2）的效果，無(wú)論怎么切換都不會(huì)有跳閃現(xiàn)象，這就是我所有說(shuō)的鍵盤(pán)與表情切換的跳閃問(wèn)題。
圖（1-2）
到這里，我們對(duì)這個(gè)問(wèn)題有了大概了解后，再來(lái)深入分析如何實(shí)現(xiàn)圖（1-2）的不跳閃效果。這里我們做個(gè)約定，我們把含有表情那個(gè)bar統(tǒng)稱(chēng)為內(nèi)容Bar。
1.2 解決跳閃問(wèn)題的思路：
Android系統(tǒng)在彈出軟鍵盤(pán)時(shí)，會(huì)把我們的內(nèi)容 Bar 頂上去，因此只有表情面板的高度與軟鍵盤(pán)彈出時(shí)高度一致時(shí)，才有可能然切換時(shí)高度過(guò)渡更自然，所以我們必須計(jì)算出軟鍵盤(pán)的高度并設(shè)置給表情面板。僅僅有這一步跳閃問(wèn)題還是依舊存在，因此這時(shí)我們必須想其他辦法固定內(nèi)容Bar,因?yàn)樗械奶W都是表情面板隱藏，而軟鍵盤(pán)往上托出瞬間，Activity高度變高(為什么會(huì)變高后面會(huì)說(shuō)明)，內(nèi)容Bar往下滑后，又被軟鍵盤(pán)頂回原來(lái)位置造成的。因此只要固定了內(nèi)容Bar的位置，閃跳問(wèn)題就迎刃而解了。那么如何固定內(nèi)容Bar的位置呢？我們知道在一個(gè)布局中一個(gè)控件的位置其實(shí)是由它上面所有控件的高度決定的，如果其上面其他控件的高度不變，那么當(dāng)前控件的高度自然也不會(huì)變化，即使到時(shí)Activity的高度發(fā)生了變化也也不會(huì)影響該控件的位置(整個(gè)界面的顯示是掛載在window窗體上的，而非Activity，不了解的可以先研究一下窗體的創(chuàng)建過(guò)程)，因此我們只要在軟鍵盤(pán)彈出前固定內(nèi)容Bar上面所有控件高度，從而達(dá)到固定內(nèi)容Bar位置(高度)的目的。好了，有思路了，我們接下來(lái)一步步按上面思路解決問(wèn)題。
1.3 解決跳閃問(wèn)題的套路：
1.3.1 先獲取鍵盤(pán)高度，并設(shè)置表情面板的高度為軟鍵盤(pán)的高度
Android系統(tǒng)在界面上彈出軟鍵盤(pán)時(shí)會(huì)將整個(gè)Activity的高度壓縮，此時(shí)windowSoftInputMode屬性設(shè)置為adjustResize(對(duì)windowSoftInputMode不清楚的話，請(qǐng)自行查閱相關(guān)資料哈),這個(gè)屬性表示Activity的主窗口總是會(huì)被調(diào)整大小，從而保證軟鍵盤(pán)顯示空間。在這種情況下我們可以通過(guò)以下方法計(jì)算軟鍵盤(pán)的高度：
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ì)算軟件盤(pán)的高度 int softInputHeight = screenHeight - r.bottom;
這里我們隊(duì)對(duì)r.bottom和mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r)進(jìn)行簡(jiǎn)單解釋?zhuān)苯由蠄D吧：
這下就清晰了吧，右邊是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)度）的大小是從屏幕頂部開(kāi)始計(jì)算的所以包含了狀態(tài)欄的高度。需要注意的是，區(qū)域大小是這樣計(jì)算出來(lái)的：
區(qū)域的高：r.bottom-r.top
區(qū)域的寬：r.right-r.left
當(dāng)然這個(gè)跟計(jì)算軟鍵盤(pán)高度沒(méi)關(guān)系，只是順帶提一下。因此我們可以通過(guò)即可獲取到軟以下方式獲取鍵盤(pán)高度：
鍵盤(pán)高度=屏幕高度－r.bottom
1.3.2 固定內(nèi)容Bar的高度，解決閃跳問(wèn)題
軟鍵盤(pán)高度解決后，現(xiàn)在剩下的問(wè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è)表情布局），我們的目的就是在彈出軟鍵盤(pán)時(shí)固定FrameLayout的高度，以便去除跳閃問(wèn)題。根據(jù)我們前面的思路，F(xiàn)rameLayout的高度是由其上面的控件決定的也就是由ListView決定的，也就是說(shuō)我們只要在軟鍵盤(pán)彈出前固定ListView的內(nèi)容高度即可。因此我們可以通過(guò)下面的方法來(lái)鎖定ListView的高度，（mContentView就是我們所指的ListView,這些方法都封裝在EmotionKeyboard.java類(lèi)中）
/**
* 鎖定內(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è)主要問(wèn)題都解決了，我們直接上核心類(lèi)代碼，該類(lèi)來(lái)自github上的開(kāi)源項(xiàng)目我在使用中直接從該項(xiàng)目中抽取了該類(lèi), 并做了細(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)自開(kā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;//軟鍵盤(pán)管理類(lèi)
private SharedPreferences sp;
private View mEmotionLayout;//表情布局
private EditText mEditText;//
private View mContentView;//內(nèi)容布局view,即除了表情布局或者軟鍵盤(pán)布局以外的布局，用于固定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();//顯示軟件盤(pán)時(shí)，鎖定內(nèi)容高度，防止跳閃。
hideEmotionLayout(true);//隱藏表情布局，顯示軟件盤(pán)
//軟件盤(pán)顯示后，釋放內(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();//顯示軟件盤(pán)時(shí)，鎖定內(nèi)容高度，防止跳閃。
hideEmotionLayout(true);//隱藏表情布局，顯示軟件盤(pán)
unlockContentHeightDelayed();//軟件盤(pán)顯示后，釋放內(nèi)容高度
} else {
if (isSoftInputShown()) {//同上
lockContentHeight();
showEmotionLayout();
unlockContentHeightDelayed();
} else {
showEmotionLayout();//兩者都沒(méi)顯示，直接顯示表情布局
}
}
}
});
return this;
}
/**
* 設(shè)置表情內(nèi)容布局
* @param emotionView
* @return
*/
public EmotionKeyboard setEmotionView(View emotionView) {
mEmotionLayout = emotionView;
return this;
}
public EmotionKeyboard build(){
//設(shè)置軟件盤(pán)的模式：SOFT_INPUT_ADJUST_RESIZE 這個(gè)屬性表示Activity的主窗口總是會(huì)被調(diào)整大小，從而保證軟鍵盤(pán)顯示空間。
//從而方便我們計(jì)算軟件盤(pán)的高度
mActivity.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN |
WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
//隱藏軟件盤(pán)
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 是否顯示軟件盤(pán)
*/
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)，并顯示軟件盤(pán)
*/
private void showSoftInput() {
mEditText.requestFocus();
mEditText.post(new Runnable() {
@Override
public void run() {
mInputManager.showSoftInput(mEditText, 0);
}
});
}
/**
* 隱藏軟件盤(pán)
*/
private void hideSoftInput() {
mInputManager.hideSoftInputFromWindow(mEditText.getWindowToken(), 0);
}
/**
* 是否顯示軟件盤(pán)
* @return
*/
private boolean isSoftInputShown() {
return getSupportSoftInputHeight() != 0;
}
/**
* 獲取軟件盤(pán)的高度
* @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ì)算軟件盤(pán)的高度
int softInputHeight = screenHeight - r.bottom;
/**
* 某些Android版本下，沒(méi)有顯示軟鍵盤(pán)時(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;
}
}
/**
* 獲取軟鍵盤(pán)高度
* @return
*/
public int getKeyBoardHeight(){
return sp.getInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, 400);
}
}
EmotionKeyboard類(lèi)使用的是設(shè)計(jì)模式中的builder模式來(lái)創(chuàng)建對(duì)象。其中mEmotionLayout是表情布局，mContentView是內(nèi)容布局view,即除了表情布局或者軟鍵盤(pán)布局以外的布局，用于固定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();//顯示軟件盤(pán)時(shí)，鎖定內(nèi)容高度，防止跳閃。
hideEmotionLayout(true);//隱藏表情布局，顯示軟件盤(pán)
unlockContentHeightDelayed();//軟件盤(pán)顯示后，釋放內(nèi)容高度
} else {
if (isSoftInputShown()) {//同上
lockContentHeight();
showEmotionLayout();
unlockContentHeightDelayed();
} else {
showEmotionLayout();//兩者都沒(méi)顯示，直接顯示表情布局
}
}
}
});
return this;
}
這里我們主要重點(diǎn)說(shuō)明一下點(diǎn)擊表情按鈕時(shí)，顯示或者隱藏表情布局以及軟鍵盤(pán)的邏輯。首先我們通過(guò)mEmotionLayout.isShown()去判斷表情是否已經(jīng)顯示，如果返回true,這時(shí)肯定要去切換成軟鍵盤(pán)，因此必須先通過(guò)lockContentHeight()方法鎖定mContentView內(nèi)容高度，然后通過(guò)hideEmotionLayout(true)方法因此表情布局并顯示軟鍵盤(pán)，這里傳入true表示顯示軟鍵盤(pán)，如果傳入false則表示不顯示軟鍵盤(pán)，軟鍵盤(pán)顯示后通過(guò)unlockContentHeightDelayed()方法去解鎖mContentView內(nèi)容高度。但如果mEmotionLayout.isShown()返回了false，這有兩種情況，第1種是如果此時(shí)軟鍵盤(pán)已經(jīng)顯示，則需先鎖定mContentView內(nèi)容高度，再去隱藏軟鍵盤(pán)，然后顯示表情布局，最后再解鎖mContentView內(nèi)容高度。第2種情況是軟鍵盤(pán)和表情都沒(méi)顯示，這下就簡(jiǎn)單了，直接顯示表情布局即可。好，這個(gè)類(lèi)解析到這，其他直接看源碼哈，注釋杠杠的哈。最后我們來(lái)看看在外部使用該類(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)畫(huà))。這樣我們就可以實(shí)現(xiàn)不同類(lèi)表情的切換了。（提示一下這里所指的fragment其實(shí)是就工程目錄中的EmotiomComplateFragment.java類(lèi)）這個(gè)比較簡(jiǎn)單，就不多啰嗦了。實(shí)現(xiàn)代碼稍后會(huì)一起提供。下面是不可橫向滑動(dòng)的ViewPager的實(shí)現(xiàn)代碼，非常簡(jiǎn)單，不攔截子類(lèi)事件即可。
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);
}
/**
* 重寫(xiě)攔截事件，返回值設(shè)置為false，這時(shí)便不會(huì)橫向滑動(dòng)了。
* @param ev
* @return
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return false;
}
/**
* 重寫(xiě)攔截事件，返回值設(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），比如微博里表情就是”[表情名字]”的接口,可愛(ài)的表情就是[可愛(ài)]…因此這里我們也打算利用”[表情名字]”作為key，圖片的R值作為內(nèi)容進(jìn)行存取，EmotionUtils類(lèi)如下
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 :表情加載類(lèi),可自己添加多種表情，分別建立不同的map存放和不同的標(biāo)志符即可
*/
public class EmotionUtils {
/**
* 表情類(lèi)型標(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("[愛(ài)你]", 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("[可愛(ài)]", 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("[睡覺(jué)]", R.drawable.d_shuijiao);
EMOTION_CLASSIC_MAP.put("[錢(qián)]", 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("[太開(kāi)心]", 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("[疑問(wèn)]", 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ù)名稱(chēng)獲取當(dāng)前表情圖標(biāo)R值
* @param EmotionType 表情類(lèi)型標(biāo)志符
* @param imgName 名稱(chēng)
* @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ù)類(lèi)型獲取表情數(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 表情類(lèi)型，用于判斷使用哪個(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的工廠類(lèi) FragmentFactory factory=FragmentFactory.getSingleFactoryInstance(); //創(chuàng)建修改實(shí)例 EmotiomComplateFragment f1= (EmotiomComplateFragment) factory.getFragment(EmotionUtils.EMOTION_CLASSIC_TYPE);
這里我們通過(guò)工廠類(lèi)getFragment(int emotionType)方法的創(chuàng)建出模版表情類(lèi)EmotiomComplateFragment，為什么說(shuō)是模版呢，因?yàn)橹灰覀儎?chuàng)建時(shí)傳遞集合標(biāo)志不同，例如經(jīng)典表情傳遞的就是EmotionUtils.EMOTION_CLASSIC_TYPE，這時(shí)EmotiomComplateFragment類(lèi)內(nèi)部就會(huì)根據(jù)傳遞的集合類(lèi)型去EmotionUtils類(lèi)中獲取相對(duì)應(yīng)的集合，這樣也就會(huì)創(chuàng)建出我們所需要的表情面板。這里小結(jié)一下：通過(guò)上術(shù)分析我們可以知道如果我們要添加自己的其他類(lèi)型表情，只需以下步驟：
步驟1.在EmotionUtils類(lèi)創(chuàng)建一個(gè)表情集合，并賦予這個(gè)集合唯一標(biāo)志
步驟2.在EmotionUtils類(lèi)中的兩個(gè)獲取方法中完善相應(yīng)的代碼。
步驟3.在創(chuàng)建新的EmotiomComplateFragment模板類(lèi)時(shí)，傳遞相應(yīng)的集合標(biāo)志符即可創(chuàng)建相應(yīng)的表情面板。接下來(lái)的問(wèn)題就是表情如何顯示呢？其實(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)容的開(kāi)始位置
end 是需要附著的內(nèi)容的開(kāi)始位置
flag 標(biāo)志位,這里是最常用的EXCLUSIVE_EXCLUSIVE的表示span拓展文本不包含前后（這個(gè)參數(shù)還有其他類(lèi)型，這里不過(guò)多介紹）
3.2 利用正則表達(dá)式找出特殊字符便于轉(zhuǎn)換成表情
這里我們利用正則表達(dá)式找出特殊字符，根據(jù)我們自己的需求編寫(xiě)特定的正則表達(dá)式，如下：
String regex = "\\[[\u4e00-\u9fa5\\w]+\\]";
其中［］是我們特殊需要的字符，因此必須使用“//”進(jìn)行轉(zhuǎn)義，\u4e00-\u9fa5表示中文，\w表示下劃線的任意單詞字符，+ 代表一個(gè)或者多個(gè)。因此這段正則就代表,匹配方括號(hào)內(nèi)有一或多個(gè)文字和單詞字符的文本。有了正則表達(dá)式，剩下就是找匹配的問(wèn)題了，這里我們可以先用matcher.find()獲取到匹配的開(kāi)始位置,作為setSpan的start值,再使用matcher.group()方法獲取到匹配規(guī)則的具體表情文字。對(duì)于matcher.find()和matcher.group()這里簡(jiǎn)單介紹一下：
matcher.find()，代表部分匹配，從當(dāng)前位置開(kāi)始匹配，找到一個(gè)匹配的子串，將移動(dòng)下次匹配的位置。因此我們可以通過(guò)這個(gè)方法獲取到匹配的開(kāi)始位置,作為setSpan的start值（如果字符串中有多個(gè)表情就會(huì)執(zhí)行多次匹配）。
matcher.group()，獲取匹配到的具體字符。
下面直接上SpanStringUtils.java類(lèi)對(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();
// 匹配字符串的開(kāi)始位置
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？這里并沒(méi)有什么計(jì)算原理，純粹是我在調(diào)試的過(guò)程中試出來(lái)的值，這個(gè)值相對(duì)比較合理，也比較美觀，當(dāng)然大家也可根據(jù)自己需要調(diào)整。最后就是有多少頁(yè)的問(wèn)題了，這里可以通過(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的類(lèi)型
emotion_map_type=args.getInt(FragmentFactory.EMOTION_MAP_TYPE);
initEmotion();
}
/**
* 初始化監(jiān)聽(tīng)器
*/
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距），
* 而每個(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)志判斷集合類(lèi)型，最終獲取到所需的集合數(shù)據(jù)，也就生成了不同表情類(lèi)型的面板。
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)聽(tīng)的實(shí)現(xiàn)
上面弄明白了表情的輸入與刪除操作后，我們就要考慮一個(gè)問(wèn)題了，那就是在哪里設(shè)置監(jiān)聽(tīng)？直接在創(chuàng)建GridView時(shí)，這個(gè)確實(shí)行得通，不過(guò)我們還要再考慮一個(gè)問(wèn)題，那就是如果我們存在多個(gè)GridView呢？多復(fù)制幾遍咯。但我們是高級(jí)工程師對(duì)吧，這樣重復(fù)代碼顯然是不可出現(xiàn)在我們眼前的，因此這里我們決定使用全局監(jiān)聽(tīng)來(lái)設(shè)置點(diǎn)擊事件，當(dāng)然這個(gè)并非我想到的，這個(gè)是在github開(kāi)源項(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)聽(tīng)管理類(lèi)
*/
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)聽(tīng)器，然后在里面實(shí)現(xiàn)表情的輸入與刪除操作即可。那么怎么使用呢？我們?cè)贓motionMainFragment類(lèi)中使用創(chuàng)建GlobalOnItemClickManagerUtils，并綁定編輯框，部分代碼如下:
//創(chuàng)建全局監(jiān)聽(tīng)
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類(lèi)種創(chuàng)建GridView時(shí)注冊(cè)該監(jiān)聽(tīng)器，
//設(shè)置全局點(diǎn)擊事件 gv.setOnItemClickListener(GlobalOnItemClickManagerUtils.getInstance(getActivity()).getOnItemClickListener(emotion_map_type));
好了，到此本篇也完結(jié)了，下面給出源碼下載方式：
以上就是對(duì)Android 高仿微信表情的示例，希望能幫助需要開(kāi)發(fā)此功能的朋友，謝謝大家對(duì)本站的支持！
- android高仿微信表情輸入與鍵盤(pán)輸入代碼(詳細(xì)實(shí)現(xiàn)分析)
- 基于Android開(kāi)發(fā)支持表情的實(shí)現(xiàn)詳解
- Android開(kāi)發(fā)技巧之像QQ一樣輸入文字和表情圖像
- Android編程實(shí)現(xiàn)QQ表情的發(fā)送和接收完整實(shí)例(附源碼)
- Android編程開(kāi)發(fā)實(shí)現(xiàn)TextView顯示表情圖像和文字的方法
- 完整的Android表情功能處理方案
- Android編程開(kāi)發(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-08
Android基于Toolbar實(shí)現(xiàn)頂部標(biāo)題欄及后退鍵
這篇文章主要介紹了Android基于Toolbar實(shí)現(xiàn)頂部標(biāo)題欄及后退鍵,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Android開(kāi)發(fā)之AlertDialog實(shí)現(xiàn)彈出對(duì)話框
這篇文章主要為大家詳細(xì)介紹了Android開(kāi)發(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開(kāi)發(fā)者具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08
Android自定義View原理(實(shí)戰(zhàn))
這篇文章主要介紹了Android自定義View原理，由于Android系統(tǒng)內(nèi)置的View不滿足我們的業(yè)務(wù)需求，變產(chǎn)生了需要自定義View的原因，關(guān)于自定義詳情，需要的小伙伴可以參考下面文章具體詳情2022-05-05
Android創(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-11
Android Zxing二維碼掃描圖片拉伸問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了Android Zxing二維碼掃描圖片拉伸問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Android實(shí)現(xiàn)伸縮彈力分布菜單效果的示例
本文介紹下在Android中實(shí)現(xiàn)伸縮彈力分布菜單效果。這種效果比較炫酷，有需要的朋友可以參考一下。2016-10-10
Android TV listview及焦點(diǎn)處理
這篇文章主要介紹了Android TV listview及焦點(diǎn)處理的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android ActionBarActivity設(shè)置全屏無(wú)標(biāo)題實(shí)現(xiàn)方法總結(jié)
這篇文章主要介紹了Android ActionBarActivity設(shè)置全屏無(wú)標(biāo)題實(shí)現(xiàn)方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04