转-Android仿微信气泡聊天界面设计

微信的气泡聊天是仿iPhone自带短信而设计出来的，不过感觉还不错可以尝试一下仿着微信的气泡聊天做一个Demo，给大家分享一下！效果图如下：

气泡聊天最终要的是素材，要用到9.png文件的素材，这样气泡会随着聊天内容的多少而改变气泡的大小且不失真。为了方便，我就直接在微信里面提取出来啦。

聊天的内容是用ListView来显示的，将聊天的内容封装成一个ChatMsgEntity类的对象里面，然后交给自定义的ListView适配器将聊天内容显示出来。

ChatMsgEntity.java比较简单，只是聊天的内容存储、设置和获取。

package com.example.school;

public class ChatMsgEntity {
    private static final String TAG = ChatMsgEntity.class.getSimpleName();
    //名字
    private String name;
    //日期
    private String date;
    //聊天内容
    private String text;
    //是否为对方发来的信息
    private boolean isComMeg = true;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public boolean getMsgType() {
        return isComMeg;
    }

    public void setMsgType(boolean isComMsg) {
        isComMeg = isComMsg;
    }

    public ChatMsgEntity() {
    }

    public ChatMsgEntity(String name, String date, String text, boolean isComMsg) {
        this.name = name;
        this.date = date;
        this.text = text;
        this.isComMeg = isComMsg;
    }
}

显示ListView的适配器ChatMsgViewAdpater.java:

package com.example.school;

import android.R.integer;
import android.content.Context;
import android.database.DataSetObserver;

import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.view.ViewGroup;

import android.widget.BaseAdapter;
import android.widget.CheckBox;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class ChatMsgViewAdapter extends BaseAdapter {

    //ListView视图的内容由IMsgViewType决定
    public static interface IMsgViewType
    {
        //对方发来的信息
        int IMVT_COM_MSG = 0;
        //自己发出的信息
        int IMVT_TO_MSG = 1;
    }

    private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();
    private List<ChatMsgEntity> data;
    private Context context;
    private LayoutInflater mInflater;

    public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> data) {
        this.context = context;
        this.data = data;
        mInflater = LayoutInflater.from(context);
    }

    //获取ListView的项个数
    public int getCount() {
        return data.size();
    }

    //获取项
    public Object getItem(int position) {
        return data.get(position);
    }

    //获取项的ID
    public long getItemId(int position) {
        return position;
    }

    //获取项的类型
    public int getItemViewType(int position) {
        // TODO Auto-generated method stub
         ChatMsgEntity entity = data.get(position);

         if (entity.getMsgType())
         {
             return IMsgViewType.IMVT_COM_MSG;
         }else{
             return IMsgViewType.IMVT_TO_MSG;
         }

    }

    //获取项的类型数
    public int getViewTypeCount() {
        // TODO Auto-generated method stub
        return 2;
    }

    //获取View
    public View getView(int position, View convertView, ViewGroup parent) {

        ChatMsgEntity entity = data.get(position);
        boolean isComMsg = entity.getMsgType();

        ViewHolder viewHolder = null;
        if (convertView == null)
        {
              if (isComMsg)
              {
                  //如果是对方发来的消息，则显示的是左气泡
                  convertView = mInflater.inflate(R.layout.chatting_item_msg_text_left, null);
              }else{
                  //如果是自己发出的消息，则显示的是右气泡
                  convertView = mInflater.inflate(R.layout.chatting_item_msg_text_right, null);
              }

              viewHolder = new ViewHolder();
              viewHolder.tvSendTime = (TextView) convertView.findViewById(R.id.tv_sendtime);
              viewHolder.tvUserName = (TextView) convertView.findViewById(R.id.tv_username);
              viewHolder.tvContent = (TextView) convertView.findViewById(R.id.tv_chatcontent);
              viewHolder.isComMsg = isComMsg;

              convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.tvSendTime.setText(entity.getDate());
        viewHolder.tvUserName.setText(entity.getName());
        viewHolder.tvContent.setText(entity.getText());

        return convertView;
    }

    //通过ViewHolder显示项的内容
    static class ViewHolder {
        public TextView tvSendTime;
        public TextView tvUserName;
        public TextView tvContent;
        public boolean isComMsg = true;
    }

}

对方发来消息的显示布局chatting_item_msg_text_left.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="6dp">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center_horizontal">
            <TextView
                android:id="@+id/tv_sendtime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                   style="@style/chat_text_date_style"/>
        </LinearLayout>
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp" >
                 <ImageView
                   android:id="@+id/iv_userhead"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:focusable="false"
                   android:layout_alignParentLeft="true"
                   android:layout_alignParentTop="true"
                   android:background="@drawable/mini_avatar_shadow"/>
                 <TextView
                android:id="@+id/tv_chatcontent"
                android:layout_toRightOf="@id/iv_userhead"
                android:layout_marginLeft="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/chatfrom_bg"
                  style="@style/chat_content_date_style"/>
                <TextView
                android:id="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/iv_userhead"
                android:layout_alignParentLeft="true"
                android:layout_toLeftOf="@id/tv_chatcontent"
                style="@style/chat_text_name_style"/>
        </RelativeLayout>
</LinearLayout>

chatting_item_msg_text_right.xml和上面差不多，只是气泡和头像的方向在右边，就不贴代码了。

主界面的布局chat.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#f0f0e0" >
    <RelativeLayout
        android:id="@+id/rl_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/title" >
        <Button
            android:id="@+id/btn_back"
            android:gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:paddingLeft="18dp"
            android:textSize="18.0sp"
            android:textColor="#ffffff"
            android:background="@drawable/selector_btn_back"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:text="@string/back" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/school_title_name"
            android:layout_centerInParent="true"
            style="@style/my_txt"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/campus_info"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"/>
        </RelativeLayout>
    <RelativeLayout
        android:id="@+id/rl_bottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/layout_bg1" >
        <Button
            android:id="@+id/btn_send"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"
            android:text="@string/send" />
        <EditText
            android:id="@+id/et_sendmessage"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_toLeftOf="@id/btn_send"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/edittext1"
            android:layout_centerVertical="true"
            android:singleLine="true"
            android:textSize="18sp"/>
    </RelativeLayout>
    <ListView
        android:id="@+id/listview"
        android:layout_below="@id/rl_layout"
        android:layout_above="@id/rl_bottom"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="10.0dip"
        android:layout_marginTop="10.0dip"
        android:layout_marginRight="10.0dip"
        android:divider="@null"
        android:dividerHeight="5dp"
        android:scrollbars="none"
        android:cacheColorHint="#00000000"/>
</RelativeLayout>

ChatActivity.java

package com.example.chat;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import com.example.school.R;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;

public class ChatActivity extends Activity implements OnClickListener {
    private Button mBtnSend;
    private Button mBtnBack;
    private EditText mEditTextContent;
    //聊天内容的适配器
    private ChatMsgViewAdapter mAdapter;
    private ListView mListView;
    //聊天的内容
    private List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏
        setContentView(R.layout.chat);
        initView();
        initData();
    }

    //初始化视图
    private void initView() {
        mListView = (ListView) findViewById(R.id.listview);
        mBtnBack = (Button) findViewById(R.id.btn_back);
        mBtnBack.setOnClickListener(this);
        mBtnSend = (Button) findViewById(R.id.btn_send);
        mBtnSend.setOnClickListener(this);
        mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);
    }

    private String[] msgArray = new String[]{"  孩子们，要好好学习，天天向上！要好好听课，不要翘课！不要挂科，多拿奖学金！三等奖学金的争取拿二等，二等的争取拿一等，一等的争取拿励志！",
            "姚妈妈还有什么吩咐...",
            "还有，明天早上记得跑操啊，不来的就扣德育分！",
            "德育分是什么？扣了会怎么样？",
            "德育分会影响奖学金评比，严重的话，会影响毕业",
            "哇！学院那么不人道？",
            "你要是你不听话，我当场让你不能毕业！",
            "姚妈妈，我知错了(- -我错在哪了...)"};

    private String[]dataArray = new String[]{"2012-09-01 18:00", "2012-09-01 18:10",
            "2012-09-01 18:11", "2012-09-01 18:20",
            "2012-09-01 18:30", "2012-09-01 18:35",
            "2012-09-01 18:40", "2012-09-01 18:50"};
    private final static int COUNT = 8;

    //初始化要显示的数据
    private void initData() {
        for(int i = 0; i < COUNT; i++) {
            ChatMsgEntity entity = new ChatMsgEntity();
            entity.setDate(dataArray[i]);
            if (i % 2 == 0)
            {
                entity.setName("姚妈妈");
                entity.setMsgType(true);
            }else{
                entity.setName("Shamoo");
                entity.setMsgType(false);
            }

            entity.setText(msgArray[i]);
            mDataArrays.add(entity);
        }
        mAdapter = new ChatMsgViewAdapter(this, mDataArrays);
        mListView.setAdapter(mAdapter);
    }

    public void onClick(View view) {
        // TODO Auto-generated method stub
        switch(view.getId()) {
        case R.id.btn_back:
            back();
            break;
        case R.id.btn_send:
            send();
            break;
        }
    }

    private void send()
    {
        String contString = mEditTextContent.getText().toString();
        if (contString.length() > 0)
        {
            ChatMsgEntity entity = new ChatMsgEntity();
            entity.setDate(getDate());
            entity.setName("");
            entity.setMsgType(false);
            entity.setText(contString);
            mDataArrays.add(entity);
            mAdapter.notifyDataSetChanged();
            mEditTextContent.setText("");
            mListView.setSelection(mListView.getCount() - 1);
        }
    }

    //获取日期
    private String getDate() {
        Calendar c = Calendar.getInstance();
        String year = String.valueOf(c.get(Calendar.YEAR));
        String month = String.valueOf(c.get(Calendar.MONTH));
        String day = String.valueOf(c.get(Calendar.DAY_OF_MONTH) + 1);
        String hour = String.valueOf(c.get(Calendar.HOUR_OF_DAY));
        String mins = String.valueOf(c.get(Calendar.MINUTE));
        StringBuffer sbBuffer = new StringBuffer();
        sbBuffer.append(year + "-" + month + "-" + day + " " + hour + ":" + mins);
        return sbBuffer.toString();
    }
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        back();
        return true;
    }

    private void back() {
        finish();
    }
}

谢谢大家的支持！链接：点击打开链接

需要一分资源分，大家评论一下那一分就还回来了，哈哈~~

转自http://blog.csdn.net/pocoyoshamoo/article/details/9674385

时间： 2024-12-15 01:51:40

转-Android仿微信气泡聊天界面设计的相关文章

Android仿微信语音聊天界面

有段时间没有看视频了,昨天晚上抽了点空时间,又看了下鸿洋大神的视频教程,又抽时间写了个学习记录.代码和老师讲的基本一样,网上也有很多相同的博客.我只是在AndroidStudio环境下写的. --主界面代码-- public class MainActivity extends Activity { private ListView mListView; private ArrayAdapter<Recorder> mAdapter; private List<Recorder>

android 仿QQ气泡聊天界面

1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效果图(其中的聊天信息框是采用了.9.png的图片): 3.对中间聊天的的listView进行说明: 左边Item的xml文件效果如下: 右边Item的xml文件效果如下: 4.在加载ListView当中重写getView()方法,通过判断消息传入类型,来使item加载哪一个xml文件: 自定义ada

Android 仿微信QQ聊天界面

一些IM聊天软件的展现形式是左右分开的形式.比如说,别人给你发的信息全部靠左显示,你自己发给别人的信息全部靠右显示. 而我们的ListView很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),显示ListView中有多少种布局(默认是显示是1),像微信那样聊天界面,是有2种布局方式:另外一个getItemViewType(),可以让不同item条目加载不同的布局,下面就简单的模拟下

Android仿微信语音聊天

完整代码下载地址: Android仿微信语音聊天 效果图: 分析: 1.自定义Button中要复写onTouchEvent的DOWN,MOVE,UP三种状态,对正常按下,想要取消发送,抬起三种动作进行侦听处理. 2.Dialog共有三种状态,除上图所示的两种外,还有一个录音时间过短的提示.其中录音状态中的音量可以变化. 3.显示录音的ListView的item中有一个录音时长(TextView),一个播放动画(View)和一个头像(ImageView). 4.录音类里有两个成员:录音长度,录音路

Android仿微信SlideView聊天列表滑动删除效果

package com.ryg.slideview; import com.ryg.slideview.MainActivity.MessageItem; //Download by http://www.okbase.net import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import andro

android 仿微信聊天界面

一些IM聊天软件我们发现,他的展现形式,是左右分开的形式,而我们的listview很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),它是显示listview中有多少种布局,默认是显示是1,像微信那样聊天界面,是有2种布局方式,:另外一个getItemViewType(),它是在那些item条目中显示那种布局,下面就简单的模拟下微信的聊天界面做法: MainActivity.java

基于百度云推送的高仿微信实时聊天Android源码

基于百度云推送的高仿微信实时聊天Android源码 使用服务:百度云推送    功能分类:社交     支持平台:Android 运行环境:Android       开发语言:Java     开发工具:Eclipse 下载地址:http://sina.lt/z84 源码简介 基于百度云推送的一款Android高仿微信的实时聊天app 运行动态图

【Android 仿微信通讯录 导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表

[Android 仿微信通讯录 导航分组列表-上]使用ItemDecoration为RecyclerView打造带悬停头部的分组列表 一 概述 本文是Android导航分组列表系列上,因时间和篇幅原因分上下,最终上下合璧,完整版效果如下: 上部残卷效果如下:两个ItemDecoration,一个实现悬停头部分组列表功能,一个实现分割线(官方demo) 网上关于实现带悬停分组头部的列表的方法有很多,像我看过有主席的自定义ExpandListView实现的,也看过有人用一个额外的父布局里面套 Rec

Android仿微信UI布局视图（圆角布局的实现）

圆角按钮,或布局可以在xml文件中实现,但也可以使用图片直接达到所需的效果,以前版本的微信就使用了这种方法. 实现效果图:    不得不说,这种做法还是比较方便的. 源代码: MainActivity(没写任何代码,效果全在布局文件中实现): package com.android_settings; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity