码迷,mamicode.com
首页 > 移动开发 > 详细

android 仿QQ气泡聊天界面

时间:2014-11-27 23:27:45      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:des   android   style   blog   http   io   ar   color   os   

1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息,

这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件。

2.效果图(其中的聊天信息框是采用了.9.png的图片):

bubuko.com,布布扣

3.对中间聊天的的listView进行说明:

左边Item的xml文件效果如下:         右边Item的xml文件效果如下: 

bubuko.com,布布扣        bubuko.com,布布扣

 4.在加载ListView当中重写getView()方法,通过判断消息传入类型,来使item加载哪一个xml文件:

自定义adapter代码如下:

  1 public class ChatMsgViewAdapter extends BaseAdapter {
  2     
  3     //ListView视图的内容由IMsgViewType决定
  4     public static interface IMsgViewType
  5     {
  6         //对方发来的信息
  7         int IMVT_COM_MSG = 0;
  8         //自己发出的信息
  9         int IMVT_TO_MSG = 1;
 10     }
 11     
 12     private static final String TAG = ChatMsgViewAdapter.class.getSimpleName();
 13     private List<ChatMsgEntity> data;
 14     private Context context;  
 15     private LayoutInflater mInflater;
 16 
 17     public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> data) {
 18         this.context = context;
 19         this.data = data;
 20         
 21         mInflater = LayoutInflater.from(context);
 22     }
 23 
 24     //获取ListView的项个数
 25     public int getCount() {
 26         return data.size();
 27     }
 28 
 29     //获取项
 30     public Object getItem(int position) {
 31         return data.get(position);
 32     }
 33 
 34     //获取项的ID
 35     public long getItemId(int position) {
 36         return position;
 37     }
 38 
 39     //获取项的类型
 40     public int getItemViewType(int position) {
 41         // TODO Auto-generated method stub
 42          ChatMsgEntity entity = data.get(position);
 43          
 44          if (entity.getMsgType())
 45          {
 46              return IMsgViewType.IMVT_COM_MSG;
 47          }else{
 48              return IMsgViewType.IMVT_TO_MSG;
 49          }
 50          
 51     }
 52 
 53     //获取项的类型数
 54     public int getViewTypeCount() {
 55         // TODO Auto-generated method stub
 56         return 2;
 57     }
 58     
 59     //获取View
 60     public View getView(int position, View convertView, ViewGroup parent) {
 61         
 62         ChatMsgEntity entity = data.get(position);
 63         boolean isComMsg = entity.getMsgType();
 64             
 65         ViewHolder viewHolder = null;    
 66         if (convertView == null)
 67         {
 68               if (isComMsg)
 69               {
 70                   //如果是对方发来的消息,则显示的是左气泡
 71                   convertView = mInflater.inflate(R.layout.chatting_item_msg_text_left, null);
 72               }else{
 73                   //如果是自己发出的消息,则显示的是右气泡
 74                   convertView = mInflater.inflate(R.layout.chatting_item_msg_text_right, null);
 75               }
 76 
 77               viewHolder = new ViewHolder();
 78               viewHolder.tvSendTime = (TextView) convertView.findViewById(R.id.tv_sendtime);
 79               viewHolder.tvUserName = (TextView) convertView.findViewById(R.id.tv_username);
 80               viewHolder.tvContent = (TextView) convertView.findViewById(R.id.tv_chatcontent);
 81               viewHolder.isComMsg = isComMsg;
 82               
 83               convertView.setTag(viewHolder);
 84         }else{
 85             viewHolder = (ViewHolder) convertView.getTag();
 86         }
 87         viewHolder.tvSendTime.setText(entity.getDate());
 88         viewHolder.tvUserName.setText(entity.getName());
 89         viewHolder.tvContent.setText(entity.getText());
 90         
 91         return convertView;
 92     }
 93     
 94     //通过ViewHolder显示项的内容
 95     static class ViewHolder { 
 96         public TextView tvSendTime;
 97         public TextView tvUserName;
 98         public TextView tvContent;
 99         public boolean isComMsg = true;
100     }
101     
102 }

 

5.在发送或则接收消息要添加更多的Item,如发送后添加item

1 ChatMsgEntity entity = new ChatMsgEntity();
2 entity.setDate(getDate());
3 entity.setName("");
4 entity.setMsgType(false);
5 entity.setText(contString);
6 mDataArrays.add(entity);
7 mAdapter.notifyDataSetChanged();
8 mEditTextContent.setText("");
9 mListView.setSelection(mListView.getCount() - 1);

 

对自定义的adpater引用的数据集的内容进行添加,然后通知adapter内容改变了,让它自己对界面进行修改。

核心内容就是上面的.

源码下载:下载

 

android 仿QQ气泡聊天界面

标签:des   android   style   blog   http   io   ar   color   os   

原文地址:http://www.cnblogs.com/liangstudyhome/p/4127308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!