Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

经过一个星期的折腾，最终做完了这个Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录。这仅仅是一个单独聊天表情的输入，以及聊天的效果实现。由于我没有写server，所以没有两方聊天的效果。

主要是聊天中表情的选择。发送。

表情翻页带有不同的效果。

我在主要代码中都写了凝视。以下看代码实现。附上本文源代码，代码较多。

下载地址：点击

一、先看实现的效果图

二、调用接口以及设置MainActivity

package com.example.activity;

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

import com.org.adapter.FaceAdapter;
import com.org.adapter.FacePageAdeapter;
import com.org.adapter.MessageAdapter;
import com.org.util.MyApplication;
import com.org.util.SharePreferenceUtil;
import com.org.view.CirclePageIndicator;
import com.org.view.JazzyViewPager;
import com.org.view.JazzyViewPager.TransitionEffect;
import com.org.xlistview.MsgListView;
import com.org.xlistview.MsgListView.IXListViewListener;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.drawable.ColorDrawable;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.text.Editable;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.TextWatcher;
import android.text.style.ImageSpan;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import android.view.inputmethod.InputMethodManager;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity 
implements 
OnClickListener,
OnTouchListener,
IXListViewListener{

	private Button sendBtn;
	private ImageButton faceBtn;
	private LinearLayout faceLinearLayout;
	private EditText msgEt;
	private InputMethodManager mInputMethodManager;
	private MessageAdapter mMessageAdapter;
	private JazzyViewPager faceViewPager;
	private MsgListView mMsgListView;
	private MyApplication mApplication;
	private SharePreferenceUtil mSpUtil;
	private WindowManager.LayoutParams mLayoutParams;
	private List<String> mListFaceKeys;
	private int currentPage = 0;
	private boolean isFaceShow = false;
	private static int MsgPagerNum;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.chat_main);
		initData();
		initUI();
		initFacePage();
	}
	
	private void initData() {
		mApplication = MyApplication.getInstance();
		//SharePreference存储类
		mSpUtil = new SharePreferenceUtil(this, "message_save");
		//初始化消息列表适配器
		mMessageAdapter = new MessageAdapter(this, initMsgData());
		
		//载入表情的列表
		Set<String> keySet = MyApplication.getInstance().getFaceMap().keySet();
		mListFaceKeys = new ArrayList<String>();
		mListFaceKeys.addAll(keySet);
		MsgPagerNum = 0;
	}
	private void initUI() {
		mInputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
		//获取窗体触摸操作
		mLayoutParams = getWindow().getAttributes();
		
		mMsgListView = (MsgListView) findViewById(R.id.msg_listView);
		// 触摸ListView隐藏表情和输入法
		mMsgListView.setOnTouchListener(this);
		mMsgListView.setPullLoadEnable(false);
		mMsgListView.setXListViewListener(this);
		mMsgListView.setAdapter(mMessageAdapter);
		mMsgListView.setSelection(mMessageAdapter.getCount() - 1);
		
		sendBtn = (Button) findViewById(R.id.send_btn);
		faceBtn = (ImageButton) findViewById(R.id.face_btn);
		faceLinearLayout = (LinearLayout) findViewById(R.id.face_ll);
		msgEt = (EditText) findViewById(R.id.msg_et);
		faceLinearLayout = (LinearLayout) findViewById(R.id.face_ll);
		faceViewPager = (JazzyViewPager) findViewById(R.id.face_pager);
		
		//标题栏控件
		TextView mTitle = (TextView) findViewById(R.id.ivTitleName);
		mTitle.setText("默默笙箫");
		TextView mTitleLeftBtn = (TextView) findViewById(R.id.ivTitleBtnLeft);
		mTitleLeftBtn.setVisibility(View.VISIBLE);
		mTitleLeftBtn.setOnClickListener(this);
		
		//输入框的触摸监听的绑定
		msgEt.setOnTouchListener(this);
		msgEt.setOnKeyListener(new OnKeyListener() {

			@Override
			public boolean onKey(View v, int keyCode, KeyEvent event) {
				if (keyCode == KeyEvent.KEYCODE_BACK) {
					if (mLayoutParams.softInputMode == WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE
							|| isFaceShow) {
						faceLinearLayout.setVisibility(View.GONE);
						isFaceShow = false;
						// imm.showSoftInput(msgEt, 0);
						return true;
					}
				}
				return false;
			}
		});
		
		//输入框的实时输入长度的监听
		msgEt.addTextChangedListener(new TextWatcher() {
			@Override
			public void onTextChanged(CharSequence s, int start, int before,
					int count) {
			}

			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}

			@Override
			public void afterTextChanged(Editable s) {
				if (s.length() > 0) {
					sendBtn.setEnabled(true);
				} else {
					sendBtn.setEnabled(false);
				}
			}
		});
		
		faceBtn.setOnClickListener(this);
		sendBtn.setOnClickListener(this);
	}
	
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		switch (v.getId()) {
		case R.id.msg_listView:   //ListView触摸实现
			mInputMethodManager.hideSoftInputFromWindow(msgEt.getWindowToken(), 0);
			faceLinearLayout.setVisibility(View.GONE);
			isFaceShow = false;
			break;
		case R.id.msg_et:    //输入框触摸实现
			mInputMethodManager.showSoftInput(msgEt, 0);
			faceLinearLayout.setVisibility(View.GONE);
			isFaceShow = false;
			break;

		default:
			break;
		}
		return false;
	}
	
	//历史数据。在開始时显示
	private List<MessageItem> initMsgData() {
		List<MessageItem> msgList = new ArrayList<MessageItem>();// 消息对象数组
		
		MessageItem item = new MessageItem(MessageItem.MESSAGE_TYPE_TEXT,
				mSpUtil.getNick(), System.currentTimeMillis(), "历史消息",
				mSpUtil.getHeadIcon(), false, 0);
		msgList.add(item);
		return msgList;

	}
	
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.face_btn:  //弹出表情
			if (!isFaceShow) {
				mInputMethodManager.hideSoftInputFromWindow(msgEt.getWindowToken(), 0);
				try {
					Thread.sleep(80);// 解决此时会黑一下屏幕的问题
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
				faceLinearLayout.setVisibility(View.VISIBLE);
				isFaceShow = true;
			} else {
				faceLinearLayout.setVisibility(View.GONE);
				isFaceShow = false;
			}
			break;
		case R.id.send_btn:// 发送消息
			String msg = msgEt.getText().toString();
			MessageItem item = new MessageItem(MessageItem.MESSAGE_TYPE_TEXT,
					mSpUtil.getNick(), System.currentTimeMillis(), msg,
					mSpUtil.getHeadIcon(), false, 0);
			mMessageAdapter.upDateMsg(item);
			
			mMsgListView.setSelection(mMessageAdapter.getCount() - 1);
			msgEt.setText("");
			break;
		case R.id.ivTitleBtnLeft:
			finish();
			break;
//		case R.id.ivTitleBtnRigh:
//			break;
		default:
			break;
		}
		
	}
	
	//载入表情。以及设置翻页效果
	private void initFacePage() {
		List<View> lv = new ArrayList<View>();
		for (int i = 0; i < MyApplication.NUM_PAGE; ++i)
			lv.add(getGridView(i));
		FacePageAdeapter adapter = new FacePageAdeapter(lv, faceViewPager);
		faceViewPager.setAdapter(adapter);
		faceViewPager.setCurrentItem(currentPage);
		faceViewPager.setTransitionEffect(mEffects[mSpUtil.getFaceEffect()]);
		CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator);
		indicator.setViewPager(faceViewPager);
		adapter.notifyDataSetChanged();
		faceLinearLayout.setVisibility(View.GONE);
		indicator.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				currentPage = arg0;
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// do nothing
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// do nothing
			}
		});

	}
	
	//表情表格控件放置。设置背景
	private GridView getGridView(int i) {
		GridView gv = new GridView(this);
		gv.setNumColumns(7);      //一行显示7个表情
		gv.setSelector(new ColorDrawable(Color.TRANSPARENT));// 屏蔽GridView默认点击效果
		gv.setBackgroundColor(Color.TRANSPARENT);
		gv.setCacheColorHint(Color.TRANSPARENT);
		gv.setHorizontalSpacing(1);
		gv.setVerticalSpacing(1);
		gv.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
		gv.setGravity(Gravity.CENTER);
		gv.setAdapter(new FaceAdapter(this, i));
		gv.setOnTouchListener(forbidenScroll());    	// 防止乱pageview乱滚动
		gv.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				if (arg2 == MyApplication.NUM) {   // 删除表情键的位置
					int selection = msgEt.getSelectionStart();
					String text = msgEt.getText().toString();
					if (selection > 0) {
						String text2 = text.substring(selection - 1);
						if ("]".equals(text2)) {
							int start = text.lastIndexOf("[");
							int end = selection;
							msgEt.getText().delete(start, end);
							return;
						}
						msgEt.getText().delete(selection - 1, selection);
					}
				} else {
					int count = currentPage * MyApplication.NUM + arg2;
					// 凝视的部分，在EditText中显示字符串
					// String ori = msgEt.getText().toString();
					// int index = msgEt.getSelectionStart();
					// StringBuilder stringBuilder = new StringBuilder(ori);
					// stringBuilder.insert(index, keys.get(count));
					// msgEt.setText(stringBuilder.toString());
					// msgEt.setSelection(index + keys.get(count).length());

					// 以下这部分。在EditText中显示表情
					Bitmap bitmap = BitmapFactory.decodeResource(
							getResources(), (Integer) MyApplication
									.getInstance().getFaceMap().values()
									.toArray()[count]);
					if (bitmap != null) {
						int rawHeigh = bitmap.getHeight();
						int rawWidth = bitmap.getHeight();
						int newHeight = 40;
						int newWidth = 40;
						// 计算缩放因子
						float heightScale = ((float) newHeight) / rawHeigh;
						float widthScale = ((float) newWidth) / rawWidth;
						// 新建立矩阵
						Matrix matrix = new Matrix();
						matrix.postScale(heightScale, widthScale);
						// 设置图片的旋转角度
						// matrix.postRotate(-30);
						// 设置图片的倾斜
						// matrix.postSkew(0.1f, 0.1f);
						// 将图片大小压缩
						// 压缩后图片的宽和高以及kB大小均会变化
						Bitmap newBitmap = Bitmap.createBitmap(bitmap, 0, 0,
								rawWidth, rawHeigh, matrix, true);
						ImageSpan imageSpan = new ImageSpan(MainActivity.this,
								newBitmap);
						String emojiStr = mListFaceKeys.get(count);
						SpannableString spannableString = new SpannableString(
								emojiStr);
						spannableString.setSpan(imageSpan,
								emojiStr.indexOf('['),
								emojiStr.indexOf(']') + 1,
								Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
						msgEt.append(spannableString);
					} else {
						String ori = msgEt.getText().toString();
						int index = msgEt.getSelectionStart();
						StringBuilder stringBuilder = new StringBuilder(ori);
						stringBuilder.insert(index, mListFaceKeys.get(count));
						msgEt.setText(stringBuilder.toString());
						msgEt.setSelection(index + mListFaceKeys.get(count).length());
					}
				}
			}
		});
		return gv;
	}	
	
	// 防止乱pageview乱滚动
	private OnTouchListener forbidenScroll() {
		return new OnTouchListener() {
			public boolean onTouch(View v, MotionEvent event) {
				if (event.getAction() == MotionEvent.ACTION_MOVE) {
					return true;
				}
				return false;
			}
		};
	}
	
	@Override
	protected void onPause() {
		// TODO Auto-generated method stub
		mInputMethodManager.hideSoftInputFromWindow(msgEt.getWindowToken(), 0);
		faceLinearLayout.setVisibility(View.GONE);
		isFaceShow = false;
		super.onPause();
	}
	
	
	//处理下拉刷新的效果
	@Override
	public void onRefresh() {
		MsgPagerNum++;
		List<MessageItem> msgList = initMsgData();
		int position = mMessageAdapter.getCount();
		mMessageAdapter.setMessageList(msgList);
		mMsgListView.stopRefresh();
		
		mMsgListView.setSelection(mMessageAdapter.getCount() - position - 1);
		Log.i("Show","MsgPagerNum = " + mMessageAdapter + ", adapter.getCount() = "
				+ mMessageAdapter.getCount());
		
	}
	@Override
	public void onLoadMore() {
		// TODO Auto-generated method stub
		
	}

	private TransitionEffect mEffects[] = { TransitionEffect.Standard,
			TransitionEffect.Tablet, TransitionEffect.CubeIn,
			TransitionEffect.CubeOut, TransitionEffect.FlipVertical,
			TransitionEffect.FlipHorizontal, TransitionEffect.Stack,
			TransitionEffect.ZoomIn, TransitionEffect.ZoomOut,
			TransitionEffect.RotateUp, TransitionEffect.RotateDown,
			TransitionEffect.Accordion, };// 表情翻页效果

}

二、基本的xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <include layout="@layout/common_title_bg" />

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="0.0dip"
        android:layout_weight="1.0"
        android:background="@drawable/chat_bg_01" >

        <com.org.xlistview.MsgListView
            android:id="@+id/msg_listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:divider="@null"
            android:listSelector="@android:color/transparent"
            android:transcriptMode="normal" />
    </FrameLayout>

    <LinearLayout
        android:id="@+id/inputBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottombar_bg"
        android:gravity="center_vertical" >

        <!-- <ImageButton
            android:id="@+id/more_btn"
            android:layout_width="42.0dip"
            android:layout_height="fill_parent"
            android:background="@android:color/transparent"
            android:paddingLeft="10.0dip"
            android:src="@drawable/pop_btn_selector" /> -->

        <ImageButton
            android:id="@+id/face_btn"
            android:layout_width="42.0dip"
            android:layout_height="fill_parent"
            android:background="@android:color/transparent"
            android:paddingLeft="5.0dip"
            android:paddingRight="5.0dip"
            android:src="@drawable/pop_btn_face_selector" />

        <EditText
            android:id="@+id/msg_et"
            android:layout_width="0.0dip"
            android:layout_height="40dip"
            android:layout_marginBottom="6.0dip"
            android:layout_marginTop="6.0dip"
            android:layout_weight="1.0"
            android:background="@drawable/chat_bottombar_input"
            android:inputType="textMultiLine"
            android:maxHeight="68.0dip"
            android:paddingBottom="4.0dip"
            android:paddingLeft="10.0dip"
            android:paddingRight="14.0dip"
            android:paddingTop="4.0dip"
            android:textSize="16.0sp" />

        <LinearLayout
            android:id="@+id/send_layout"
            android:layout_width="56.0dip"
            android:layout_height="fill_parent"
            android:layout_gravity="left|center"
            android:clickable="true"
            android:gravity="center_vertical" >

            <Button
                android:id="@+id/send_btn"
                android:layout_width="42.0dip"
                android:layout_height="34.0dip"
                android:layout_marginLeft="4.0dip"
                android:background="@drawable/chat_bottombar_btn_selector"
                android:enabled="false"
                android:shadowColor="#ff568ab5"
                android:shadowDx="0.0"
                android:shadowDy="-1.0"
                android:shadowRadius="0.2"
                android:text="发送"
                android:textColor="@color/send_btn_textcolor"
                android:textSize="14.0sp" />
        </LinearLayout>
    </LinearLayout>

    <FrameLayout
        android:id="@+id/panelLayout"
        android:layout_width="fill_parent"
        android:layout_height="204.0dip"
        android:background="#ff34373c"
        android:visibility="gone" >

        <GridView
            android:id="@+id/panel"
            android:layout_width="fill_parent"
            android:layout_height="204.0dip"
            android:gravity="center"
            android:listSelector="#ff34373c"
            android:numColumns="4"
            android:paddingLeft="11.0dip"
            android:paddingRight="11.0dip"
            android:paddingTop="14.0dip"
            android:scrollbars="none"
            android:stretchMode="columnWidth"
            android:verticalSpacing="14.0dip" />

        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/chat_plugin_shadow" />
    </FrameLayout>

    <LinearLayout
        android:id="@+id/face_ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#fff0f0f0"
        android:orientation="vertical"
        android:paddingBottom="5dip"
        android:paddingTop="5dip"
        android:visibility="gone" >

        <com.org.view.JazzyViewPager
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/face_pager"
            app:style="cubeout"
            android:layout_width="fill_parent"
            android:layout_height="120.0dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:background="#0000"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />

        <com.org.view.CirclePageIndicator
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="10dip" />
    </LinearLayout>

</LinearLayout>

还有很多适配器，其它实现效果的源代码就不具体贴了，须要细致研究，下载本文的源代码。

下载地址：点击