Android仿QQ聊天界面及发送动态表情例子_安卓实现QQ聊天对话界面效果
2014-09-29 17:02:29  By: dwtedx

QQ的聊天界面相信大家都不陌生吧、最近就在想、实现这一功能难不难、代码量有多大

有了这个想法就试着做了一下、特此和分享出来、希望对大家有帮助

好了、话不多说、先来看一下程序的运行效果吧

还是比较像吧、有表情输入的哦

初始化代码如下initStaticFaces方法

private void initStaticFaces() {
    try {
        staticFacesList = new ArrayList<String>();
        String[] faces = getAssets().list("face/png");
        //将Assets中的表情名称转为字符串一一添加进staticFacesList
        for (int i = 0; i < faces.length; i++) {
            staticFacesList.add(faces[i]);
        }
        //去掉删除图片
        staticFacesList.remove("emotion_del_normal.png");
    } catch (Exception e) {
        e.printStackTrace();
    }
}
初始化代码如下initViews方法

private void initViews() {
    mListView = (DropdownListView) findViewById(R.id.message_chat_listview);
    sd=new SimpleDateFormat("MM-dd HH:mm");
    //模拟收到信息
    infos.add(getChatInfoFrom("你好啊!"));
    infos.add(getChatInfoFrom("认识你很高兴#[face/png/f_static_018.png]#"));
    mLvAdapter = new ChatLVAdapter(this, infos);
    mListView.setAdapter(mLvAdapter);
    //表情图标
    image_face=(ImageView) findViewById(R.id.image_face);
    //表情布局
    chat_face_container=(LinearLayout) findViewById(R.id.chat_face_container);
    mViewPager = (ViewPager) findViewById(R.id.face_viewpager);
    mViewPager.setOnPageChangeListener(new PageChange());
    //表情下小圆点
    mDotsLayout = (LinearLayout) findViewById(R.id.face_dots_container);
    input = (MyEditText) findViewById(R.id.input_sms);
    input.setOnClickListener(this);
    send = (Button) findViewById(R.id.send_sms);
    InitViewPager();
    //表情按钮
    image_face.setOnClickListener(this);
    // 发送
    send.setOnClickListener(this);
    
    mListView.setOnRefreshListenerHead(this);
    mListView.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {
            if(arg1.getAction()==MotionEvent.ACTION_DOWN){
                if(chat_face_container.getVisibility()==View.VISIBLE){
                    chat_face_container.setVisibility(View.GONE);
                }
            }
            return false;
        }
    });
}
然后是向聊天区域添加和删除聊天记录

/**
 * 向输入框里添加表情
 * */
private void insert(CharSequence text) {
    int iCursorStart = Selection.getSelectionStart((input.getText()));
    int iCursorEnd = Selection.getSelectionEnd((input.getText()));
    if (iCursorStart != iCursorEnd) {
        ((Editable) input.getText()).replace(iCursorStart, iCursorEnd, "");
    }
    int iCursor = Selection.getSelectionEnd((input.getText()));
    ((Editable) input.getText()).insert(iCursor, text);
}

/**
 * 删除图标执行事件
 * 注:如果删除的是表情,在删除时实际删除的是tempText即图片占位的字符串
 * 所以必需一次性删除掉tempText,才能将图片删除
 * */
private void delete() {
    if (input.getText().length() != 0) {
        int iCursorEnd = Selection.getSelectionEnd(input.getText());
        int iCursorStart = Selection.getSelectionStart(input.getText());
        if (iCursorEnd > 0) {
            if (iCursorEnd == iCursorStart) {
                if (isDeletePng(iCursorEnd)) {
                    String st = "#[face/png/f_static_000.png]#";
                    ((Editable) input.getText()).delete(
                            iCursorEnd - st.length(), iCursorEnd);
                } else {
                    ((Editable) input.getText()).delete(iCursorEnd - 1,
                            iCursorEnd);
                }
            } else {
                ((Editable) input.getText()).delete(iCursorStart,
                        iCursorEnd);
            }
        }
    }
}

/**
 * 判断即将删除的字符串是否是图片占位字符串tempText 
 * 如果是:则讲删除整个tempText
 * **/
private boolean isDeletePng(int cursor) {
    String st = "#[face/png/f_static_000.png]#";
    String content = input.getText().toString().substring(0, cursor);
    if (content.length() >= st.length()) {
        String checkStr = content.substring(content.length() - st.length(),
                content.length());
        String regex = "(\#\[face/png/f_static_)\d{3}(.png\]\#)";
        Pattern p = Pattern.compile(regex);
        Matcher m = p.matcher(checkStr);
        return m.matches();
    }
    return false;
}
具体的代码大家可以在源代码里面下载到哈、这里就不过多贴出来了

若资源对你有帮助、扫描下方的二维码、关注DD博客微信公众号(ddblogs)吧

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1pJ88BdL 密码: dpfu

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

    • 走马 2016-10-28 10:55:47  4 评  | 回复

      博主,我发现有多条动态表情消息的时候,多次上下滑动会报OOM。


    • dwtedx 2016-03-06 20:17:31  3 评  | 回复

      @肖:本Demo里面应该也是可以左右滑动的哦、如果要做的话、需要自己加一个横向的scrollview应该就好了哦


    • 2016-03-04 16:48:51  2 评  | 回复

      如何实现微信聊天界面底部表情左右滑动啊


DD记账
top
+