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

评论

  • contractions回复

    Hello, i think that i saw you visited my blog so i came to “return the favor”.I'm trying to find things to improve my web site!I suppose its ok to use a few of your ideas!!

  • all games回复

    It's perfect time to make some plans for the future and it's time to be happy. I've read this post and if I could I wish to suggest you few interesting things or advice. Perhaps you can write next articles referring to this article. I want to read even more things about it!

  • soulmate回复

    I've been surfing on-line more than three hours nowadays, yet I by no means discovered any interesting article like yours. It¡¦s lovely value sufficient for me. In my opinion, if all web owners and bloggers made just right content as you did, the web will likely be a lot more useful than ever before.

  • public health回复

    Hello, i think that i saw you visited my web site so i came to “return the favor”.I'm attempting to find things to improve my site!I suppose its ok to use a few of your ideas!!

  • date回复

    Normally I do not learn post on blogs, but I would like to say that this write-up very forced me to take a look at and do so! Your writing style has been amazed me. Thank you, very great article.

  • dessert recipes回复

    Wow, superb weblog structure! How long have you been blogging for? you make blogging look easy. The overall look of your website is great, let alone the content material!

  • public health回复

    Good write-up, I¡¦m normal visitor of one¡¦s site, maintain up the nice operate, and It is going to be a regular visitor for a long time.

  • cool tech gadgets回复

    magnificent points altogether, you just received a logo new reader. What would you recommend about your submit that you simply made a few days in the past? Any sure?