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();
    }
    
	@Override
	public int getCount() 
	{
		return mData.size();
	}

	@Override
	public Object getItem(int Index) 
	{
		return mData.get(Index);
	}

	@Override
	public long getItemId(int Index) 
	{
		return Index;
	}

	@Override
	public 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;
	@Override
	protected 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()
		{
			@Override
			public 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("");
				//關閉輸入法
				imm.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;
	}

	@Override
	public 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;
	}

}

好了，就是這樣了！