Android QQ、微信聊天消息界面设计原理与实现
Android QQ、微信聊天消息界面设计原理与实现
原理：Android平台上，典型的以腾讯的QQ、微信这些聊天消息界面通常可以采用ListView设计与实现，需要使用ListView 适配器Adapter的getItemViewType()和getViewTypeCount()。
在ListView的适配器中，每一次getView时候，首先要判断view的类型getItemViewType()，然后根据不同的类型加载不同的布局view。
至于底部发送消息的窗口，每次发送完消息，需要将ListView滚动到底部，以免输入键盘遮挡住数据而致使用户看不到刚刚发送的消息。
现在给出一个Android平台上简单的设计与实现方案。效果如图所示：
测试的主Activity MainActivity.java：
package zhangphil.chat;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ContextMenu.ContextMenuInfo;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends Activity {
private final int VIEW_TYPE = 0xb01;
private final int VIEW_TYPE_LEFT = -10;
private final int VIEW_TYPE_RIGHT = -11;
private final int MESSAGE = 0xb02;
private ArrayList<HashMap<Integer, Object>> items = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ListView listView = (ListView) findViewById(android.R.id.list);
items = new ArrayList<HashMap<Integer, Object>>();
for (int i = 0; i < 8; i++) {
if (i % 2 == 0) {
HashMap<Integer, Object> map = new HashMap<Integer, Object>();
map.put(VIEW_TYPE, VIEW_TYPE_LEFT);
map.put(MESSAGE, "对方说的消息" + i);
items.add(map);
} else {
HashMap<Integer, Object> map = new HashMap<Integer, Object>();
map.put(VIEW_TYPE, VIEW_TYPE_RIGHT);
map.put(MESSAGE, "我说的消息" + i);
items.add(map);
}
}
final MyAdapter adapter = new MyAdapter(this, -1);
listView.setAdapter(adapter);
final EditText msgEditText = (EditText) findViewById(R.id.msgEditText);
Button button = (Button) findViewById(R.id.msgSend);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String msg = msgEditText.getText() + "";
HashMap<Integer, Object> map = new HashMap<Integer, Object>();
map.put(VIEW_TYPE, VIEW_TYPE_RIGHT);
map.put(MESSAGE, msg);
items.add(map);
adapter.notifyDataSetChanged();
// 发送后清空输入框内容
msgEditText.setText(null);
// 输入框发送消息后将ListView滚动到最底部
listView.setSelection(ListView.FOCUS_DOWN);
}
});
}
private class MyAdapter extends ArrayAdapter {
private LayoutInflater layoutInflater;
public MyAdapter(Context context, int resource) {
super(context, resource);
layoutInflater = LayoutInflater.from(context);
}
@Override
public View getView(int pos, View convertView, ViewGroup parent) {
int type = getItemViewType(pos);
String msg = getItem(pos);
switch (type) {
case VIEW_TYPE_LEFT:
convertView = layoutInflater.inflate(R.layout.left, null);
TextView textLeft = (TextView) convertView.findViewById(R.id.textView);
textLeft.setText(msg);
break;
case VIEW_TYPE_RIGHT:
convertView = layoutInflater.inflate(R.layout.right, null);
TextView textRight = (TextView) convertView.findViewById(R.id.textView);
textRight.setText(msg);
break;
}
return convertView;
}
@Override
public String getItem(int pos) {
String s = items.get(pos).get(MESSAGE) + "";
return s;
}
@Override
public int getCount() {
return items.size();
}
@Override
public int getItemViewType(int pos) {
int type = (Integer) items.get(pos).get(VIEW_TYPE);
return type;
}
@Override
public int getViewTypeCount() {
return 2;
}
}
}
MainActivity.java需要的布局文件activity_main.xml：
<?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" >
<ListView
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/commentLinearLayout"
android:layout_alignParentTop="true"
android:divider="@android:color/transparent"
android:dividerHeight="15dip"
android:scrollbars="none" />
<LinearLayout
android:id="@+id/commentLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#e0e0e0"
android:orientation="horizontal" >
<EditText
android:id="@+id/msgEditText"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="8"
android:hint="发送消息" />
<Button
android:id="@+id/msgSend"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="发送" />
</LinearLayout>
</RelativeLayout>
ListView适配器Adapter在每一次getView时候，首先判断view的type，然后根据不同的view type加载不同的布局view。
left.xml表示是对方说的消息在ListView界面的左边：
<?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" >
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:singleLine="false"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/imageView"
android:background="#ff5252"
android:text="left" />
</RelativeLayout>
right.xml表示是自己说的消息，在消息聊天界面的右边：
<?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" >
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/imageView"
android:background="#2196f3"
android:singleLine="false"
android:text="right" />
</RelativeLayout>
另外，QQ、微信这些聊天消息界面的消息背景是一个气泡，这个气泡其实是一个.9.png图片，将这个气泡的.9.png作为TextView的背景衬图衬上去即可，QQ、微信的聊天气泡.9.png不是本文要着重探讨的内容，在次不再展开叙述。
附参考文章：
《Android ListView Adapter的getItemViewType和getViewTypeCount多种布局》文章链接地址：http://blog.csdn.net/zhangphil/article/details/46984367
《Android基于PinnedSectionListView实现联系人通讯录》文章链接地址：http://blog.csdn.net/zhangphil/article/details/47271741