Android开发学习之仿微信聊天界面的实现

            既然在上一篇文章中，我们提到了微信，那么在今天的文章中，我们继续来说微信吧。今天想和大家分享的是关于微信的聊天界面。

           一、实现原理

     继承BaseAdapter创建一个自定义适配器，然后根据消息的来源，即消息是由对方发出还是自己发出，再getView()方法中返回不同的布局，从而实现聊天界面。

       二、需求分析

     在微信的聊天界面中，存在三种元素，分别是消息发送时间、发送消息布局、接受消息布局，因此我们需要以此来构建相应的布局。

        三、具体实现

        首先我们来分别创建这三种布局：

        消息发送时间布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <TextView
        android:id="@+id/Time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="3dp"
        android:background="@drawable/time_bg"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textIsSelectable="false"
        android:textSize="14sp" />
</RelativeLayout>

        发送消息布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/Header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_margin="3dp"
        android:contentDescription="@string/Description"
        android:src="@drawable/header" />
    <TextView
        android:id="@+id/To_Content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:layout_toLeftOf="@+id/Header"
        android:background="@drawable/to_bg"
        android:contentDescription="@string/Description"
        android:textIsSelectable="false"
        android:gravity="center" />
</RelativeLayout>

        接受消息布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/Header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:contentDescription="@string/Description"
        android:src="@drawable/header" />
    <TextView
        android:id="@+id/From_Content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:layout_toRightOf="@+id/Header"
        android:background="@drawable/from_bg"
        android:gravity="center"
        android:textIsSelectable="false" />
</RelativeLayout>

              接下来，我们定义一个实体类，用于描述消息实体

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<WeChatMessage> mData;
	
    public WeChatAdapter(Context context,List<WeChatMessage> 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;
	}

}

              四 、主界面实现

         界面布局代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".WeChatActivity" >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/tab_bg" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/Title"
            android:textColor="#ffffff"
            android:textSize="20sp" />
    </RelativeLayout>
    <ListView
        android:id="@+id/MainList"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:divider="#ffffff"
        android:layout_weight="0.25" >
    </ListView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/tab_bg"
        android:gravity="bottom" >
        <EditText
            android:id="@+id/InputBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:textColor="#ffffff"
            android:inputType="text" >
            <requestFocus />
        </EditText>
        <Button
            android:id="@+id/BtnSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/BtnSend" 
            android:textColor="#ffffff"/>

    </LinearLayout>
</LinearLayout>

            后台逻辑代码

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<WeChatMessage> 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<WeChatMessage> LoadData() 
	{
		List<WeChatMessage> Messages=new ArrayList<WeChatMessage>();
		
		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;
	}

}

          好了，就是这样了！