[Android通信]基于socket的聊天app(五)：收发表情

效果图：

1.点击表情按钮，弹出表情选择的列表，再次点击表情按钮，关闭列表。这个比较简单，就是设置GridView的可见性了。

下面给出界面布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#f0f0e0" >

    <RelativeLayout
        android:id="@+id/rl_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/mmtitle_bg" >

        <Button
            android:id="@+id/btn_back"
            android:layout_width="90dp"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/selector_btn_back"
            android:text="返回"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="聊天中。。。"
            android:textColor="#ffffff"
            android:textSize="20.0sp" />

    </RelativeLayout>

    <ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:scrollbars="none" />
    
    <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_face"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:text="表情" />
        
        <Button
            android:id="@+id/btn_send"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:text="发送" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/btn_send"
            android:layout_toRightOf="@id/btn_face"
            android:background="@drawable/edittext1" />
    </RelativeLayout>
   
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="7"
        android:visibility="gone"
        android:background="@color/grey">

    </GridView>

</LinearLayout>

2.我们知道，一张表情图片对应着一个描述性词语，例如

对应着：[天使]。这里我建立了一个类存储这种对应关系：

package com.example.irun;

public class Expression {

	public static int[] drawable = new int[]
	{	
		R.drawable.dra,R.drawable.drb,R.drawable.drc,R.drawable.drd,R.drawable.dre,R.drawable.drf,
		R.drawable.drg,R.drawable.drh,R.drawable.dri,R.drawable.drg,R.drawable.drk,R.drawable.drl,
	};
	
	public static String[] describe = new String[] 
	{
		"[天使]","[恶魔]","[微笑]","[嘴馋]","[喜欢]","[帅气]",
		"[发呆]","[无语]","[冒汗]","[什么]","[小亲]","[大亲]",
	};
}

3.表情出现的地方有三处：表情选择列表，输入框，消息列表。

a.表情选择列表

主要就是为GridView设置适配器，这里可以简单地使用SimpleAdapter，每一项就是一个ImageView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/expression"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp" />

</LinearLayout>

b.输入框

当点击表情选择列表中的某一个表情后，获得这个表情的描述性信息，同时可以通过SpannableString在输入框中加上表情图片

c.消息列表

虽然在输入框中看到的是文字+表情图片，但实际上只是一个字符串而已，其中表情实际是：[中文] 这样的形式。如果直接用setText(String)这样的方式，最终只会看到表情是：[中文] 这样的表示，所以要用setText(SpannableString)。同时，为了将所有[中文]的格式转换为表情，需要用到正则表达式去识别。当发送消息时，将输入框中的String通过正则表达式转换为包含了表情图片的SpannableString，再setText；当接受消息时，也将接受到的String通过正则表达式转换为SpannableString。

package com.example.irun;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.widget.Toast;

public class RegularExpressionUtil {

	private static Context context;
	public static void init(Context c)
	{
		if(context == null)
		{
			context = c;
		}
	}
	
	public static SpannableString change(String content)
	{
		//   \\表示\     \[表示[       [\u4e00-\u9fa5]表示中文
		//这个正则表达式用于检测以[]为边界，[]里面有一个或以上中文的字符串
		Pattern pattern = Pattern.compile("\\[[\u4e00-\u9fa5]{1,}\\]");
		SpannableString ss = new SpannableString(content);
		Matcher matcher = pattern.matcher(ss);
		while (matcher.find()) 
		{
			int position = check(matcher.group());
			if(position != -1)
			{
				Drawable d = context.getResources().getDrawable(Expression.drawable[position]);    
		        d.setBounds(0, 0, d.getIntrinsicWidth()/2, d.getIntrinsicHeight()/2);
		        ImageSpan span = new ImageSpan(d);
		        //以aaa[呵呵]bbb为例
		        //start-3，end-7;setSpan不包括起点，包括终点
		        ss.setSpan(span, matcher.start(), matcher.end(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
			}
		}
		return ss;
	}
	
	//检测是否有表情
	private static int check(String s)
	{
		for (int i = 0; i < Expression.describe.length; i++) 
		{
			if(s.equalsIgnoreCase(Expression.describe[i]))
			{
				return i;
			}
		}
		return -1;
	}
}

package com.example.irun;

import java.sql.Date;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONException;
import org.json.JSONObject;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

//聊天界面
public class ChatFragment extends Fragment implements 
      OnClickListener, OnItemClickListener {

	private EditText editText;//输入要发送的信息
	private Button sendButton;//发送按钮
	private Button backButton;//返回按钮
	private Button faceButton;//表情按钮
	private TextView titleText;//标题
	
	private ListView listView;//聊天信息的滑动列表
	private ChatMsgListViewAdapter adapter;//聊天信息的适配器
	private List<ChatMsgEntity> list;//聊天信息的数据

	private GridView gridView;//表情的列表
	private SimpleAdapter gridAdapter;//表情列表的适配器
	private List<Map<String, Object>> gridList;//表情列表的数据
	
	private String toID;//表示跟谁聊天的窗口
	private MessageReceiver messageReceiver;//接受监听的对象
	
	public ChatFragment(String toID)
	{
		this.toID = toID;
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_chat, container, false);
		
		editText = (EditText)view.findViewById(R.id.editText);
		sendButton = (Button)view.findViewById(R.id.btn_send);
		backButton = (Button)view.findViewById(R.id.btn_back);
		faceButton = (Button)view.findViewById(R.id.btn_face);
		titleText = (TextView)view.findViewById(R.id.title);
		
		listView = (ListView)view.findViewById(R.id.listview);
		gridView = (GridView)view.findViewById(R.id.gridview);
		
		sendButton.setOnClickListener(this);
		backButton.setOnClickListener(this);
		faceButton.setOnClickListener(this);
		titleText.setText("跟" + toID + "的聊天");
		
		list = new ArrayList<ChatMsgEntity>();
		adapter = new ChatMsgListViewAdapter(getActivity(), list);
		listView.setAdapter(adapter);
		
		//填充数据
		gridList = new ArrayList<Map<String, Object>>();
		for (int i = 0; i < Expression.drawable.length; i++) {
			Map<String, Object> item = new HashMap<String, Object>();
			item.put("face", Expression.drawable[i]);
	        gridList.add(item);
		}
		//第三个参数是单个grid的布局文件
		//第四个参数是Map对象的哪些key对应的value来生成列表项
		//第五个参数表示要填充的组件， Map对象key对应的资源与填充组件的顺序有对应关系 
		gridAdapter = new SimpleAdapter(getActivity(), gridList, R.layout.grid_face, 
				new String[]{"face"}, new int[]{R.id.expression});
		gridView.setAdapter(gridAdapter);
		gridView.setOnItemClickListener(this);
		
		RegularExpressionUtil.init(getActivity());
		initMessageReceiver();
		
		return view;
	}
	
	@Override
	public void onClick(View v) {
		if(v.getId() == R.id.btn_send) {
			send();
		}
		else if(v.getId() == R.id.btn_back) {
			MainActivity.bottomBar.setVisibility(View.VISIBLE);
			FragmentManager fm = getFragmentManager();  
	        FragmentTransaction tx = fm.beginTransaction();  
	        tx.hide(this);
	        tx.show(fm.findFragmentByTag("ChooseChatFragment"));
	        tx.commit();
		}
		else if(v.getId() == R.id.btn_face) {
			if(gridView.getVisibility() == View.VISIBLE) {
				gridView.setVisibility(View.GONE);
			} else {
				gridView.setVisibility(View.VISIBLE);
			}
		}
	}
	
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		String describe = Expression.describe[position];
		
		SpannableString ss = new SpannableString(describe);
		Drawable d = getResources().getDrawable(Expression.drawable[position]);    
        d.setBounds(0, 0, d.getIntrinsicWidth()/2, d.getIntrinsicHeight()/2);
        ImageSpan span = new ImageSpan(d);
        ss.setSpan(span, 0, describe.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        editText.append(ss);
	}
	
	private void send()
	{
		String content = editText.getText().toString();
		if(content.length() > 0) {
			ChatMsgEntity entity = new ChatMsgEntity();
			entity.setName(UserInfo.getID());
			entity.setDate(getDate());
			entity.setMessage(RegularExpressionUtil.change(content));
			entity.setMsgType(true);
			
			list.add(entity);
			adapter.notifyDataSetChanged();//通知ListView，数据已发生改变
			listView.setSelection(listView.getCount() - 1);//发送一条消息时，ListView显示选择最后一项
			
			editText.setText("");
			
			try {
				JSONObject root = new JSONObject();
				root.put("content", content);
				root.put("fromID", UserInfo.getID());
				root.put("toID", toID);
				SocketService.send(root.toString());
			} catch (JSONException e) {
				e.printStackTrace();
			}	
		}	
	}
	
	private String getDate() 
	{
		long time = System.currentTimeMillis();;
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        Date d = new Date(time);  
        return format.format(d);  
    } 
	
	private void initMessageReceiver()
	{
		messageReceiver = new MessageReceiver();
        IntentFilter filter = new IntentFilter();
        filter.addAction("SocketService");
        getActivity().registerReceiver(messageReceiver,filter);
	}
		
	public class MessageReceiver extends BroadcastReceiver {

		@Override
		public void onReceive(Context context, Intent intent) {
						
			String content = intent.getStringExtra("jsonString");
			try 
			{
				JSONObject root = new JSONObject(content);
				
				//错误：root.getString("toID").equalsIgnoreCase(UserInfo.getID())
				//因为对于每一个窗口来说，UserInfo.getID()都一样
				//toID表示发信息给谁
				boolean a = (root.getString("toID").equalsIgnoreCase("Group")) && (toID.equalsIgnoreCase("Group"));
				boolean b = (!root.getString("toID").equalsIgnoreCase("Group")) && (toID.equalsIgnoreCase(root.getString("fromID")));
				if(a || b)
				{
					if(content != null) 
					{
						ChatMsgEntity entity = new ChatMsgEntity();
						entity.setName(root.getString("fromID"));
						entity.setDate(getDate());
						SpannableString ss = RegularExpressionUtil.change(root.getString("content"));
						entity.setMessage(ss);
						entity.setMsgType(false);
						
						list.add(entity);
						adapter.notifyDataSetChanged();//通知ListView，数据已发生改变
						listView.setSelection(listView.getCount() - 1);//发送一条消息时，ListView显示选择最后一项
					}
				}
				
			} catch (JSONException e) {
				e.printStackTrace();
			}		
		}		
    }
}