安卓开发-最简单快速的仿微信聊天实现-附赠微信原生表情，QQ原生表情

前言；正常实现聊天功能想必大家都使用三方的Sdk比如环信融云集成的，但是聊天记录的保存只能有三天，想增加保存时长就需要花钱，so 我只好自己想办法实现了，这个demo是类似于留言板，并非即时通讯！只实现了表情文字图文混排，可以通过手动刷新实现即时通讯ok废话少说，先看效果图；

项目下载地址

https://github.com/PangHaHa12138/TestChatdemo

表情下载地址

http://emojipedia.org/apple/

大体思路：

1.先从布局开始，聊天界面就是多条目的listview，左右各算一种类型，这样正常语音，文字，图文混排，大图片，大表情，视频，都是x2倍的，聊天条目就是listview条目背景透明，然后imageview+给textview设置气泡的聊天背景

不过我现在暂时只实现了文字表情，然后键盘这块是gridview实现，写正则来过滤表情的编码，点击事件判断选中表情还是删除

感谢开源键盘控件：

https://github.com/w446108264/XhsEmoticonsKeyboard

继承XhsEmoticonsKeyboard控件写一个带表情的键盘

2.代码大体逻辑，发送的消息其实就是一个文本内容，通过SpannableStringBuilder和Spannable实现图文混排，其实就是把各种表情序列号也可以说是索引写到一个xml文件里，然后用一个map来存这些图片对应的编码，其实就是图片名字，然后通过正则来找到正确的索引，即xml里存的图片对应文件夹drawable下的

SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(content);

Spannable spannable = QqFilter.spannableFilter(tv_content.getContext(),
        spannableStringBuilder,
        content,
        EmoticonsKeyboardUtils.getFontHeight(tv_content),
        null);
tv_content.setText(spannable);

然后就是listview的展示了，页面初始化的时候根据服务器返回的字段判断是别人发的在左边，还是我发的在右面，然后在adapter里调用图文混排的方法找到对应表情图片填充条目，发送的时候先检查是否是正确的表情字符，找到对应表情图片的集合map，找到对应的表情名字，然后和文字一起传到服务器，然后进行网络请求，上传成功之后再刷新界面，上拉加载的话是加载历史记录全部的，下拉刷新是请求最新的，每次请求都控制页面显示最多28条数据，也就是4页，上来初始化页面也是，然后可以通过聊完上拉不停的重复手动实现即时通讯

当然这是开玩笑了

下面上代码：

主要布局

xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        android:id="@+id/titlefragment"
    android:name="com.panghaha.it.testchatdemo.Titlefragment"
    android:layout_width="match_parent"
    android:layout_height="45dp"/>

    
        
        
        
        
        
            android:id="@+id/content"
        android:layout_above="@+id/bottom_navigation_bar"
        android:layout_below="@+id/titlefragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    


            android:id="@+id/bottom_navigation_bar"
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

主界面，下面四个按钮，切换四个fragment

聊天界面布局 最外层用自己继承

XhsEmoticonsKeyBoard 键盘类

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/keyboard"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


            android:orientation="vertical"
        android:background="@drawable/pic_bg3x"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        
                    android:id="@+id/toobaraaa"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/titbar"
            android:minHeight="?attr/actionBarSize">

                            android:id="@+id/toolbarmtit"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:lines="1"
                android:ellipsize="end"
                android:text="安琪宝贝"
                android:scrollHorizontally="true"
                android:textColor="@color/white"
                android:layout_gravity="center" />
            


        

                    android:id="@+id/uploadmore"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


                            android:id="@+id/lv_chat"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:cacheColorHint="#00000000"
                android:divider="@null"
                android:fadingEdge="none"
                android:fitsSystemWindows="true"
                android:listSelector="#00000000"
                android:scrollbarStyle="outsideOverlay"
                android:scrollingCache="false"
                android:smoothScrollbar="true"
                android:stackFromBottom="true" />
        

    

键盘类

public class SimpleUserdefEmoticonsKeyBoard extends XhsEmoticonsKeyBoard {

    public final int APPS_HEIGHT = 120;

    public SimpleUserdefEmoticonsKeyBoard(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void inflateKeyboardBar(){
        mInflater.inflate(R.layout.view_keyboard_userdef, this);
    }

    @Override
    protected View inflateFunc(){
        return mInflater.inflate(R.layout.view_func_emoticon_userdef, null);
    }

    @Override
    public void reset() {
        EmoticonsKeyboardUtils.closeSoftKeyboard(getContext());
        mLyKvml.hideAllFuncView();
        mBtnFace.setImageResource(R.drawable.chatting_emoticons);
    }

    @Override
    public void onFuncChange(int key) {
        if (FUNC_TYPE_EMOTION == key) {
            mBtnFace.setImageResource(R.drawable.chatting_softkeyboard);
        } else {
            mBtnFace.setImageResource(R.drawable.chatting_emoticons);
        }
        checkVoice();
    }

    @Override
    public void OnSoftClose() {
        super.OnSoftClose();
        if (mLyKvml.getCurrentFuncKey() == FUNC_TYPE_APPPS) {
            setFuncViewHeight(EmoticonsKeyboardUtils.dip2px(getContext(), APPS_HEIGHT));
        }
    }

    @Override
    protected void showText() {
        mEtChat.setVisibility(VISIBLE);
        mBtnFace.setVisibility(VISIBLE);
        mBtnVoice.setVisibility(GONE);
    }

    @Override
    protected void showVoice() {
        mEtChat.setVisibility(GONE);
        mBtnFace.setVisibility(GONE);
        mBtnVoice.setVisibility(VISIBLE);
        reset();
    }

    @Override
    protected void checkVoice() {
        if (mBtnVoice.isShown()) {
            mBtnVoiceOrText.setImageResource(R.drawable.chatting_softkeyboard);
        } else {
            mBtnVoiceOrText.setImageResource(R.drawable.chatting_vodie);
        }
    }

    @Override
    public void onClick(View v) {
        int i = v.getId();
        if (i == com.keyboard.view.R.id.btn_voice_or_text) {
            if (mEtChat.isShown()) {
                mBtnVoiceOrText.setImageResource(R.drawable.chatting_softkeyboard);
                showVoice();
            } else {
                showText();
                mBtnVoiceOrText.setImageResource(R.drawable.chatting_vodie);
                EmoticonsKeyboardUtils.openSoftKeyboard(mEtChat);
            }
        } else if (i == com.keyboard.view.R.id.btn_face) {
            toggleFuncView(FUNC_TYPE_EMOTION);
        } else if (i == com.keyboard.view.R.id.btn_multimedia) {
            toggleFuncView(FUNC_TYPE_APPPS);
            setFuncViewHeight(EmoticonsKeyboardUtils.dip2px(getContext(), APPS_HEIGHT));
        }
    }

表情过滤和定位类

public class QqFilter extends EmoticonFilter {

    public static final int WRAP_DRAWABLE = -1;
    private int emoticonSize = -1;
    public static final Pattern QQ_RANGE = Pattern.compile("\\[[a-zA-Z0-9\\u4e00-\\u9fa5]+\\]");

    public static Matcher getMatcher(CharSequence matchStr) {
        return QQ_RANGE.matcher(matchStr);
    }

    @Override
    public void filter(EditText editText, CharSequence text, int start, int lengthBefore, int lengthAfter) {
        emoticonSize = emoticonSize == -1 ? EmoticonsKeyboardUtils.getFontHeight(editText) : emoticonSize;
        clearSpan(editText.getText(), start, text.toString().length());
        Matcher m = getMatcher(text.toString().substring(start, text.toString().length()));
        if (m != null) {
            while (m.find()) {
                String key = m.group();
                int icon = DefQqEmoticons.sQqEmoticonHashMap.get(key);
                if (icon > 0) {
                    emoticonDisplay(editText.getContext(), editText.getText(), icon, emoticonSize, start + m.start(), start + m.end());
                }
            }
        }
    }

    public static Spannable spannableFilter(Context context, Spannable spannable, CharSequence text, int fontSize, EmojiDisplayListener emojiDisplayListener) {
        Matcher m = getMatcher(text);
        if (m != null) {
            while (m.find()) {
                String key = m.group();
                int icon = DefQqEmoticons.sQqEmoticonHashMap.get(key);
                if (emojiDisplayListener == null) {
                    if (icon > 0) {
                        emoticonDisplay(context, spannable, icon, fontSize, m.start(), m.end());
                    }
                } else {
                    emojiDisplayListener.onEmojiDisplay(context, spannable, "" + icon, fontSize, m.start(), m.end());
                }
            }
        }
        return spannable;
    }

    private void clearSpan(Spannable spannable, int start, int end) {
        if (start == end) {
            return;
        }
        EmoticonSpan[] oldSpans = spannable.getSpans(start, end, EmoticonSpan.class);
        for (int i = 0; i < oldSpans.length; i++) {
            spannable.removeSpan(oldSpans[i]);
        }
    }

    public static void emoticonDisplay(Context context, Spannable spannable, int emoticon, int fontSize, int start, int end) {
        Drawable drawable = getDrawable(context, emoticon);
        if (drawable != null) {
            int itemHeight;
            int itemWidth;
            if (fontSize == WRAP_DRAWABLE) {
                itemHeight = drawable.getIntrinsicHeight();
                itemWidth = drawable.getIntrinsicWidth();
            } else {
                itemHeight = fontSize;
                itemWidth = fontSize;
            }
            drawable.setBounds(0, 0, itemHeight, itemWidth);
            EmoticonSpan imageSpan = new EmoticonSpan(drawable);
            spannable.setSpan(imageSpan, start, end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        }
    }

生成添加各类型表情的工厂

package com.panghaha.it.testchatdemo.common;

import android.content.Context;
import android.text.Editable;
import android.text.Spannable;
import android.text.SpannableStringBuilder;
import android.text.TextUtils;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.TextView;

import com.panghaha.it.testchatdemo.R;
import com.sj.emoji.DefEmoticons;
import com.sj.emoji.EmojiBean;
import com.testemticon.DefXhsEmoticons;

import java.io.IOException;
import java.lang.reflect.Constructor;
import java.util.ArrayList;
import java.util.Collections;

import sj.keyboard.adpater.EmoticonsAdapter;
import sj.keyboard.adpater.PageSetAdapter;
import sj.keyboard.data.EmoticonEntity;
import sj.keyboard.data.EmoticonPageEntity;
import sj.keyboard.data.EmoticonPageSetEntity;
import sj.keyboard.data.PageEntity;
import sj.keyboard.data.PageSetEntity;
import sj.keyboard.interfaces.EmoticonClickListener;
import sj.keyboard.interfaces.EmoticonDisplayListener;
import sj.keyboard.interfaces.PageViewInstantiateListener;
import sj.keyboard.utils.EmoticonsKeyboardUtils;
import sj.keyboard.utils.imageloader.ImageBase;
import sj.keyboard.utils.imageloader.ImageLoader;
import sj.keyboard.widget.EmoticonPageView;
import sj.keyboard.widget.EmoticonsEditText;
import sj.qqkeyboard.DefQqEmoticons;

/**
 *
 * 表情工厂类 加载表情种类
 * */

public class SimpleCommonUtils {

    public static void initEmoticonsEditText(EmoticonsEditText etContent) {
        etContent.addEmoticonFilter(new EmojiFilter());
        etContent.addEmoticonFilter(new XhsFilter());
    }

    public static EmoticonClickListener getCommonEmoticonClickListener(final EditText editText) {
        return new EmoticonClickListener() {
            @Override
            public void onEmoticonClick(Object o, int actionType, boolean isDelBtn) {
                if (isDelBtn) {
                    SimpleCommonUtils.delClick(editText);
                } else {
                    if (o == null) {
                        return;
                    }
                    if (actionType == Constants.EMOTICON_CLICK_TEXT) {
                        String content = null;
                        if (o instanceof EmojiBean) {
                            content = ((EmojiBean) o).emoji;
                        } else if (o instanceof EmoticonEntity) {
                            content = ((EmoticonEntity) o).getContent();
                        }

                        if (TextUtils.isEmpty(content)) {
                            return;
                        }
                        int index = editText.getSelectionStart();
                        Editable editable = editText.getText();
                        editable.insert(index, content);
                    }
                }
            }
        };
    }

    public static PageSetAdapter sCommonPageSetAdapter;

    public static PageSetAdapter getCommonAdapter(Context context, EmoticonClickListener emoticonClickListener) {

        if(sCommonPageSetAdapter != null){
            return sCommonPageSetAdapter;
        }

        PageSetAdapter pageSetAdapter = new PageSetAdapter();
        //原生的笑脸表情
//        addEmojiPageSetEntity(pageSetAdapter, context, emoticonClickListener);
        //QQ笑脸表情
        addQqPageSetEntity(pageSetAdapter, context, emoticonClickListener);

        //龟头表情
//        addXhsPageSetEntity(pageSetAdapter, context, emoticonClickListener);
        //兔斯基
//        addWechatPageSetEntity(pageSetAdapter, context, emoticonClickListener);
        //好好学习表情包
//        addGoodGoodStudyPageSetEntity(pageSetAdapter, context, emoticonClickListener);
        //颜文字
        addKaomojiPageSetEntity(pageSetAdapter, context, emoticonClickListener);

//        addTestPageSetEntity(pageSetAdapter, context);

        return pageSetAdapter;
    }

    /**
     * 插入emoji表情集
     *
     * @param pageSetAdapter
     * @param context
     * @param emoticonClickListener
     */
    public static void addEmojiPageSetEntity(PageSetAdapter pageSetAdapter, Context context, final EmoticonClickListener emoticonClickListener) {
        ArrayList emojiArray = new ArrayList<>();
        Collections.addAll(emojiArray, DefEmoticons.sEmojiArray);
        EmoticonPageSetEntity emojiPageSetEntity
                = new EmoticonPageSetEntity.Builder()
                .setLine(3)
                .setRow(7)
                .setEmoticonList(emojiArray)
                .setIPageViewInstantiateItem(getDefaultEmoticonPageViewInstantiateItem(new EmoticonDisplayListener