既然在上一篇文章中,我们提到了微信,那么在今天的文章中,我们继续来说微信吧。今天想和大家分享的是关于微信的聊天界面。
一、实现原理
继承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;
}
}
好了,就是这样了!