openfire+smack聊天气泡效果ListView完成收发消息

最新推荐文章于 2018-01-11 19:02:36 发布

原创最新推荐文章于 2018-01-11 19:02:36 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Android #handler #openfire #smack #listview

Openfire+smack 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的聊天应用界面实现过程，包括主界面布局设计、消息布局定义及自定义Adapter的编写，实现了用户间的即时消息收发功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

收发消息之前完成了，下面就是整理一下界面了，先附上效果图：

一、实现聊天的收发消息，前一篇已经介绍了，进入正题，实现这个界面，主要思路如下：

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格式的图片，可以自适应文本内容不失真。