Android之高仿微信聊天的介面

      的聊天介面是挺漂亮的，每條訊息都帶一個氣泡，給人一種很清新的感覺，其實實現起來也不是那麼的難，下面我們就來實現一下。

      老規矩，先貼上原始碼：http://download.csdn.net/detail/weidi1989/4588782

      再來看一下實現的：

    

OK，下面我們來看一下整個小項目的主體結構：

 

下面是Activity的代碼：

package com.way.demo;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Date;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;import android.widget.ListView;/** * @author way */public class WeixinChatDemoActivity extends Activity implements OnClickListener {private Button mBtnSend;// 發送btnprivate Button mBtnBack;// 返回btnprivate EditText mEditTextContent;private ListView mListView;private ChatMsgViewAdapter mAdapter;// 訊息視圖的Adapterprivate List<ChatMsgEntity> mDataArrays = new ArrayList<ChatMsgEntity>();// 訊息對象數組public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);initView();// 初始化viewinitData();// 初始化資料mListView.setSelection(mAdapter.getCount() - 1);}/** * 初始化view */public void initView() {mListView = (ListView) findViewById(R.id.listview);mBtnSend = (Button) findViewById(R.id.btn_send);mBtnSend.setOnClickListener(this);mBtnBack = (Button) findViewById(R.id.btn_back);mBtnBack.setOnClickListener(this);mEditTextContent = (EditText) findViewById(R.id.et_sendmessage);}private String[] msgArray = new String[] { "有大嗎", "有！你呢？", "我也有", "那上吧","打啊！你放大啊！", "你TM咋不放大呢？留大搶人頭啊？CAO！你個菜B", "2B不解釋", "尼滾...","今晚去網吧包夜吧？", "有毛片嗎？", "種子一大堆啊~還怕沒片？", "OK,搞起！！" };private String[] dataArray = new String[] { "2012-09-22 18:00:02","2012-09-22 18:10:22", "2012-09-22 18:11:24","2012-09-22 18:20:23", "2012-09-22 18:30:31","2012-09-22 18:35:37", "2012-09-22 18:40:13","2012-09-22 18:50:26", "2012-09-22 18:52:57","2012-09-22 18:55:11", "2012-09-22 18:56:45","2012-09-22 18:57:33", };private final static int COUNT = 12;// 初始化數組總數/** * 類比載入訊息曆史，實際開發可以從資料庫中讀出 */public void initData() {for (int i = 0; i < COUNT; i++) {ChatMsgEntity entity = new ChatMsgEntity();entity.setDate(dataArray[i]);if (i % 2 == 0) {entity.setName("肖B");entity.setMsgType(true);// 收到的訊息} else {entity.setName("必敗");entity.setMsgType(false);// 自己發送的訊息}entity.setMessage(msgArray[i]);mDataArrays.add(entity);}mAdapter = new ChatMsgViewAdapter(this, mDataArrays);mListView.setAdapter(mAdapter);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btn_send:// 發送按鈕點擊事件send();break;case R.id.btn_back:// 返回按鈕點擊事件finish();// 結束,實際開發中，可以返回主介面break;}}/** * 發送訊息 */private void send() {String contString = mEditTextContent.getText().toString();if (contString.length() > 0) {ChatMsgEntity entity = new ChatMsgEntity();entity.setName("必敗");entity.setDate(getDate());entity.setMessage(contString);entity.setMsgType(false);mDataArrays.add(entity);mAdapter.notifyDataSetChanged();// 通知ListView，資料已發生改變mEditTextContent.setText("");// 清空編輯框資料mListView.setSelection(mListView.getCount() - 1);// 發送一條訊息時，ListView顯示選擇最後一項}}/** * 發送訊息時，擷取當前事件 *  * @return 目前時間 */private String getDate() {SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");return format.format(new Date());}}

ListView的代碼：

package com.way.demo;import java.util.List;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;/** * 訊息ListView的Adapter *  * @author way */public class ChatMsgViewAdapter extends BaseAdapter {public static interface IMsgViewType {int IMVT_COM_MSG = 0;// 收到對方的訊息int IMVT_TO_MSG = 1;// 自己發送出去的訊息}private static final int ITEMCOUNT = 2;// 訊息類型的總數private List<ChatMsgEntity> coll;// 訊息對象數組private LayoutInflater mInflater;public ChatMsgViewAdapter(Context context, List<ChatMsgEntity> coll) {this.coll = coll;mInflater = LayoutInflater.from(context);}public int getCount() {return coll.size();}public Object getItem(int position) {return coll.get(position);}public long getItemId(int position) {return position;}/** * 得到Item的類型，是對方發過來的訊息，還是自己發送出去的 */public int getItemViewType(int position) {ChatMsgEntity entity = coll.get(position);if (entity.getMsgType()) {//收到的訊息return IMsgViewType.IMVT_COM_MSG;} else {//自己發送的訊息return IMsgViewType.IMVT_TO_MSG;}}/** * Item類型的總數 */public int getViewTypeCount() {return ITEMCOUNT;}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);}viewHolder = new ViewHolder();viewHolder.tvSendTime = (TextView) convertView.findViewById(R.id.tv_sendtime);viewHolder.tvUserName = (TextView) convertView.findViewById(R.id.tv_username);viewHolder.tvContent = (TextView) convertView.findViewById(R.id.tv_chatcontent);viewHolder.isComMsg = isComMsg;convertView.setTag(viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag();}viewHolder.tvSendTime.setText(entity.getDate());viewHolder.tvUserName.setText(entity.getName());viewHolder.tvContent.setText(entity.getMessage());return convertView;}static class ViewHolder {public TextView tvSendTime;public TextView tvUserName;public TextView tvContent;public boolean isComMsg = true;}}

訊息對象的代碼：

package com.way.demo;/** * 一個訊息的JavaBean *  * @author way *  */public class ChatMsgEntity {private String name;//訊息來自private String date;//訊息日期private String message;//訊息內容private boolean isComMeg = true;// 是否為收到的訊息public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDate() {return date;}public void setDate(String date) {this.date = date;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public boolean getMsgType() {return isComMeg;}public void setMsgType(boolean isComMsg) {isComMeg = isComMsg;}public ChatMsgEntity() {}public ChatMsgEntity(String name, String date, String text, boolean isComMsg) {super();this.name = name;this.date = date;this.message = text;this.isComMeg = isComMsg;}}

OK，大功告成，大家耐心點看看吧，文字比較少。