openfire+smack聊天气泡效果ListView完成收发消息
收发消息之前完成了，下面就是整理一下界面了，先附上效果图：
一、实现聊天的收发消息，前一篇已经介绍了，进入正题，实现这个界面，主要思路如下：
1、主界面chatactivity.xml,在里面添加ListView用于显示聊天的内容，其他控件都摆好各自的位置。
2、定义ListView的item布局，分别，是我发送的消息布局i_sendmsg_item.xml和好友发送的布局friend_sendmsg_item。
3、获得ListView实例，编写自定义的适配器类MyAdapter。
二、具体代码实现
1、主界面chatactivity.xml,使用自定义标题栏，加入ListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f0f0f0"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/tab1_title"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:background="#222222"
android:orientation="horizontal"
>
<Button
android:id="@+id/btn_msg"
android:layout_width="60dp"
android:layout_height="36dp"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:textColor="#FFF"
android:text="消息(0)"
android:textSize="7pt"
android:background="#222222"/>
<TextView
android:id="@+id/text_title"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:text="聊天好友名"
android:textColor="#FFF"
android:background="#222222"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
/>
<Button
android:id="@+id/btn_friend"
android:layout_width="60dp"
android:layout_height="36dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_vertical"
android:textColor="#FFF"
android:background="#222222"
android:text="0.0"/>
</LinearLayout>
<ListView
android:id="@+id/listview_chat"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_below="@id/tab1_title"
android:background="#f0f0f0"
android:divider="#aaaaaa"
android:dividerHeight="0px"
></ListView>
<LinearLayout
android:id="@+id/tab1_messgage"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:background="@drawable/linearlayout_boder"
>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:background="@drawable/id"/>
<EditText
android:id="@+id/edit_chat"
android:layout_width="220dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:inputType="text"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:background="@drawable/action_add"/>
<ImageView
android:id="@+id/img_send"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:background="@drawable/send"/>
</LinearLayout>
</RelativeLayout>
2、我发送的消息布局文件
i_sendmsg_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="50dp"
android:paddingRight="8dp"
android:paddingTop="10dp"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/img_me"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_alignParentRight="true"
/>
<TextView
android:id="@+id/text_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:textSize="18sp"
android:textStyle="bold"
android:layout_toLeftOf="@id/img_me"
android:background="@drawable/ichatbg"
/>
</RelativeLayout>
3、好友发送消息的布局文件
friend_sendmsg_item
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="50dp"
android:paddingTop="10dp"
android:paddingBottom="10dp" >
<ImageView
android:id="@+id/img_friend"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="5dp"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="@+id/text_friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:textSize="18sp"
android:textStyle="bold"
android:layout_toRightOf="@id/img_friend"
android:background="@drawable/friendchatbg"
/>
</RelativeLayout>
4、主界面ChatActivity.java，包括收发消息线程类，自定义Adapter适配器类等
package com.example.eric_jqm_chat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import org.jivesoftware.smack.Chat;
import org.jivesoftware.smack.ChatManagerListener;
import org.jivesoftware.smack.MessageListener;
import org.jivesoftware.smack.XMPPConnection;
import org.jivesoftware.smack.XMPPException;
import org.jivesoftware.smack.packet.Message;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
/*
*@author Eric
*@create date 2015-8-25下午8:51:17
*/
public class ChatActivity extends Activity {
private TextView text_chat,text_title;
private EditText edit_chat;
private ImageView img_send;
private XMPPConnection con = new ConnectServer().ConnectServer();
private String str_text,name,password,friend,sendMsg;
private ChatHandler handler;
private SimpleDateFormat sf = new SimpleDateFormat("HH:mm");
private ArrayList<HashMap<String, Object>> chatList = new ArrayList<HashMap<String,Object>>();
String[] from = {"img","text"};//键名称数组
int[] to = {R.id.img_me,R.id.text_me,R.id.img_friend,R.id.text_friend};//赋值数据的控件id数组
int[] item_layout = {R.layout.i_sendmsg_item,R.layout.friend_sendmsg_item};//布局文件数组
private ListView listview_chat;
private MyAdapter myAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//不使用自带标题栏
setContentView(R.layout.chat);
img_send = (ImageView) findViewById(R.id.img_send);
edit_chat = (EditText) findViewById(R.id.edit_chat);
listview_chat = (ListView) findViewById(R.id.listview_chat);
text_title = (TextView) findViewById(R.id.text_title);
myAdapter = new MyAdapter(this, chatList, item_layout, from, to);
img_send.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
sendMsg = edit_chat.getText().toString();
Chat chat = con.getChatManager().createChat(friend+"@"+"eric-pc", null);
try {
chat.sendMessage(sendMsg);
} catch (XMPPException e) {
e.printStackTrace();
}
edit_chat.setText(null);
addChatToListview(0, sendMsg);//将发送的消息添加到chatList中
}
});
name = getIntent().getStringExtra("name");
password = getIntent().getStringExtra("password");
try {
con.login(name, password);
} catch (XMPPException e) {
e.printStackTrace();
}
Thread thread = new Thread(new Runnable(){
@Override
public void run() {
//接收用户发来的消息
con.getChatManager().addChatListener(new ChatManagerListener() {
@Override
public void chatCreated(Chat chat, boolean arg1) {
chat.addMessageListener(new MessageListener() {
@Override
public void processMessage(Chat chat, Message msg) {
//裁剪好友jid获得好友用户名
friend = msg.getFrom();
friend = friend.substring(0, friend.indexOf("@"));
android.os.Message m = new android.os.Message();
if(msg.getBody()!= null){
Bundle b= new Bundle();
b.putString("msg", msg.getBody());
b.putString("friend", friend);
m.setData(b);
handler.sendMessage(m);
}
}
});
}
});
}
});
thread.start();
handler = new ChatHandler();
}
public class ChatHandler extends Handler{
@Override
public void handleMessage(android.os.Message msg) {
super.handleMessage(msg);
Bundle b = msg.getData();
String ChatHandler = b.getString("msg");
String friend = b.getString("friend");
text_title.setText(friend);//修改标题栏好友名称
addChatToListview(1, ChatHandler);//添加接收到的消息到chatList
listview_chat.setAdapter(myAdapter);
}
}
//将数据添加到chatList的函数实现
public void addChatToListview(int who,String chat){
HashMap<String,Object> map = new HashMap<String,Object>();
map.put("who", who);//通过who来决定chatList中项的布局，0为我发送的，1为好友发来的
map.put("chat", chat);
chatList.add(map);
}
//自定义适配器类
public class MyAdapter extends BaseAdapter{
Context context;
ArrayList<HashMap<String,Object>> chatList= null;
int[] layout;
String[] from;
int[] to;
LayoutInflater listcontainer;
//数据同步构造函数
public MyAdapter(Context context,
ArrayList<HashMap<String, Object>> chatList, int[] layout,
String[] from, int[] to){
super();
this.context = context;
listcontainer = LayoutInflater.from(context);
this.chatList = chatList;
this.layout = layout;
this.from = from;
this.to = to;
}
@Override
public int getCount() {
return chatList.size();
}
@Override
public Object getItem(int arg0) {
return null;
}
@Override
public long getItemId(int ItemId) {
return ItemId;
}
@Override
public View getView(int item, View view, ViewGroup parent) {
//获取当前子项的who和chat
int who = (Integer)chatList.get(item).get("who");
String msg = (String)chatList.get(item).get("chat");
//根据who设置当前子项的布局和文本，0为自己发送的布局，1为好友发送的布局
if(who==0){
view=listcontainer.inflate(R.layout.i_sendmsg_item, null);
((TextView)view.findViewById(R.id.text_me)).setText(msg);
((ImageView)view.findViewById(R.id.img_me)).setImageDrawable(img_userDrawable);
return view;
}else{
view=listcontainer.inflate(R.layout.friend_sendmsg_item, null);
((TextView)view.findViewById(R.id.text_friend)).setText(msg);
((ImageView)view.findViewById(R.id.img_friend)).setImageDrawable(img_friendDrawable);
return view;
}
}
}
注意：前面i_sendmsg_item和friend_sendmsg_item，TextView使用到的背景图片最好使用.9.png格式的图片，可以自适应文本内容不失真。