您的位置:首页 > 移动开发 > 微信开发

ListView的使用技巧集合(四)

2016-06-11 20:25 393 查看

1.聊天类型的Listview

通常我们使用的listview的每一项都是一个相同的布局,而我们熟知的QQ,微信等聊天类型的APP,在聊天界面都会至少有两种布局,即收到的的消息和发送的消息,其实这样的效果也是通过listview来实现的。要实现listview的布局呈现不同的效果,就需要对listview中的Adapter进行动手。

在定义BaseAdapter的时候,需要先去重写getView()的方法,而这个方法就是用来获取到布局的,那么只需要在获取到布局的时候是哪一种布局就可以了,所以就有以下的两种方法。

@Override
public int getViewTypeCount() {
return super.getViewTypeCount();
}

@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}


getItemViewType()方法是用来返回第几个item的布局类型的,getViewTypeCount()表示的是表示不同布局类型的总数的。结合getView()方法就可以显示不同的聊天布局了。

1.下面先定义两个不同的布局类型chat_listview_in.xml//chat_listview_out.xml.要注意的是textvew使用的背景图片是.9patch的图片。可以针对文字信息的长短进行拉伸。

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

<TextView
android:paddingLeft="10dp"
android:gravity="center"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/chatitem_out_bg"/>

<ImageView
android:id="@+id/icon_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>

</LinearLayout>


2.封装聊天的内容,便于在adapter中获取到数据

public class ChatItemBean {

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

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


3.Adapter类的封装,使用viewholder来提高listview的效率,并且在getview()方法中使用getItemViewType(position)的值进行布局类型的判断,从而实现listview中多个布局内容的添加。

public class ChatListViewAdapter extends BaseAdapter {

private Context mContext;
private List<ChatItemBean> mData;

public ChatListViewAdapter(Context context,List<ChatItemBean> data) {
this.mContext = context;
this.mData = data;
}

@Override
public int getViewTypeCount() {
return 2;   // 总共有两种vew
}

@Override
public int getItemViewType(int position) {
ChatItemBean itemBean = mData.get(position);
return itemBean.getType();  // 返回每一个item的类型
}

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

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
if (getItemViewType(position) == 0) {
viewHolder = new ViewHolder();
convertView = LayoutInflater.from(mContext).inflate(R.layout.chat_listview_in, null, false);
// 查找控件
viewHolder.icon = (ImageView) convertView.findViewById(R.id.icon_in);
viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textview);
} else if (getItemViewType(position) == 1) {
viewHolder = new ViewHolder();
convertView = LayoutInflater.from(mContext).inflate(R.layout.chat_listview_out, null, false);
// 查找控件
viewHolder.icon = (ImageView) convertView.findViewById(R.id.icon_out);
viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textview);
}
convertView.setTag(viewHolder);
} else {
// 复用
viewHolder = (ViewHolder) convertView.getTag();
}
ChatItemBean bean = mData.get(position);    //获取到数据
viewHolder.icon.setImageBitmap(bean.getIcon());
viewHolder.mTextView.setText(bean.getText());

return convertView;
}

public class ViewHolder{
public ImageView icon;
public TextView mTextView;
}
}


4测试数据的完成

private ListView mListView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chatlistview);
mListView = (ListView) findViewById(R.id.listview);

// 创建数据
ChatItemBean itemBean1 = new ChatItemBean();
itemBean1.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
itemBean1.setType(0);
itemBean1.setText("亲,在吗???");

// 创建数据
ChatItemBean itemBean2 = new ChatItemBean();
itemBean2.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
itemBean2.setType(1);
itemBean2.setText("在呢,亲(づ ̄3 ̄)づ╭❤~");

// 创建数据
ChatItemBean itemBean3 = new ChatItemBean();
itemBean3.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
itemBean3.setType(0);
itemBean3.setText("这一款还有货吗??");

// 创建数据
ChatItemBean itemBean4 = new ChatItemBean();
itemBean4.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
itemBean4.setType(1);
itemBean4.setText("有呢亲,记得好评哦亲");

// 创建数据
ChatItemBean itemBean5 = new ChatItemBean();
itemBean5.setIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher));
itemBean5.setType(0);
itemBean5.setText("好的,货到付款哦");

List<ChatItemBean> mListData = new ArrayList<>();
mListData.add(itemBean1);
mListData.add(itemBean2);
mListData.add(itemBean3);
mListData.add(itemBean4);
mListData.add(itemBean5);

mListView.setAdapter(new ChatListViewAdapter(this, mListData));

}


效果图如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  聊天 微信 listview