ListView深入学习(2)

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>