IM即時通訊項目講解(一)--實現(xiàn)類似qq微信表情面板無縫切換

標(biāo)簽（空格分隔）： 開源項目

---

###該系列技術(shù)課程來源慕課IM實戰(zhàn)

• 帶后臺的IM即時通訊App 全程MVP手把手打造 #####通過該課程可以學(xué)習(xí)到以下知識點
• 1、了解和開發(fā)后臺項目(這個是需要長期積累的，有了這個可以說入門沒問題)
• 2、學(xué)習(xí)到IM相關(guān)知識點，創(chuàng)建群、添加群、單聊、群聊
• 3、可以學(xué)習(xí)到數(shù)據(jù)庫的相關(guān)操作(建表、表之間的關(guān)聯(lián)等知識)
• 4、學(xué)習(xí)到MVP模式，更加深入了解MVP模式的架構(gòu)和實現(xiàn)
• 5、學(xué)習(xí)到關(guān)于IM相關(guān)的優(yōu)化，比如如何快速刷新界面
• 6、學(xué)習(xí)到如何進(jìn)行推送等相關(guān)操作(服務(wù)器端推送，單推、群推)
• 7。。。當(dāng)然還有好多的，大家不妨去了解一下，學(xué)習(xí)到知識才是最重要的

###首先看下效果圖(無圖耍流氓)

###前言 這里首先給個完整的項目地址，該項目是一個完整的IM即時通信。涵蓋的功能群聊、單聊、創(chuàng)建群組、添加好友等。。。。大家可以下載看下.相關(guān)功能點readme.md中都有簡介。

這個項目也算是一個完整的項目，并且運用了一些比較不錯的知識點，還有就是項目中的一些小功能。在我們以后的開發(fā)或者寫的項目中可能會有啟發(fā)和用途，因此在這里通過寫文章記錄一下，一方面也是對于所學(xué)知識的鞏固(正所謂碼了也不一定會、會了也不一定總結(jié)出來、總結(jié)出來也不一定講出來)，正是這個道理，因為總結(jié)出來和自己會不是一個境界，能講出來境界又是提高一層。所以大家不要只停留在碼代碼的一層，要做一名有追求的程序員(雖然我自己在碼代碼的道路上越走越遠(yuǎn)，但是始終不會放棄初心。加油---小菜鳥)

好了，說了那么多話，沒一句說道本篇文章上，不過還要在說幾句，關(guān)于這個IM即時通訊demo，我還是會寫幾篇文章對其進(jìn)行總結(jié)的，也算是對于自己所學(xué)的一個考評吧。接下來會一到兩周更新一篇。準(zhǔn)備利用兩個月時間消化吸收。

###此篇文章背景 在自己的項目中，用到了EditText輸入框，這個是之前已經(jīng)開發(fā)好的，但是有一個問題，那就是沒有解決相應(yīng)的網(wǎng)絡(luò)出現(xiàn)的各種沖突(淚奔)，然后在自己開發(fā)社區(qū)的時候，在社區(qū)詳情，對于評論過多的時候在彈出軟鍵盤的時候(當(dāng)再次點擊取消軟鍵盤消失的時候)下面的評論會進(jìn)行跳動(也就是說取消之后定位的地方不是剛開始彈出軟鍵盤的地方)，當(dāng)然這個和項目初期的控件，評論機制有關(guān)系，現(xiàn)在評論做成了本地評論(有相關(guān)的需求的可以進(jìn)行討論哈)，現(xiàn)在問題解決了，但是還有個體驗不好的地方就是軟鍵盤的切換閃屏問題，就是當(dāng)切換表情的時候屏幕會跳動，因此這個也是之后進(jìn)行的版本優(yōu)化任務(wù)。現(xiàn)在在這個項目中解決了軟鍵盤的切換問題，基本達(dá)到了類似微信、QQ軟鍵盤表情切換效果，讓你***體驗如絲般順暢***。好了，有如此好的方法能夠解決軟鍵盤、表情切換方法或者代碼，那還不趕緊給大家推薦推薦，以方便廣大老鐵們的開發(fā)哈。好了廢話不多說。看看怎么集成到項目中吧。 ###項目集成 原項目地址 Airpanel

####第一步 在module的build.gradle中加入（這個庫很小，8個類，最大類也就200來行代碼，小類幾十行代碼）

compile 'net.qiujuer.widget:airpanel:1.0.0'復(fù)制代碼

####第二步 創(chuàng)建空氣面板布局lay_chat_air_panel.xml(這個里面就需要用到庫中的自定的一個控件了)關(guān)于控件的使用在后面會進(jìn)行相關(guān)講解，這個地方想說明如何引入到項目中

<?xml version="1.0" encoding="utf-8"?> <net.qiujuer.widget.airpanel.AirPanelLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/airPanelSubLayout" android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingTop="1px"android:visibility="gone"> <!--airPanelSubLayout這個根布局的id必須是這個--><!--這里放入一個fragment,在這個fragment里面實現(xiàn)表情、語音、圖片、輸入法的相關(guān)邏輯切換--><fragmentandroid:id="@+id/frag_panel"class="com.mingchu.cnim4android.fragment.panel.PanelFragment"android:layout_width="match_parent"android:layout_height="match_parent"tools:layout="@layout/fragment_panel" /> </net.qiujuer.widget.airpanel.>AirPanelLinearLayout 復(fù)制代碼

這里給出這個fragment的相關(guān)邏輯實現(xiàn)(當(dāng)然這個邏輯和軟鍵盤沒有任何關(guān)系了，只是負(fù)責(zé)控制哪個面板的顯示和隱藏，因為所有的關(guān)于軟鍵盤的控制都已經(jīng)被AirPanelLinearLayout完成了)

public class PanelFragment extends BaseFragment implements FaceListener {//表情面板private View mFacePanel;//圖片相冊面板private View mGalleryPanel;//錄音面板private View mRecordPanel;private PanelCallback mCallback;public PanelFragment() {// Required empty public constructor}@Overrideprotected int getContentLayoutId() {return R.layout.fragment_panel;}@Overrideprotected void initView(View view) {super.initView(view);initRecord(view);initFace(view);initGallery(view);}//初始化表情布局private void initFace(View root) {View facePanel = mFacePanel = root.findViewById(R.id.lay_face_panel);//todo 接下來就是相關(guān)的表情加載和相關(guān)點擊的實現(xiàn) 這個有空就為大家在以后的文章中講解//}/*** 初始化錄音布局** @param root 根布局*/private void initRecord(View root) {View recordPanel = mRecordPanel = root.findViewById(R.id.lay_record_panel);//todo 接下來就是相關(guān)的語音錄制相關(guān)點擊的實現(xiàn) 這個有空就為大家在以后的文章中講解}/*** 初始化圖片畫廊** @param root 根布局*/private void initGallery(View root) {View galleryPanel = mGalleryPanel = root.findViewById(R.id.lay_gallery_panel);//todo 接下來就是相關(guān)的圖片展示和相關(guān)點擊的實現(xiàn) 這個有空就為大家在以后的文章中講解}/*** 發(fā)送** @param galleryView* @param paths*/private void onSendGalleryClick(GalleryView galleryView, String[] paths) {galleryView.clear();PanelCallback callback = mCallback;if (callback == null)return;callback.onSendGalleryClick(paths);}public void setup(PanelCallback callback) {this.mCallback = callback;}public boolean isOpenFace() {return mFacePanel.getVisibility() == View.VISIBLE;}public boolean isOpenMore() {return mGalleryPanel.getVisibility() == View.VISIBLE;}/*** 顯示表情界面*/public void showFace() {mFacePanel.setVisibility(View.VISIBLE);mGalleryPanel.setVisibility(View.GONE);mRecordPanel.setVisibility(View.GONE);}/*** 顯示錄音界面*/public void showRecord() {mFacePanel.setVisibility(View.GONE);mGalleryPanel.setVisibility(View.GONE);mRecordPanel.setVisibility(View.VISIBLE);}/*** 顯示圖片界面*/public void showGallery() {mFacePanel.setVisibility(View.GONE);mGalleryPanel.setVisibility(View.VISIBLE);mRecordPanel.setVisibility(View.GONE);GalleryView view = (GalleryView) mGalleryPanel.findViewById(R.id.view_gallery);view.clear();}public void showMore() {showGallery();}/*** 面板變化和相關(guān)輸入輸出的回調(diào)*/public interface PanelCallback {//獲取到輸入的EditText的值EditText getInputEditText();/*** 點擊發(fā)送按鈕的時候發(fā)送圖片地址集合** @param paths 本地相冊圖片路徑*/void onSendGalleryClick(String[] paths);/*** 錄音完成的時候回調(diào)** @param file 錄音文件* @param time 錄音時長*/void onRecordDone(File file, long time);} }復(fù)制代碼

這個時候萬事俱備，只差我們怎么使用了，不急，一步一步來嗎，畢竟心急吃不了熱豆腐。剛才創(chuàng)建的那個布局，我們放到我們需要使用的fragment或者activity的布局里面

<!--注意一點，根布局使用的是AirPanelLinearLayout--><include layout="@layout/lay_chat_sub_air_panel"/>復(fù)制代碼

好了，看下如何在fragment編寫相關(guān)邏輯吧，當(dāng)然我這里使用的是fragment，activity里面使用的邏輯也是一樣的。

//第一步//剛才我們實現(xiàn)的面板fragmentprivate PanelFragment mPanelContent;//接口private AirPanel.Boss mPanelBoss;//第二步mPanelBoss = (AirPanel.Boss) view.findViewById(R.id.lay_container); //這個id就是根布局的id (也就是AirPanelLinearLayout或者是子類的id)mPanelBoss.setPanelListener(new AirPanel.Listener() {@Overridepublic void requestHideSoftKeyboard() {// 這里面?zhèn)鬟f的是EditText控件 也就是我們的輸入控件 Util這個方法是集成的庫中的工具類Util.hideKeyboard(mEtContent);}});//第三步 找到我們的fragment 可以操作里面的控制邏輯PanelFragment fragment = (PanelFragment) getChildFragmentManager().findFragmentById(R.id.frag_panel);//讓我們的fragment實現(xiàn)這個方法PanelCallbackfragment.setup(this);mPanelContent = fragment;//這個時候我們可以操作了 因為實現(xiàn)了PanelCallback這個接口，那么會實現(xiàn)里面的方法，我們看下如何處理吧@Overridepublic EditText getInputEditText() {//獲取表情輸入 當(dāng)然需要自己進(jìn)行轉(zhuǎn)換return mEtContent;}@Overridepublic void onSendGalleryClick(String[] paths) {//圖片地址 這個時候我們需要進(jìn)行上傳邏輯mPresenter.pushImages(paths);}@Overridepublic void onRecordDone(File file, long time) {//語音的發(fā)起mPresenter.pushAudio(file.getAbsolutePath(), time);}復(fù)制代碼

什么，這TM(提莫必須死)說的啥啊，瓜子毛嗑都準(zhǔn)備好了，就給看這個。。。所有的點擊事件怎么沒有呢，不要急嗎，先看一個圖片

然后我們看下點擊邏輯吧

//語音切換@OnClick(R.id.btn_record)void onRecordClick() {if (mPanelBoss.isOpen()) {Util.showKeyboard(mEtContent);} else {mPanelContent.showRecord();mPanelBoss.openPanel();}}//圖片點擊private void onMoreClick() {if (mPanelBoss.isOpen() && mPanelContent.isOpenMore()) {Util.showKeyboard(mEtContent);} else {mPanelContent.showMore();mPanelBoss.openPanel();}}//表情點擊@OnClick(R.id.btn_face)void onFaceClick() {if (mPanelBoss.isOpen() && mPanelContent.isOpenFace()) {//顯示輸入法Util.showKeyboard(mEtContent);} else {mPanelContent.showFace();mPanelBoss.openPanel();}}復(fù)制代碼

好了，這個時候就已經(jīng)完美的實現(xiàn)了表情、輸入法、語音、圖片面板的切換了，是不是很簡單哈。之前也看過好多的關(guān)于介紹輸入法、表情切換閃屏問題，但是不知道是不是介紹的不詳細(xì)還是實現(xiàn)比較困難(自己太菜)，然后發(fā)現(xiàn)了這樣的一個封裝比較好的一個庫，不過有個問題就是父布局必須是AirPanelLinearLayout。這個就在于大家的取舍了。

###寫在最后 關(guān)于這個庫的介紹就不寫了，大致看了下，也是對于一個鍵盤的初始化，給一個最高和最低的值

<declare-styleable name="AirPanelLinearLayout"><attr format="dimension" name="airPanelMinHeight"/><attr format="dimension" name="airPanelMaxHeight"/></declare-styleable><dimen name="airPanelMaxHeight">280dp</dimen><dimen name="airPanelMinHeight">86dp</dimen><item name="airPanelSubLayout" type="id"/> 復(fù)制代碼

然后在Helper這個類中進(jìn)行拿到這些屬性，并進(jìn)行相應(yīng)的邏輯，比如里面的計算軟鍵盤高度、修復(fù)高度、設(shè)置相關(guān)監(jiān)聽、檢測軟鍵盤的動作等邏輯，大家看下也就明白了。

###參考文章

解決Android軟鍵盤和表情面板切換界面閃動問題 Android鍵盤面板沖突 布局閃動處理方案 Android高仿微信表情輸入與鍵盤輸入詳解

總結(jié)

以上是生活随笔為你收集整理的IM即时通讯项目讲解(一) 实现类似qq微信表情面板无缝切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。