UI设计之【android 仿微信、QQ聊天，带表情，可翻页，带翻页拖动缓冲】

转自： http://blog.csdn.net/lnb333666/article/details/8546497

如题，这是公司项目的一个功能模块，先上个效果图：

其次大致说说原理：

1，首先判断输入的字符，是否包含表情的文字，比如   这个表情对应的文件名为 emoji_1.png，它对应的文字描述 ： [可爱]，如果我们在输出的是输出这么一句话：老婆，我想你了。  那么我们对应的根本文字就是：老婆，我想你了[可爱]。

2，具体的转换过程就是用正则表达式比配文字中是否含有[xxx]这类的文字，如果有，那么我们就根据拿到的[xxx]找到它对应的资源文件id,当然这其中有一个关系表，看你怎么处理这个关系了。最后将其用SpannableString替换成文字，表面上显示有图片，其实TextView里的text依然是:老婆，我想你了[可爱]。这个过程明白么？

下面贴上DEMO工程的结构：

再贴上几个重要的类：

 package com.example.facedemo;

 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;

 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.text.Spannable;
 import android.text.SpannableString;
 import android.text.TextUtils;
 import android.text.style.ImageSpan;
 import android.util.Log;

 /**
  *
  ******************************************
  * @author 廖乃波
  * @文件名称 : FaceConversionUtil.java
  * @创建时间 : 2013-1-27 下午02:34:09
  * @文件描述 : 表情轉換工具
  ******************************************
  */
 public class FaceConversionUtil {

     /** 每一页表情的个数 */
     private int pageSize = 20;

     private static FaceConversionUtil mFaceConversionUtil;

     /** 保存于内存中的表情HashMap */
     private HashMap emojiMap = new HashMap();

     /** 保存于内存中的表情集合 */
     private List emojis = new ArrayList();

     /** 表情分页的结果集合 */
     public List> emojiLists = new ArrayList>();

     private FaceConversionUtil() {

     }

     public static FaceConversionUtil getInstace() {
         if (mFaceConversionUtil == null) {
             mFaceConversionUtil = new FaceConversionUtil();
         }
         return mFaceConversionUtil;
     }

     /**
      * 得到一个SpanableString对象，通过传入的字符串,并进行正则判断
      *
      * @param context
      * @param str
      * @return
      */
     public SpannableString getExpressionString(Context context, String str) {
         SpannableString spannableString = new SpannableString(str);
         // 正则表达式比配字符串里是否含有表情，如： 我好[开心]啊
         String zhengze = "\\[[^\\]]+\\]";
         // 通过传入的正则表达式来生成一个pattern
         Pattern sinaPatten = Pattern.compile(zhengze, Pattern.CASE_INSENSITIVE);
         try {
             dealExpression(context, spannableString, sinaPatten, 0);
         } catch (Exception e) {
             Log.e("dealExpression", e.getMessage());
         }
         return spannableString;
     }

     /**
      * 添加表情
      *
      * @param context
      * @param imgId
      * @param spannableString
      * @return
      */
     public SpannableString addFace(Context context, int imgId,
             String spannableString) {
         if (TextUtils.isEmpty(spannableString)) {
             return null;
         }
         Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),
                 imgId);
         bitmap = Bitmap.createScaledBitmap(bitmap, 35, 35, true);
         ImageSpan imageSpan = new ImageSpan(context, bitmap);
         SpannableString spannable = new SpannableString(spannableString);
         spannable.setSpan(imageSpan, 0, spannableString.length(),
                 Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
         return spannable;
     }

     /**
      * 对spanableString进行正则判断，如果符合要求，则以表情图片代替
      *
      * @param context
      * @param spannableString
      * @param patten
      * @param start
      * @throws Exception
      */
     private void dealExpression(Context context,
             SpannableString spannableString, Pattern patten, int start)
             throws Exception {
         Matcher matcher = patten.matcher(spannableString);
         while (matcher.find()) {
             String key = matcher.group();
             // 返回第一个字符的索引的文本匹配整个正则表达式,ture 则继续递归
             if (matcher.start() < start) {
                 continue;
             }
             String value = emojiMap.get(key);
             if (TextUtils.isEmpty(value)) {
                 continue;
             }
             int resId = context.getResources().getIdentifier(value, "drawable",
                     context.getPackageName());
             // 通过上面匹配得到的字符串来生成图片资源id，下边的方法可用，但是你工程混淆的时候就有事了，你懂的。不是我介绍的重点
             // Field field=R.drawable.class.getDeclaredField(value);
             // int resId=Integer.parseInt(field.get(null).toString());
             if (resId != 0) {
                 Bitmap bitmap = BitmapFactory.decodeResource(
                         context.getResources(), resId);
                 bitmap = Bitmap.createScaledBitmap(bitmap, 50, 50, true);
                 // 通过图片资源id来得到bitmap，用一个ImageSpan来包装
                 ImageSpan imageSpan = new ImageSpan(bitmap);
                 // 计算该图片名字的长度，也就是要替换的字符串的长度
                 int end = matcher.start() + key.length();
                 // 将该图片替换字符串中规定的位置中
                 spannableString.setSpan(imageSpan, matcher.start(), end,
                         Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
                 if (end < spannableString.length()) {
                     // 如果整个字符串还未验证完，则继续。。
                     dealExpression(context, spannableString, patten, end);
                 }
                 break;
             }
         }
     }

     public void getFileText(Context context) {
         ParseData(FileUtils.getEmojiFile(context), context);
     }

     /**
      * 解析字符
      *
      * @param data
      */
     private void ParseData(List data, Context context) {
         if (data == null) {
             return;
         }
         ChatEmoji emojEentry;
         try {
             for (String str : data) {
                 String[] text = str.split(",");
                 String fileName = text[0]
                         .substring(0, text[0].lastIndexOf("."));
                 emojiMap.put(text[1], fileName);
                 int resID = context.getResources().getIdentifier(fileName,
                         "drawable", context.getPackageName());

                 if (resID != 0) {
                     emojEentry = new ChatEmoji();
                     emojEentry.setId(resID);
                     emojEentry.setCharacter(text[1]);
                     emojEentry.setFaceName(fileName);
                     emojis.add(emojEentry);
                 }
             }
             int pageCount = (int) Math.ceil(emojis.size() / 20 + 0.1);

             for (int i = 0; i < pageCount; i++) {
                 emojiLists.add(getData(i));
             }
         } catch (Exception e) {
             e.printStackTrace();
         }
     }

     /**
      * 获取分页数据
      *
      * @param page
      * @return
      */
     private List getData(int page) {
         int startIndex = page * pageSize;
         int endIndex = startIndex + pageSize;

         if (endIndex > emojis.size()) {
             endIndex = emojis.size();
         }
         // 不这么写，会在viewpager加载中报集合操作异常，我也不知道为什么
         List list = new ArrayList();
         list.addAll(emojis.subList(startIndex, endIndex));
         if (list.size() < pageSize) {
             for (int i = list.size(); i < pageSize; i++) {
                 ChatEmoji object = new ChatEmoji();
                 list.add(object);
             }
         }
         if (list.size() == pageSize) {
             ChatEmoji object = new ChatEmoji();
             object.setId(R.drawable.face_del_icon);
             list.add(object);
         }
         return list;
     }
 }

下边是表情布局，带输入框的，这样可以多个地方使用，就不不会使用太多多余代码。

 package com.example.facedemo;

 import java.util.ArrayList;
 import java.util.List;

 import android.content.Context;
 import android.graphics.Color;
 import android.graphics.drawable.ColorDrawable;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.text.SpannableString;
 import android.text.TextUtils;
 import android.util.AttributeSet;
 import android.view.Gravity;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.EditText;
 import android.widget.GridView;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.RelativeLayout;

 /**
  *
  ******************************************
  * @author 廖乃波
  * @文件名称    :  FaceRelativeLayout.java
  * @创建时间    : 2013-1-27 下午02:34:17
  * @文件描述    : 带表情的自定义输入框
  ******************************************
  */
 public class FaceRelativeLayout extends RelativeLayout implements
         OnItemClickListener, OnClickListener {

     private Context context;

     /** 表情页的监听事件 */
     private OnCorpusSelectedListener mListener;

     /** 显示表情页的viewpager */
     private ViewPager vp_face;

     /** 表情页界面集合 */
     private ArrayList pageViews;

     /** 游标显示布局 */
     private LinearLayout layout_point;

     /** 游标点集合 */
     private ArrayList pointViews;

     /** 表情集合 */
     private List> emojis;

     /** 表情区域 */
     private View view;

     /** 输入框 */
     private EditText et_sendmessage;

     /** 表情数据填充器 */
     private List faceAdapters;

     /** 当前表情页 */
     private int current = 0;

     public FaceRelativeLayout(Context context) {
         super(context);
         this.context = context;
     }

     public FaceRelativeLayout(Context context, AttributeSet attrs) {
         super(context, attrs);
         this.context = context;
     }

     public FaceRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
         this.context = context;
     }

     public void setOnCorpusSelectedListener(OnCorpusSelectedListener listener) {
         mListener = listener;
     }

     /**
      * 表情选择监听
      *
      * @author naibo-liao
      * @时间： 2013-1-15下午04:32:54
      */
     public interface OnCorpusSelectedListener {

         void onCorpusSelected(ChatEmoji emoji);

         void onCorpusDeleted();
     }

     @Override
     protected void onFinishInflate() {
         super.onFinishInflate();
         emojis = FaceConversionUtil.getInstace().emojiLists;
         onCreate();
     }

     private void onCreate() {
         Init_View();
         Init_viewPager();
         Init_Point();
         Init_Data();
     }

     @Override
     public void onClick(View v) {
         switch (v.getId()) {
         case R.id.btn_face:
             // 隐藏表情选择框
             if (view.getVisibility() == View.VISIBLE) {
                 view.setVisibility(View.GONE);
             } else {
                 view.setVisibility(View.VISIBLE);
             }
             break;
         case R.id.et_sendmessage:
             // 隐藏表情选择框
             if (view.getVisibility() == View.VISIBLE) {
                 view.setVisibility(View.GONE);
             }
             break;

         }
     }

     /**
      * 隐藏表情选择框
      */
     public boolean hideFaceView() {
         // 隐藏表情选择框
         if (view.getVisibility() == View.VISIBLE) {
             view.setVisibility(View.GONE);
             return true;
         }
         return false;
     }

     /**
      * 初始化控件
      */
     private void Init_View() {
         vp_face = (ViewPager) findViewById(R.id.vp_contains);
         et_sendmessage = (EditText) findViewById(R.id.et_sendmessage);
         layout_point = (LinearLayout) findViewById(R.id.iv_image);
         et_sendmessage.setOnClickListener(this);
         findViewById(R.id.btn_face).setOnClickListener(this);
         view = findViewById(R.id.ll_facechoose);

     }

     /**
      * 初始化显示表情的viewpager
      */
     private void Init_viewPager() {
         pageViews = new ArrayList();
         // 左侧添加空页
         View nullView1 = new View(context);
         // 设置透明背景
         nullView1.setBackgroundColor(Color.TRANSPARENT);
         pageViews.add(nullView1);

         // 中间添加表情页

         faceAdapters = new ArrayList();
         for (int i = 0; i < emojis.size(); i++) {
             GridView view = new GridView(context);
             FaceAdapter adapter = new FaceAdapter(context, emojis.get(i));
             view.setAdapter(adapter);
             faceAdapters.add(adapter);
             view.setOnItemClickListener(this);
             view.setNumColumns(7);
             view.setBackgroundColor(Color.TRANSPARENT);
             view.setHorizontalSpacing(1);
             view.setVerticalSpacing(1);
             view.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
             view.setCacheColorHint(0);
             view.setPadding(5, 0, 5, 0);
             view.setSelector(new ColorDrawable(Color.TRANSPARENT));
             view.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
                     LayoutParams.WRAP_CONTENT));
             view.setGravity(Gravity.CENTER);
             pageViews.add(view);
         }

         // 右侧添加空页面
         View nullView2 = new View(context);
         // 设置透明背景
         nullView2.setBackgroundColor(Color.TRANSPARENT);
         pageViews.add(nullView2);
     }

     /**
      * 初始化游标
      */
     private void Init_Point() {

         pointViews = new ArrayList();
         ImageView imageView;
         for (int i = 0; i < pageViews.size(); i++) {
             imageView = new ImageView(context);
             imageView.setBackgroundResource(R.drawable.d1);
             LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                     new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,
                             LayoutParams.WRAP_CONTENT));
             layoutParams.leftMargin = 10;
             layoutParams.rightMargin = 10;
             layoutParams.width = 8;
             layoutParams.height = 8;
             layout_point.addView(imageView, layoutParams);
             if (i == 0 || i == pageViews.size() - 1) {
                 imageView.setVisibility(View.GONE);
             }
             if (i == 1) {
                 imageView.setBackgroundResource(R.drawable.d2);
             }
             pointViews.add(imageView);

         }
     }

     /**
      * 填充数据
      */
     private void Init_Data() {
         vp_face.setAdapter(new ViewPagerAdapter(pageViews));

         vp_face.setCurrentItem(1);
         current = 0;
         vp_face.setOnPageChangeListener(new OnPageChangeListener() {

             @Override
             public void onPageSelected(int arg0) {
                 current = arg0 - 1;
                 // 描绘分页点
                 draw_Point(arg0);
                 // 如果是第一屏或者是最后一屏禁止滑动，其实这里实现的是如果滑动的是第一屏则跳转至第二屏，如果是最后一屏则跳转到倒数第二屏.
                 if (arg0 == pointViews.size() - 1 || arg0 == 0) {
                     if (arg0 == 0) {
                         vp_face.setCurrentItem(arg0 + 1);// 第二屏 会再次实现该回调方法实现跳转.
                         pointViews.get(1).setBackgroundResource(R.drawable.d2);
                     } else {
                         vp_face.setCurrentItem(arg0 - 1);// 倒数第二屏
                         pointViews.get(arg0 - 1).setBackgroundResource(
                                 R.drawable.d2);
                     }
                 }
             }

             @Override
             public void onPageScrolled(int arg0, float arg1, int arg2) {

             }

             @Override
             public void onPageScrollStateChanged(int arg0) {

             }
         });

     }

     /**
      * 绘制游标背景
      */
     public void draw_Point(int index) {
         for (int i = 1; i < pointViews.size(); i++) {
             if (index == i) {
                 pointViews.get(i).setBackgroundResource(R.drawable.d2);
             } else {
                 pointViews.get(i).setBackgroundResource(R.drawable.d1);
             }
         }
     }

     @Override
     public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) {
         ChatEmoji emoji = (ChatEmoji) faceAdapters.get(current).getItem(arg2);
         if (emoji.getId() == R.drawable.face_del_icon) {
             int selection = et_sendmessage.getSelectionStart();
             String text = et_sendmessage.getText().toString();
             if (selection > 0) {
                 String text2 = text.substring(selection - 1);
                 if ("]".equals(text2)) {
                     int start = text.lastIndexOf("[");
                     int end = selection;
                     et_sendmessage.getText().delete(start, end);
                     return;
                 }
                 et_sendmessage.getText().delete(selection - 1, selection);
             }
         }
         if (!TextUtils.isEmpty(emoji.getCharacter())) {
             if (mListener != null)
                 mListener.onCorpusSelected(emoji);
             SpannableString spannableString = FaceConversionUtil.getInstace()
                     .addFace(getContext(), emoji.getId(), emoji.getCharacter());
             et_sendmessage.append(spannableString);
         }

     }
 }

接下来是聊天数据填充器的

 package com.example.facedemo;

 import android.content.Context;

 import android.text.SpannableString;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 import android.widget.BaseAdapter;
 import android.widget.TextView;

 import java.util.List;

 /**
  *
  ******************************************
  * @author 廖乃波
  * @文件名称    :  ChatMsgAdapter.java
  * @创建时间    : 2013-1-27 下午02:33:16
  * @文件描述    : 消息数据填充起
  ******************************************
  */
 public class ChatMsgAdapter extends BaseAdapter {

     public static interface IMsgViewType {
         int IMVT_COM_MSG = 0;
         int IMVT_TO_MSG = 1;
     }

     private List coll;
     private LayoutInflater mInflater;
     private Context context;
     public ChatMsgAdapter(Context context, List coll) {
         this.coll = coll;
         mInflater = LayoutInflater.from(context);
         this.context = context;
     }

     public int getCount() {
         return coll.size();
     }

     public Object getItem(int position) {
         return coll.get(position);
     }

     public long getItemId(int position) {
         return position;
     }

     public int getItemViewType(int position) {
         ChatMsgEntity entity = coll.get(position);

         if (entity.getMsgType()) {
             return IMsgViewType.IMVT_COM_MSG;
         } else {
             return IMsgViewType.IMVT_TO_MSG;
         }

     }

     public int getViewTypeCount() {
         return 2;
     }

     public View getView(int position, View convertView, ViewGroup parent) {

         ChatMsgEntity entity = coll.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);
             }