android 仿QQ气泡聊天界面

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

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

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

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

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

　　　　　　　　

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

自定义adapter代码如下：

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;
    }
    
}

 

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

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);

 

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

核心内容就是上面的.

源码下载：下载