當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

IM即时通讯项目讲解(一)--实现类似qq微信表情面板无缝切换

發布時間：2023/12/8 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 IM即时通讯项目讲解(一)--实现类似qq微信表情面板无缝切换小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

該系列技術課程來源慕課IM實戰

帶后臺的IM即時通訊App 全程MVP手把手打造

通過該課程可以學習到以下知識點

1、了解和開發后臺項目(這個是需要長期積累的，有了這個可以說入門沒問題)
2、學習到IM相關知識點，創建群、添加群、單聊、群聊
3、可以學習到數據庫的相關操作(建表、表之間的關聯等知識)
4、學習到MVP模式，更加深入了解MVP模式的架構和實現
5、學習到關于IM相關的優化，比如如何快速刷新界面
6、學習到如何進行推送等相關操作(服務器端推送，單推、群推)
7。。。當然還有好多的，大家不妨去了解一下，學習到知識才是最重要的

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

前言

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

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

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

此篇文章背景

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

項目集成

原項目地址 Airpanel

第一步

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

compile 'net.qiujuer.widget:airpanel:1.0.0'

第二步

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

<?xml version="1.0" encoding="utf-8"?> <net.qiujuer.widget.airpanel.AirPanelLinearLayout xmlns: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"> <fragment android: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

這里給出這個fragment的相關邏輯實現(當然這個邏輯和軟鍵盤沒有任何關系了，只是負責控制哪個面板的顯示和隱藏，因為所有的關于軟鍵盤的控制都已經被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 接下來就是相關的表情加載和相關點擊的實現這個有空就為大家在以后的文章中講解//}/*** 初始化錄音布局** @param root 根布局*/private void initRecord(View root) {View recordPanel = mRecordPanel = root.findViewById(R.id.lay_record_panel);//todo 接下來就是相關的語音錄制相關點擊的實現這個有空就為大家在以后的文章中講解}/*** 初始化圖片畫廊** @param root 根布局*/private void initGallery(View root) {View galleryPanel = mGalleryPanel = root.findViewById(R.id.lay_gallery_panel);//todo 接下來就是相關的圖片展示和相關點擊的實現這個有空就為大家在以后的文章中講解}/*** 發送** @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();}/*** 面板變化和相關輸入輸出的回調*/public interface PanelCallback {//獲取到輸入的EditText的值EditText getInputEditText();/*** 點擊發送按鈕的時候發送圖片地址集合** @param paths 本地相冊圖片路徑*/void onSendGalleryClick(String[] paths);/*** 錄音完成的時候回調** @param file 錄音文件* @param time 錄音時長*/void onRecordDone(File file, long time);} }

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

<include layout="@layout/lay_chat_sub_air_panel"/>

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

//第一步//剛才我們實現的面板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() {// 這里面傳遞的是EditText控件也就是我們的輸入控件 Util這個方法是集成的庫中的工具類Util.hideKeyboard(mEtContent);}});//第三步找到我們的fragment 可以操作里面的控制邏輯PanelFragment fragment = (PanelFragment) getChildFragmentManager().findFragmentById(R.id.frag_panel);//讓我們的fragment實現這個方法PanelCallbackfragment.setup(this);mPanelContent = fragment;//這個時候我們可以操作了因為實現了PanelCallback這個接口，那么會實現里面的方法，我們看下如何處理吧@Overridepublic EditText getInputEditText() {//獲取表情輸入當然需要自己進行轉換return mEtContent;}@Overridepublic void onSendGalleryClick(String[] paths) {//圖片地址這個時候我們需要進行上傳邏輯mPresenter.pushImages(paths);}@Overridepublic void onRecordDone(File file, long time) {//語音的發起mPresenter.pushAudio(file.getAbsolutePath(), time);}

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

然后我們看下點擊邏輯吧

//語音切換@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();}}

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

寫在最后

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

<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"/>

然后在Helper這個類中進行拿到這些屬性，并進行相應的邏輯，比如里面的計算軟鍵盤高度、修復高度、設置相關監聽、檢測軟鍵盤的動作等邏輯，大家看下也就明白了。

參考文章

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：那些年，我们一起做过的 Java 课后练
下一篇：说一下自动化测试的优缺点