最近公司在項目上要使用到表情與鍵盤的切換輸入,自己實現了一個,還是存在些缺陷,比如說鍵盤與表情切換時出現跳閃問題,這個相當困擾我,不過所幸在Github(其中一個不錯的開源項目,其代碼整體結構很不錯)并且在論壇上找些解決方案,再加上我也是研究了好多個開源項目的代碼,最后才苦逼地整合出比較不錯的實現效果,可以說跟微信基本一樣(嘿嘿,只能說目前還沒發現大Bug,若發現大家一起日后慢慢完善,這里我也只是給出了實現方案,拓展其他表情我并沒有實現哈,不過代碼中我實現了一個可拓展的fragment模板以便大家實現自己的表情包),我只是實現了一頁表情,代碼我也進行另外的封裝與拓展,大家需要多表情的話只需要實現自己的表情fragment界面,然后根據工廠類獲取即可,廢話不多說先上圖看效果:


效果還不錯吧,哈哈。下面開始介紹:
本篇主要分析的核心類EmotionKeyboard.Java,EmotionComplateFragment.java,EmotionMainFragment.java,FragmentFactory.java,還有一個是工具類里的EmotionUtils.java和GlobalOnItemClickManagerUtils.java 這幾個類我會重點分析一下,其他的大家自行看源碼哈。下面就開始咯,先來看看本篇主要內容以及大概思路:

1.解決表情與鍵盤切換跳閃問題
1.1跳閃問題概述
為了讓大家對這個問題有一定了解,我先來個簡單案例,用紅色面板代表表情面板,效果如下:

圖(1-1)
我們先來看圖(1-1),即上圖,通過上圖我們可以看出,當表情顯示時,我們點擊表情按鈕,隱藏表情顯示軟件盤時,內容Bar有一個明顯的先向下后恢復的跳閃現象,這樣用戶體驗相當的差,我們希望的是下圖(1-2)的效果,無論怎么切換都不會有跳閃現象,這就是我所有說的鍵盤與表情切換的跳閃問題。

圖(1-2)
到這里,我們對這個問題有了大概了解后,再來深入分析如何實現圖(1-2)的不跳閃效果。這里我們做個約定,我們把含有表情那個bar統稱為內容Bar。
1.2 解決跳閃問題的思路:
Android系統在彈出軟鍵盤時,會把我們的內容 Bar 頂上去,因此只有表情面板的高度與軟鍵盤彈出時高度一致時,才有可能然切換時高度過渡更自然,所以我們必須計算出軟鍵盤的高度并設置給表情面板。僅僅有這一步跳閃問題還是依舊存在,因此這時我們必須想其他辦法固定內容Bar,因為所有的跳閃都是表情面板隱藏,而軟鍵盤往上托出瞬間,Activity高度變高(為什么會變高后面會說明),內容Bar往下滑后,又被軟鍵盤頂回原來位置造成的。因此只要固定了內容Bar的位置,閃跳問題就迎刃而解了。那么如何固定內容Bar的位置呢?我們知道在一個布局中一個控件的位置其實是由它上面所有控件的高度決定的,如果其上面其他控件的高度不變,那么當前控件的高度自然也不會變化,即使到時Activity的高度發生了變化也也不會影響該控件的位置(整個界面的顯示是掛載在window窗體上的,而非Activity,不了解的可以先研究一下窗體的創建過程),因此我們只要在軟鍵盤彈出前固定內容Bar上面所有控件高度,從而達到固定內容Bar位置(高度)的目的。好了,有思路了,我們接下來一步步按上面思路解決問題。
1.3 解決跳閃問題的套路:
1.3.1 先獲取鍵盤高度,并設置表情面板的高度為軟鍵盤的高度
Android系統在界面上彈出軟鍵盤時會將整個Activity的高度壓縮,此時windowSoftInputMode屬性設置為adjustResize(對windowSoftInputMode不清楚的話,請自行查閱相關資料哈),這個屬性表示Activity的主窗口總是會被調整大小,從而保證軟鍵盤顯示空間。在這種情況下我們可以通過以下方法計算軟鍵盤的高度:
Rect r = new Rect();/** decorView是window中的最頂層view,可以從window中通過getDecorView獲取到decorView。* 通過decorView獲取到程序顯示的區域,包括標題欄,但不包括狀態欄。*/mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r);//獲取屏幕的高度int screenHeight = mActivity.getWindow().getDecorView().getRootView().getHeight();//計算軟件盤的高度int softInputHeight = screenHeight - r.bottom;
這里我們隊對r.bottom和mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r)進行簡單解釋,直接上圖吧:

這下就清晰了吧,右邊是Rect參數解析圖,輔助我們對rect的理解。
Rect r = new Rect();
mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r)
這兩句其實將左圖中藍色邊框( 其實也就是actvity的大小)的size大小參數封裝到Rect中,以便我們后續使用。雖然計算出來的區域大小不包含狀態欄,但是r.bottom(紅色箭頭長度)的大小是從屏幕頂部開始計算的所以包含了狀態欄的高度。需要注意的是,區域大小是這樣計算出來的:
區域的高:r.bottom-r.top
區域的寬:r.right-r.left
當然這個跟計算軟鍵盤高度沒關系,只是順帶提一下。因此我們可以通過即可獲取到軟以下方式獲取鍵盤高度:
鍵盤高度=屏幕高度-r.bottom
1.3.2 固定內容Bar的高度,解決閃跳問題
軟鍵盤高度解決后,現在剩下的問題關鍵就在于控制內容Bar的高度了,那么如何做呢?我們先來看一個布局文件
<?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,這樣這個ListView就會自動充滿整個布局,這里ListView可以替換成任意控件,FrameLayout則為表情布局(也可認為就是我們前面所說的內容Bar,只不過這里最終會被替換成整個表情布局),我們的目的就是在彈出軟鍵盤時固定FrameLayout的高度,以便去除跳閃問題。根據我們前面的思路,FrameLayout的高度是由其上面的控件決定的也就是由ListView決定的,也就是說我們只要在軟鍵盤彈出前固定ListView的內容高度即可。因此我們可以通過下面的方法來鎖定ListView的高度,(mContentView就是我們所指的ListView,這些方法都封裝在EmotionKeyboard.java類中)
/** * 鎖定內容高度,防止跳閃 */ private void lockContentHeight(){ LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContentView.getLayoutParams(); params.height = mContentView.getHeight(); params.weight = 0.0F; }將weight置0,然后將height設置為當前的height,在父控件(LinearLayout)的高度變化時它的高度也不再會變化。釋放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;,在代碼里動態更改LayoutParam的weight,會導致父控件重新onLayout(),也就達到改變控件的高度的目的。到此兩個主要問題都解決了,我們直接上核心類代碼,該類來自github上的開源項目我在使用中直接從該項目中抽取了該類, 并做了細微修改,也添加了代碼注釋。
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 :源碼來自開源項目https://github.com/dss886/Android-EmotionInputDetector * 本人僅做細微修改以及代碼解析 */public class EmotionKeyboard { private static final String SHARE_PREFERENCE_NAME = "EmotionKeyboard"; private static final String SHARE_PREFERENCE_SOFT_INPUT_HEIGHT = "soft_input_height"; private Activity mActivity; private InputMethodManager mInputManager;//軟鍵盤管理類 private SharedPreferences sp; private View mEmotionLayout;//表情布局 private EditText mEditText;// private View mContentView;//內容布局view,即除了表情布局或者軟鍵盤布局以外的布局,用于固定bar的高度,防止跳閃 private EmotionKeyboard(){ } /** * 外部靜態調用 * @param activity * @return */ public static EmotionKeyboard with(Activity activity) { EmotionKeyboard emotionInputDetector = new EmotionKeyboard(); emotionInputDetector.mActivity = activity; emotionInputDetector.mInputManager = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE); emotionInputDetector.sp = activity.getSharedPreferences(SHARE_PREFERENCE_NAME, Context.MODE_PRIVATE); return emotionInputDetector; } /** * 綁定內容view,此view用于固定bar的高度,防止跳閃 * @param contentView * @return */ public EmotionKeyboard bindToContent(View contentView) { mContentView = contentView; return this; } /** * 綁定編輯框 * @param editText * @return */ public EmotionKeyboard bindToEditText(EditText editText) { mEditText = editText; mEditText.requestFocus(); mEditText.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP && mEmotionLayout.isShown()) { lockContentHeight();//顯示軟件盤時,鎖定內容高度,防止跳閃。 hideEmotionLayout(true);//隱藏表情布局,顯示軟件盤 //軟件盤顯示后,釋放內容高度 mEditText.postDelayed(new Runnable() { @Override public void run() { unlockContentHeightDelayed(); } }, 200L); } return false; } }); return this; } /** * 綁定表情按鈕 * @param emotionButton * @return */ public EmotionKeyboard bindToEmotionButton(View emotionButton) { emotionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (mEmotionLayout.isShown()) { lockContentHeight();//顯示軟件盤時,鎖定內容高度,防止跳閃。 hideEmotionLayout(true);//隱藏表情布局,顯示軟件盤 unlockContentHeightDelayed();//軟件盤顯示后,釋放內容高度 } else { if (isSoftInputShown()) {//同上 lockContentHeight(); showEmotionLayout(); unlockContentHeightDelayed(); } else { showEmotionLayout();//兩者都沒顯示,直接顯示表情布局 } } } }); return this; } /** * 設置表情內容布局 * @param emotionView * @return */ public EmotionKeyboard setEmotionView(View emotionView) { mEmotionLayout = emotionView; return this; } public EmotionKeyboard build(){//設置軟件盤的模式:SOFT_INPUT_ADJUST_RESIZE 這個屬性表示Activity的主窗口總是會被調整大小,從而保證軟鍵盤顯示空間。 //從而方便我們計算軟件盤的高度 mActivity.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); //隱藏軟件盤 hideSoftInput(); return this; } /** * 點擊返回鍵時先隱藏表情布局 * @return */ public boolean interceptBackPress() { if (mEmotionLayout.isShown()) { hideEmotionLayout(false); return true; } return false; } private void showEmotionLayout() { int softInputHeight = getSupportSoftInputHeight(); if (softInputHeight == 0) { softInputHeight = sp.getInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, 400); } hideSoftInput(); mEmotionLayout.getLayoutParams().height = softInputHeight; mEmotionLayout.setVisibility(View.VISIBLE); } /** * 隱藏表情布局 * @param showSoftInput 是否顯示軟件盤 */ private void hideEmotionLayout(boolean showSoftInput) { if (mEmotionLayout.isShown()) { mEmotionLayout.setVisibility(View.GONE); if (showSoftInput) { showSoftInput(); } } } /** * 鎖定內容高度,防止跳閃 */ private void lockContentHeight() { LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mContentView.getLayoutParams(); params.height = mContentView.getHeight(); params.weight = 0.0F; } /** * 釋放被鎖定的內容高度 */ private void unlockContentHeightDelayed() { mEditText.postDelayed(new Runnable() { @Override public void run() { ((LinearLayout.LayoutParams) mContentView.getLayoutParams()).weight = 1.0F; } }, 200L); } /** * 編輯框獲取焦點,并顯示軟件盤 */ private void showSoftInput() { mEditText.requestFocus(); mEditText.post(new Runnable() { @Override public void run() { mInputManager.showSoftInput(mEditText, 0); } }); } /** * 隱藏軟件盤 */ private void hideSoftInput() { mInputManager.hideSoftInputFromWindow(mEditText.getWindowToken(), 0); } /** * 是否顯示軟件盤 * @return */ private boolean isSoftInputShown() { return getSupportSoftInputHeight() != 0; } /** * 獲取軟件盤的高度 * @return */ private int getSupportSoftInputHeight() { Rect r = new Rect(); /** * decorView是window中的最頂層view,可以從window中通過getDecorView獲取到decorView。 * 通過decorView獲取到程序顯示的區域,包括標題欄,但不包括狀態欄。 */ mActivity.getWindow().getDecorView().getWindowVisibleDisplayFrame(r); //獲取屏幕的高度 int screenHeight = mActivity.getWindow().getDecorView().getRootView().getHeight(); //計算軟件盤的高度 int softInputHeight = screenHeight - r.bottom; /** * 某些Android版本下,沒有顯示軟鍵盤時減出來的高度總是144,而不是零, * 這是因為高度是包括了虛擬按鍵欄的(例如華為系列),所以在API Level高于20時, * 我們需要減去底部虛擬按鍵欄的高度(如果有的話) */ if (Build.VERSION.SDK_INT >= 20) { // When SDK Level >= 20 (Android L), the softInputHeight will contain the height of softButtonsBar (if has) softInputHeight = softInputHeight - getSoftButtonsBarHeight(); } if (softInputHeight < 0) { LogUtils.w("EmotionKeyboard--Warning: value of softInputHeight is below zero!"); } //存一份到本地 if (softInputHeight > 0) { sp.edit().putInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, softInputHeight).apply(); } return softInputHeight; } /** * 底部虛擬按鍵欄的高度 * @return */ @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1) private int getSoftButtonsBarHeight() { DisplayMetrics metrics = new DisplayMetrics(); //這個方法獲取可能不是真實屏幕的高度 mActivity.getWindowManager().getDefaultDisplay().getMetrics(metrics); int usableHeight = metrics.heightPixels; //獲取當前屏幕的真實高度 mActivity.getWindowManager().getDefaultDisplay().getRealMetrics(metrics); int realHeight = metrics.heightPixels; if (realHeight > usableHeight) { return realHeight - usableHeight; } else { return 0; } } /** * 獲取軟鍵盤高度 * @return */ public int getKeyBoardHeight(){ return sp.getInt(SHARE_PREFERENCE_SOFT_INPUT_HEIGHT, 400); }}EmotionKeyboard類使用的是設計模式中的builder模式來創建對象。其中mEmotionLayout是表情布局,mContentView是內容布局view,即除了表情布局或者軟鍵盤布局以外的布局,用于固定bar的高度,防止跳閃,當然mContentView可以是任意布局。
/** * 綁定表情按鈕 * @param emotionButton * @return */ public EmotionKeyboard bindToEmotionButton(View emotionButton) { emotionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (mEmotionLayout.isShown()) { lockContentHeight();//顯示軟件盤時,鎖定內容高度,防止跳閃。 hideEmotionLayout(true);//隱藏表情布局,顯示軟件盤 unlockContentHeightDelayed();//軟件盤顯示后,釋放內容高度 } else { if (isSoftInputShown()) {//同上 lockContentHeight(); showEmotionLayout(); unlockContentHeightDelayed(); } else { showEmotionLayout();//兩者都沒顯示,直接顯示表情布局 } } } }); return this; }這里我們主要重點說明一下點擊表情按鈕時,顯示或者隱藏表情布局以及軟鍵盤的邏輯。首先我們通過mEmotionLayout.isShown()去判斷表情是否已經顯示,如果返回true,這時肯定要去切換成軟鍵盤,因此必須先通過lockContentHeight()方法鎖定mContentView內容高度,然后通過hideEmotionLayout(true)方法因此表情布局并顯示軟鍵盤,這里傳入true表示顯示軟鍵盤,如果傳入false則表示不顯示軟鍵盤,軟鍵盤顯示后通過unlockContentHeightDelayed()方法去解鎖mContentView內容高度。但如果mEmotionLayout.isShown()返回了false,這有兩種情況,第1種是如果此時軟鍵盤已經顯示,則需先鎖定mContentView內容高度,再去隱藏軟鍵盤,然后顯示表情布局,最后再解鎖mContentView內容高度。第2種情況是軟鍵盤和表情都沒顯示,這下就簡單了,直接顯示表情布局即可。好,這個類解析到這,其他直接看源碼哈,注釋杠杠的哈。最后我們來看看在外部使用該類的例子代碼如下:
mEmotionKeyboard = EmotionKeyboard.with(getActivity()) .setEmotionView(rootView.findViewById(R.id.ll_emotion_layout))//綁定表情面板 .bindToContent(contentView)//綁定內容view .bindToEditText(!isBindToBarEditText ? ((EditText) contentView) : ((EditText) rootView.findViewById(R.id.bar_edit_text)))//判斷綁定那種EditView .bindToEmotionButton(rootView.findViewById(R.id.emotion_button))//綁定表情按鈕 .build();
2.實現表情表情面板切換的思路
這里我們主要采用NoHorizontalScrollerViewPager+RecyclerView+Fragment實現,思路是這樣的,我們以NoHorizontalScrollerViewPager作為載體,fragment作為展示界面,RecyclerView作為底部滾動條,每當點擊RecyclerView的item時,我們使用viewPager.setCurrentItem(position,false)方法來切換fragment界面即可(這里傳入false是表示不需要viewPager的切換動畫)。這樣我們就可以實現不同類表情的切換了。(提示一下這里所指的fragment其實是就工程目錄中的EmotiomComplateFragment.java類)這個比較簡單,就不多 主站蜘蛛池模板: 平舆县| 巢湖市| 泊头市| 靖宇县| 武冈市| 平山县| 若尔盖县| 榆林市| 白水县| 仁化县| 叶城县| 永清县| 类乌齐县| 杭锦旗| 综艺| 文山县| 永兴县| 房产| 康乐县| 嘉禾县| 涞源县| 塔城市| 宜黄县| 宜君县| 广平县| 壤塘县| 庄浪县| 竹北市| 台安县| 石首市| 道孚县| 宁德市| 临泉县| 博湖县| 奉化市| 镶黄旗| 建瓯市| 永康市| 大竹县| 大竹县| 安仁县|