欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android高仿微信表情輸入與鍵盤輸入詳解

 更新時(shí)間：2016年08月26日 11:10:09   作者：澤堅(jiān)  
本文主要介紹 Android高仿微信表情輸入與鍵盤，這里提供了詳細(xì)的相關(guān)資料及實(shí)現(xiàn)示例代碼，有興趣的小伙伴可以參考下

       最近公司在項(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é)了，下面給出源碼下載方式：

Github項(xiàng)目源碼下載地址

 以上就是對(duì)Android 高仿微信表情的示例，希望能幫助需要開發(fā)此功能的朋友，謝謝大家對(duì)本站的支持！

相關(guān)文章

最新評(píng)論