ListView使用技巧（四）：聊天ListView

我们熟知的QQ、微信聊天界面：



我们这么来分析：

整个聊天记录是一个listview，分为两种布局：发送的消息和收到的消息。

这里就是与平时使用的ListView有一个最大的不同：拥有两个不同的布局，在Adapter上下功夫！

BaseAdapter中提供了两个方法：

@Override
public int getItemViewType(int position)
{
return type;
}
@Override
public int getViewTypeCount(){
return number;
}

getItemViewType()方法用来返回第position个item是何种类型。

getViewTypeCount()方法用来返回不同布局的总数。

通过上述两个方法，结合getView()方法，可以完成上述聊天布局了。

首先是：发送消息的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >

<TextView
android:id="@+id/tv_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />

<ImageView
android:id="@+id/iv_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/message" />
</LinearLayout>

</LinearLayout>

接收消息的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/iv_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/call" />

<TextView
android:id="@+id/tv_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />

</LinearLayout>

封装一个Bean来保存聊天信息：

public class ChatItemListViewBean {

public int getType() {
return type;
}

public void setType(int type) {
this.type = type;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public Bitmap getIcon() {
return icon;
}

public void setIcon(Bitmap icon) {
this.icon = icon;
}

private int type;
private String text;
private Bitmap icon;

public ChatItemListViewBean(){

}

}

接下来就是最终的BaseAdapter的方法了：同样采用ViewHolder模式提高效率：

public class ChatItemListViewAdapter extends BaseAdapter {

private List<ChatItemListViewBean> mData;
private LayoutInflater mInflater;

public ChatItemListViewAdapter(Context context, List<ChatItemListViewBean> data)
{
this.mData = data;
mInflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mData.size();
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return mData.get(position);
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public int getItemViewType(int position)
{
ChatItemListViewBean bean = mData.get(position);
return bean.getType();
}
@Override
public int getViewTypeCount(){
return 2;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ViewHolder holder;
if(convertView == null)
{
if(getItemViewType(position) == 0){
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.chat_item_itemin, null);
holder.icon = (ImageView) convertView.findViewById(R.id.iv_in);
holder.text = (TextView) convertView.findViewById(R.id.tv_in);

}else {
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.chat_item_itemout, null);
holder.icon = (ImageView) convertView.findViewById(R.id.iv_out);
holder.text = (TextView) convertView.findViewById(R.id.tv_out);
}
convertView.setTag(holder);
}else {
holder = (ViewHolder) convertView.getTag();
}
holder.icon.setImageBitmap(mData.get(position).getIcon());
holder.text.setText(mData.get(position).getText());
return convertView;
}

public final class ViewHolder{
public ImageView icon;
public TextView text;
}
}

下面的程序是测试代码：

public class ChatItemListViewTest extends Activity {

private ListView mListView;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.chat_item_main);

mListView = (ListView) findViewById(R.id.listView_chat);
ChatItemListViewBean bean1 = new ChatItemListViewBean();
bean1.setType(0);
bean1.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.call));
bean1.setText("Hello how are you?");

ChatItemListViewBean bean2 = new ChatItemListViewBean();
bean2.setType(1);
bean2.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.message));
bean2.setText("Fine thank you, and you?");

ChatItemListViewBean bean3 = new ChatItemListViewBean();
bean3.setType(0);
bean3.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.call));
bean3.setText("I am fine too");

ChatItemListViewBean bean4 = new ChatItemListViewBean();
bean4.setType(1);
bean4.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.message));
bean4.setText("Bye bye");

ChatItemListViewBean bean5 = new ChatItemListViewBean();
bean5.setType(0);
bean5.setIcon(BitmapFactory.decodeResource(getResources(), R.drawable.call));
bean5.setText("See you!");

List<ChatItemListViewBean> data = new ArrayList<ChatItemListViewBean>();
data.add(bean1);
data.add(bean2);
data.add(bean3);
data.add(bean4);
data.add(bean5);

mListView.setAdapter(new ChatItemListViewAdapter(this, data));
}

}

运行结果为：