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

转载 2017年10月11日 17:19:42



转载 http://rance935.com/blog/?p=51


写在最前面

现在很多软件都要求加入即时通信的功能,当然很多都用了三方(环信、融信。。。)。最近,项目也有此需求,我们选择的是环信。环信也提供了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


即时通讯三大框架

Android推送方案分析(MQTT/XMPP/GCM) 蜗牛TT 发布于 4个月前,共有 11 条评论 本文主旨在于,对目前Android平台上最主流的几种消息推送方案进行分析和对比,比较客观地...
  • Andy_LTZ
  • Andy_LTZ
  • 2016年01月14日 21:39
  • 1597

百万级即时通讯系统服务器框架

1概述 引用一段网上的描述:“InstantMessaging(即时通讯、实时传讯)的缩写是IM,这是一种可以让使用者在网络上建立某种私人聊天室(chatroom)的实时通讯服务。目前在互联网上受欢...
  • educast
  • educast
  • 2013年10月19日 11:44
  • 10271

新手入门:史上最全Web端即时通讯技术原理详解

前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ)、消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为...
  • benhuo931115
  • benhuo931115
  • 2016年09月22日 22:13
  • 7618

服务器端编程心得(七)——开源一款即时通讯软件的源码

在我的《服务器端编程心得》这个系列的第一篇至第六篇都是讲了一些零散的不成体系的网络编程细节。今天,在这篇文章中,我将介绍一款我自主开发的即时通讯软件flamingo(中文:火烈鸟),并开源其服务器和p...
  • analogous_love
  • analogous_love
  • 2017年04月06日 22:57
  • 6503

Flex与Netty实现的WEB版IM(即时聊天)

Apache Flex是基于MXML和ActionScript的Flash程序设计框架,可以快速开发RIA(富Internet应用)程序,Netty是JAVA实现的高性能的网络通信框架,可以快速构建网...
  • zhaowen25
  • zhaowen25
  • 2014年11月27日 20:07
  • 5733

即时通讯实现思路

Soctet 1. socket 又称"套接字" 2. 网络上两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个 socket 3. 应用程序通常通过“套接字”向网络发出请求或者应答...
  • qq_35247219
  • qq_35247219
  • 2016年07月30日 08:25
  • 12728

java聊天源码 java后台框架源码 websocket源码 IM

1. 模块化、服务化,流程化,耦合度低、扩展性好,灵活度高,工具类封装完整,干净利索,调用简单方便 2. 提供Rest服务,支持APP手机应用(android和ios)接口、php、.net、易语...
  • tyuiopqw8080
  • tyuiopqw8080
  • 2016年03月04日 11:23
  • 3520

【Android即时通讯】Android 高仿微信的即时聊天DEMO

很久没写博客,在此写一篇高仿微信的即时聊天的DEMO,大家一起学习下。 这里微信界面仿照的是微信5.2版本,个人偏爱这版,并且网上也有较多的高仿界面可以学习,本人以极光IM做辅助,实现了即时聊天。 ...
  • u011669081
  • u011669081
  • 2015年11月27日 12:05
  • 7670

Android中即时通讯协议选择

Android中的即时通讯,就是客户端要与服务器建立长时间的连接,正常情况下Android中请求服务器数据后,连接一般断开。但即时通讯类的对消息的实时性要求比较高。需要客户端与服务器建立长时间的连接,...
  • androidxiaogang
  • androidxiaogang
  • 2016年05月08日 18:57
  • 5427

【JavaWeb】关于WebSocket的IM在线聊天技术(一)

最近在弄IM的在线聊天,发现layim又停摆了,所以下决心看看以前学的socket技术,这次的想法是不用swing,使用javaweb的jsp实现在线聊天。 我计划的大致实现步骤分这样几大步: 1...
  • hj7jay
  • hj7jay
  • 2016年05月19日 10:13
  • 10339
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android IM即时通信之聊天界面UI框架
举报原因:
原因补充:

(最多只允许输入30个字)