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> 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>();

for (int i = 0; i < 8; i++) {

if (i % 2 == 0) {

HashMap map = new HashMap();

map.put(VIEW_TYPE, VIEW_TYPE_LEFT);

map.put(MESSAGE, "对方说的消息" + i);

items.add(map);

} else {

HashMap map = new HashMap();

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 map = new HashMap();

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：

android:layout_width="match_parent"

android:layout_height="match_parent" >

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" />

android:id="@+id/commentLinearLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="#e0e0e0"

android:orientation="horizontal" >

android:id="@+id/msgEditText"

android:layout_width="0dip"

android:layout_height="wrap_content"

android:layout_weight="8"

android:hint="发送消息" />

android:id="@+id/msgSend"

style="?android:attr/buttonStyleSmall"

android:layout_width="0dip"

android:layout_height="wrap_content"

android:layout_weight="2"

android:text="发送" />

ListView适配器Adapter在每一次getView时候，首先判断view的type，然后根据不同的view type加载不同的布局view。

left.xml表示是对方说的消息在ListView界面的左边：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

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" />

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" />

right.xml表示是自己说的消息，在消息聊天界面的右边：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

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" />

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" />

另外，QQ、微信这些聊天消息界面的消息背景是一个气泡，这个气泡其实是一个.9.png图片，将这个气泡的.9.png作为TextView的背景衬图衬上去即可，QQ、微信的聊天气泡.9.png不是本文要着重探讨的内容，在次不再展开叙述。

附参考文章：

《Android ListView Adapter的getItemViewType和getViewTypeCount多种布局》文章链接地址：http://blog.csdn.net/zhangphil/article/details/46984367