android IM即时通信之聊天界面UI框架

写在最前面

现在很多软件都要求加入即时通信的功能，当然很多都用了三方（环信、融信。。。）。最近，项目也有此需求，我们选择的是环信。环信也提供了UI框架，但是说实在的一般的应用用不了那么多功能，可能就简单的语音、表情、图片。我们就需要根据我们自己的需求去更改他的UI框架，花了很多时间去看他的UI框架源码。看完我真是要吐了，写的太复杂了，所以一气之下就自己写了界面。

效果展示

效果展示

简单介绍

• 如何使用

  EmotionInputDetector mDetector = EmotionInputDetector.with(this)      //表情、更多页面布局Layout      .setEmotionView(emotionLayout)      //表情和更多功能是一个Frament，因此放在了ViewPager里面      .setViewPager(viewpager)      //聊天信息列表      .bindToContent(chatList)      //输入框      .bindToEditText(editText)      //表情按钮绑定      .bindToEmotionButton(emotionButton)      //add按钮绑定      .bindToAddButton(emotionAdd)       //发送按钮绑定      .bindToSendButton(emotionSend)      //录音按钮绑定      .bindToVoiceButton(emotionVoice)      //显示“按下说话，放开发送”的textview绑定      .bindToVoiceText(voiceText)      .build();

  之所以没有自定义view做，是为了将布局样式交给开发者自己定义，EmotionInputDetector只起到了一个管理工具类的作用。

Paste_Image.png

输入框下面这部分是一个不可左右滑动的viewpager，表情、相册等都是一个fragment。如果你想扩展其它功能时只需要在EmotionInputDetector的viewpager里面加一个fragment即可，其它逻辑操作全在你这个fragment里面。

• 表情功能简介
  表情主要在ChatEmotionFragment里面，里面嵌套了一个viewpager，viewpager的每一页是一个GridView，每一页的GridView的最后一个item是一个删除按钮。具体可以看demo。
  再说说表情的加载EmotionUtils，表情加载类,可自己添加多种表情，分别建立不同的map存放和不同的标志符即可

  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);

  这是放在本地的图片，对于在线表情。你只需要将你的imageurl和标识符一一对应即可。然后通过你的标识符取对应的imageurl。
• 语音功能简介
  录音主要通过AudioRecoderUtils这个工具类，播放通过MediaManager。具体代码就不上了。
  录音事件

  mVoiceText.setOnTouchListener(new View.OnTouchListener() {  @Override  public boolean onTouch(View v, MotionEvent event) {      // 获得x轴坐标      int x = (int) event.getX();      // 获得y轴坐标      int y = (int) event.getY();      switch (event.getAction()) {          case MotionEvent.ACTION_DOWN:              mVoicePop.showAtLocation(v, Gravity.CENTER, 0, 0);              mVoiceText.setText("松开结束");              mPopVoiceText.setText("手指上滑，取消发送");              mVoiceText.setTag("1");              mAudioRecoderUtils.startRecord(mActivity);              break;          case MotionEvent.ACTION_MOVE:              if (wantToCancle(x, y)) {                  mVoiceText.setText("松开结束");                  mPopVoiceText.setText("松开手指，取消发送");                  mVoiceText.setTag("2");              } else {                  mVoiceText.setText("松开结束");                  mPopVoiceText.setText("手指上滑，取消发送");                  mVoiceText.setTag("1");              }              break;          case MotionEvent.ACTION_UP:              mVoicePop.dismiss();              if (mVoiceText.getTag().equals("2")) {                  //取消录音（删除录音文件）                  mAudioRecoderUtils.cancelRecord();              } else {                  //结束录音（保存录音文件）                  mAudioRecoderUtils.stopRecord();              }              mVoiceText.setText("按住说话");              mVoiceText.setTag("3");              mVoiceText.setVisibility(View.GONE);              mEditText.setVisibility(View.VISIBLE);              break;      }      return true;  }});

  录音话筒动画主要是通过mImageView.getDrawable().setLevel()进行一个上下波动的效果展示
• 聊天气泡自定义
  聊天气泡没有用.9图片，因为.9图片背景，不能满足图片气泡功能。所以笔者采用的是自定义view：BubbleDrawable、BubbleImageView、BubbleLinearLayout。如此也可以满足用户自定义气泡的需求。本文没有做这个功能，有需求可以根据以上三个自定义view自己加。

  三方开源框架

  为尊重开源作者，再次将所用的三方开源框架一一罗列：
  EasyRecyclerView——支持下拉上拉刷新等功能全面的RecyclerView
  butterknife——View注解库和配套插件android-butterknife-zelezny
  EventBus——事件总线
  Glide——图片加载
  BubbleView——聊天气泡自定义view
  StateButton——一个可以用代码设置selector背景（按下去背景颜色更改，样式变化等等）的button, 再也不用写selector了

  写到最后

  如果觉得本文对你有帮助，感谢给个star
  github地址：https://github.com/Rance935/ChatUI
  
  
  

本文作者：Rance935本文出处：android IM即时通信之聊天界面UI框架转载请在开头注明作者详细信息和本文出处
欢迎关注我的微信公众号和QQ群，分享Android 开发和互联网内容
Android技术分享：群号534813930
微信号：androidparks
公众号：AndroidParks

    </div>