ListView實現聊天列表之處理不同數據項

2019-10-22 18:24:13

字體：大中小

來源：轉載

供稿：網友

通常我們用慣的ListView每一項的布局都是相同的，只是控件所綁定的數據不同。但單單只是如此并不能滿足我們某些特殊需求，比如我們常見的QQ、微信的聊天列表，除了有左右之分外，內容更是有很大區別，有文字、語音、圖片、視頻等等，他們真的是ListView可以實現的嗎？答案是肯定的，只要我們做一下類型區別即可。

實現效果如下所示：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android仿微信底部菜單欄效果

下一篇：Android實現消息提醒小紅點效果