ListView实现聊天列表之处理不同数据项
来源:爱站网时间:2019-12-12编辑:网友分享
当我们程序员编写类似聊天的程序时,总是会遇到在底部显示数据的listview,爱站技术频道小编在这里给大家推荐ListView实现聊天列表之处理不同数据项,一起来看看吧!
当我们程序员编写类似聊天的程序时,总是会遇到在底部显示数据的listview.html" target="_blank">listview,爱站技术频道小编在这里给大家推荐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);
}
}
上文是爱站技术频道小编带来的ListView实现聊天列表之处理不同数据项,让我们一起去学习吧,学习好编程,可以在项目中实现很多我们想象不到的东西。