Android開發學習之仿微信聊天介面的實現

既然在上一篇文章中，我們提到了，那麼在今天的文章中，我們繼續來說吧。今天想和大家分享的是關於的聊天介面。

一、實現原理

繼承BaseAdapter建立一個自訂配接器，然後根據訊息的來源，即訊息是由對方發出還是自己發出，再getView()方法中返回不同的布局，從而實現聊天介面。

二、需求分析

在的聊天介面中，存在三種元素，分別是訊息發送時間、發送訊息布局、接受訊息布局，因此我們需要以此來構建相應的布局。

三、具體實現

首先我們來分別建立這三種布局：

訊息發送時間布局

發送訊息布局

接受訊息布局

接下來，我們定義一個實體類，用於描述訊息實體

package com.Android.WeChatListView;public class WeChatMessage {//定義3種布局類型public static final int MessageType_Time=0;public static final int MessageType_From=1;public static final int MessageType_To=2;public WeChatMessage(int Type,String Content){this.mType=Type;this.mContent=Content;}   //訊息類型   private int mType;   //訊息內容   private String mContent;   //擷取類型   public int getType() {return mType;   }   //設定類型   public void setType(int mType) {this.mType = mType;   }   //擷取內容   public String getContent() {return mContent;   }   //設定內容   public void setContent(String mContent) {this.mContent = mContent;   }}

在上面的代碼中我們已經定義了三種不同類型的訊息實體，下面我們將根據這三種類型，來編寫我們的自訂配接器類

package com.Android.WeChatListView;import java.util.List;import com.example.wechatlistview.R;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;public class WeChatAdapter extends BaseAdapter{private Context mContext;private List mData;    public WeChatAdapter(Context context,List data)    {    this.mContext=context;    this.mData=data;    }        public void Refresh()    {       this.notifyDataSetChanged();    }    @Overridepublic int getCount() {return mData.size();}@Overridepublic Object getItem(int Index) {return mData.get(Index);}@Overridepublic long getItemId(int Index) {return Index;}@Overridepublic View getView(int Index, View mView, ViewGroup mParent) {TextView Content;switch(mData.get(Index).getType()){   case WeChatMessage.MessageType_Time:   mView=LayoutInflater.from(mContext).inflate(R.layout.layout_time, null);   Content=(TextView)mView.findViewById(R.id.Time);   Content.setText(mData.get(Index).getContent());   break;   case WeChatMessage.MessageType_From:   mView=LayoutInflater.from(mContext).inflate(R.layout.layout_from, null);   Content=(TextView)mView.findViewById(R.id.From_Content);   Content.setText(mData.get(Index).getContent());   break;   case WeChatMessage.MessageType_To:   mView=LayoutInflater.from(mContext).inflate(R.layout.layout_to, null);   Content=(TextView)mView.findViewById(R.id.To_Content);   Content.setText(mData.get(Index).getContent());   break;} return mView;}}

四、主介面實現

介面布局代碼

後台邏輯代碼

package com.Android.WeChatListView;import java.util.ArrayList;import java.util.Calendar;import java.util.List;import com.example.wechatlistview.R;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.view.inputmethod.InputMethodManager;import android.widget.Button;import android.widget.EditText;import android.widget.ListView;public class WeChatActivity extends Activity {private Button BtnSend;private EditText InputBox;private List mData;private WeChatAdapter mAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);this.requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);final ListView mListView=(ListView)findViewById(R.id.MainList);mData=LoadData();mAdapter=new WeChatAdapter(this, mData);mListView.setAdapter(mAdapter);mListView.smoothScrollToPositionFromTop(mData.size(), 0);InputBox=(EditText)findViewById(R.id.InputBox);BtnSend=(Button)findViewById(R.id.BtnSend);BtnSend.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View view) {InputMethodManager imm=(InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);if(InputBox.getText().toString()!=""){//擷取時間Calendar c=Calendar.getInstance();StringBuilder mBuilder=new StringBuilder();mBuilder.append(Integer.toString(c.get(Calendar.YEAR))+"年");mBuilder.append(Integer.toString(c.get(Calendar.MONTH))+"月");mBuilder.append(Integer.toString(c.get(Calendar.DATE))+"日");mBuilder.append(Integer.toString(c.get(Calendar.HOUR_OF_DAY))+":");mBuilder.append(Integer.toString(c.get(Calendar.MINUTE)));//構造時間訊息WeChatMessage Message=new WeChatMessage(WeChatMessage.MessageType_Time,mBuilder.toString());mData.add(Message);//構造輸入訊息Message=new WeChatMessage(WeChatMessage.MessageType_To,InputBox.getText().toString());mData.add(Message);//構造返回訊息，如果這裡加入網路的功能，那麼這裡將變成一個網路機器人Message=new WeChatMessage(WeChatMessage.MessageType_From,"收到！");mData.add(Message);//更新資料mAdapter.Refresh();}//清空輸入框InputBox.setText("");//關閉IMEimm.hideSoftInputFromWindow(null, InputMethodManager.HIDE_IMPLICIT_ONLY);//滾動列表到當前訊息mListView.smoothScrollToPositionFromTop(mData.size(), 0);}});}private List LoadData() {List Messages=new ArrayList();WeChatMessage Message=new WeChatMessage(WeChatMessage.MessageType_Time,"2013年12月27日");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_From,"山重水複疑無路");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_To,"柳暗花明又一村");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_From,"青青子衿，悠悠我心");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_To,"但為君故，沉吟至今");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_Time,"19：25");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_From,"這是你做的Android程式嗎？");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_To,"是的，這是一個仿的聊天介面");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_From,"為什麼下面的訊息發送不了呢");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_To,"呵呵，我會告訴你那是直接拿圖片做的麼");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_From,"哦哦，呵呵，你又在偷懶了");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_To,"因為這一部分不是今天的重點啊");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_From,"好吧，可是怎麼發圖片啊");Messages.add(Message);Message=new WeChatMessage(WeChatMessage.MessageType_To,"很簡單啊，你繼續定義一種布局類型，然後再寫一個布局就可以了");Messages.add(Message);return Messages;}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}

好了，就是這樣了！