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