ListView实现聊天列表之处理不同数据项

通常我们用惯的ListView每一项的布局都是相同的，只是控件所绑定的数据不同。但单单只是如此并不能满足我们某些特殊需求，比如我们常见的QQ、微信的聊天列表，除了有左右之分外，内容更是有很大区别，有文字、语音、图片、视频等等，他们真的是ListView可以实现的吗？答案是肯定的，只要我们做一下类型区别即可。

实现效果如下所示：

大家不要在意布局，这里为了方便就随意了。大家可以看到，这里有两种布局，一种头像在左，一种头像在右，虽然这是一种简单的情况，但我们只需要了解其中的原理，再复杂的情况都可以迎刃而解。
我们只要将每一种布局划为一种类型进行区分，根据我们所区分的类型在我们自定义的Adapter中加载不同布局即可，代码如下所示：

if (bean.getType() == 1) {
      convertView = mInflater.inflate(R.layout.item_chat_left, null);
      holder.mIvAvatar = (ImageView) convertView.findViewById(R.id.iv_chatLeftItem_avatar);
      holder.mTvContent = (TextView) convertView.findViewById(R.id.tv_chatLeftItem_content);
  } else if (bean.getType() == 2) {
      convertView = mInflater.inflate(R.layout.item_chat_right, null);
      holder.mIvAvatar = (ImageView) convertView.findViewById(R.id.iv_chatRightItem_avatar);
      holder.mTvContent = (TextView) convertView.findViewById(R.id.tv_chatRightItem_content);
  }

是不是发现很简单，最后，我再将所有代码一同贴出来。

item_chat_left.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="wrap_content"
  android:padding="6dp" > 

  <ImageView
    android:id="@+id/iv_chatLeftItem_avatar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#dd00f0"
    android:src="@drawable/ic_launcher" /> 

  <TextView
    android:id="@+id/tv_chatLeftItem_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:padding="16dp"
    android:layout_toRightOf="@id/iv_chatLeftItem_avatar"
    android:background="@drawable/qfav_list_bubble_nor"
    android:layout_marginRight="64dp"
    android:gravity="center_vertical" /> 

</RelativeLayout>

item_chat_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="wrap_content"
  android:padding="6dp" > 

  <ImageView
    android:id="@+id/iv_chatRightItem_avatar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:background="#ddf000"
    android:src="@drawable/ic_launcher" /> 

  <TextView
    android:id="@+id/tv_chatRightItem_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:padding="16dp"
    android:layout_toLeftOf="@id/iv_chatRightItem_avatar"
    android:background="@drawable/skin_aio_user_bubble_pressed"
    android:layout_marginLeft="64dp"
    android:gravity="center_vertical" /> 

</RelativeLayout>

activity_chat.xml

<RelativeLayout 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"
  tools:context="${relativePackage}.${activityClass}" > 

  <ListView
    android:id="@+id/lv_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none"
    android:divider="@null"
    android:listSelector="@android:color/transparent" >
  </ListView> 

</RelativeLayout> 

ChatItemBean.java

import android.graphics.Bitmap; 

public class ChatItemBean {
  private int type;
  private String content;
  private Bitmap avatar;
  public int getType() {
    return type;
  }
  public void setType(int type) {
    this.type = type;
  }
  public String getContent() {
    return content;
  }
  public void setContent(String content) {
    this.content = content;
  }
  public Bitmap getAvatar() {
    return avatar;
  }
  public void setAvatar(Bitmap avatar) {
    this.avatar = avatar;
  }
}

ChatLVAdapter.java

import java.util.List; 

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView; 

public class ChatLVAdapter extends BaseAdapter { 

  private List<ChatItemBean> mDatas;
  private LayoutInflater mInflater; 

  public ChatLVAdapter(Context context, List<ChatItemBean> datas) {
    this.mInflater = LayoutInflater.from(context);
    this.mDatas = datas;
  } 

  @Override
  public int getCount() {
    return mDatas.size();
  } 

  @Override
  public Object getItem(int position) {
    return mDatas.get(position);
  } 

  @Override
  public long getItemId(int position) {
    return position;
  } 

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder = null;
    ChatItemBean bean = mDatas.get(position);
    if (convertView == null) {
      holder = new ViewHolder();
      if (bean.getType() == 1) {
        convertView = mInflater.inflate(R.layout.item_chat_left, null);
        holder.mIvAvatar = (ImageView) convertView.findViewById(R.id.iv_chatLeftItem_avatar);
        holder.mTvContent = (TextView) convertView.findViewById(R.id.tv_chatLeftItem_content);
      } else if (bean.getType() == 2) {
        convertView = mInflater.inflate(R.layout.item_chat_right, null);
        holder.mIvAvatar = (ImageView) convertView.findViewById(R.id.iv_chatRightItem_avatar);
        holder.mTvContent = (TextView) convertView.findViewById(R.id.tv_chatRightItem_content);
      }
      convertView.setTag(holder);
    } else { // 通过tag找到缓存的布局
      holder = (ViewHolder) convertView.getTag();
    }
    holder.mIvAvatar.setImageBitmap(bean.getAvatar());
    holder.mTvContent.setText(bean.getContent()); 

    return convertView;
  } 

  public final class ViewHolder {
    public ImageView mIvAvatar;
    public TextView mTvContent;
  }

ChatActivity.java

import java.util.ArrayList;
import java.util.List; 

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ListView; 

public class ChatActivity extends Activity {
  private ListView mLv;
  private List<ChatItemBean> mDatas ;
  private ChatLVAdapter mAdapter; 

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_chat); 

    mLv = (ListView) findViewById(R.id.lv_content); 

    initData();
    mAdapter = new ChatLVAdapter(this, mDatas);
    mLv.setAdapter(mAdapter);
  } 

  private void initData() {
    mDatas = new ArrayList<ChatItemBean>();
    ChatItemBean chat1 = new ChatItemBean();
    chat1.setType(1);
    chat1.setContent("早啊！");
    chat1.setAvatar(BitmapFactory.decodeResource(getResources(), R.drawable.ic_item1));
    mDatas.add(chat1);
    ChatItemBean chat2 = new ChatItemBean();
    chat2.setType(2);
    chat2.setContent("早！一大早找我有啥事？");
    chat2.setAvatar(BitmapFactory.decodeResource(getResources(), R.drawable.ic_item2));
    mDatas.add(chat2);
    ChatItemBean chat3 = new ChatItemBean();
    chat3.setType(1);
    chat3.setContent("没事就不能找你谈情说爱吗？也没什么事，看你有没有在撸代码。");
    chat3.setAvatar(BitmapFactory.decodeResource(getResources(), R.drawable.ic_item1));
    mDatas.add(chat3);
    ChatItemBean chat4 = new ChatItemBean();
    chat4.setType(2);
    chat4.setContent("算了吧，别找我！我害怕。");
    chat4.setAvatar(BitmapFactory.decodeResource(getResources(), R.drawable.ic_item2));
    mDatas.add(chat4);
    ChatItemBean chat5 = new ChatItemBean();
    chat5.setType(2);
    chat5.setContent("都被代码撸惨了，我哪敢一早起来找虐。");
    chat5.setAvatar(BitmapFactory.decodeResource(getResources(), R.drawable.ic_item2));
    mDatas.add(chat5);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。