ListView多种布局
效果图如下:
方法的核心在于adapter里面的getView()方法,与之配套的还有另外两个方法,分别是getItemViewType()和getViewTypeCount()。
1、首先是int getItemViewType().
从名字可以看出来,返回的是你要表现的这个单项的类型。类型是什么呢,其实是自己定义的:比如图片在左,文本框在右和图片在右,文本框在左。
代码如下:
private List<ChatListBean> mData;
@Override
public int getItemViewType(int position) {
// TODO Auto-generated method stub
return (mData.get(position)).getType();
}
这里mData被重新定义了一下,和上一篇有点不一样,里面装的是自己写的一个Bean。
这个类里面其实就定义了一下基本属性而已:
package com.example.listview_optimize;
import android.graphics.Bitmap;
public class ChatListBean {
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;
}
}
2、int getViewTypeCount()方法
这个简单了,返回一个整型——你有几种布局
@Override
public int getViewTypeCount() {
// TODO Auto-generated method stub
return 2;
}
在效果图里面可以看到,只有两种类型,所以直接返回2.
3、getView()方法
之前getView是直接让convertView对一个固定的layout进行转换。
这里相比之前就是多了一个分支而已 : 根据第一个方法也就是getItemViewType()的返回值,对不同的布局文件进行转换。
//之前的转换
//convertView=LayoutInflater.from(mContext).inflate(R.layout.list_item, null);
//holder.img=(ImageView)convertView.findViewById(R.id.list_img);
//holder.title=(TextView)convertView.findViewById(R.id.list_text);
//现在的转换
if(getItemViewType(position)==0){
convertView=LayoutInflater.from(mContext).inflate(R.layout.chat_in, null);
holder.img=(ImageView)convertView.findViewById(R.id.img_in);
holder.title=(TextView)convertView.findViewById(R.id.text_in);
}
if(getItemViewType(position)==1){
convertView=LayoutInflater.from(mContext).inflate(R.layout.chat_out, null);
holder.img=(ImageView)convertView.findViewById(R.id.img_out);
holder.title=(TextView)convertView.findViewById(R.id.text_out);
Log.i("qx", "position:"+position+" type:"+getItemViewType(position));
}
这样一来,就可以在同一个listView里面有两种不同的布局了。
4、具体实现
在MainActivity里面,给adapter传入一个它需要的data就好,代码如下:
String[] words=new String[]{"hello","hi","看电影不","不看","哦"};
mData = new ArrayList<ChatListBean>();
for (int i = 0; i < words.length; i++) {
ChatListBean bean=new ChatListBean();
bean.setType(i%2);//交叉设置type,模拟一进一出
bean.setText(words[i]);
mData.add(bean);
}
final CsNewBaseAdapter adapter = new CsNewBaseAdapter(mData,
getApplicationContext());
listView = (ListView) findViewById(R.id.listView);
listView.setAdapter(adapter);
这里我只贴了主要代码,看的清楚一点。
哦,差点忘了布局文件,我贴其中一个的好了,就是头像在左,文字在右的:
<?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/img_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/text_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="hello"
android:gravity="left"
android:textSize="35sp" />
</LinearLayout>