ListView显示多种布局样式

有时候我们可能需要在ListView中展示多种布局样式，比如qq中的聊天界面，会展示出至少两种布局，一个是接收到的消息，另一个则是发送出去的消息。这时候我们就可以使用BaseApdater为我们提供的方法来实现我们所需要的用来实现多种布局样式的ListView。

先看一下运行效果：

在定义BaseAdapter的时候，我们需要重写它的getView()方法，这个方法就是用来获取布局的，那么我们只需要在获取布局的时候判断一下该获取那种布局就可以了。这个时候我们可以通过下面的两个方法来实现我们所需要的效果：

• getItemViewType(int position) ：用来返回当前position对应的布局样式的类型

• getViewTypeCount() ：返回当前总共的布局种类

下面通过代码具体看一下实现方式：

项目结构：

这里我们定义了两种不同的布局样式，用于显示在ListView当中，具体的样式如上面的运行效果中所展示，就不再贴出布局了，代码比较简单。

MeiZi.java

/**
 * Created by wangke on 17-4-2.
 */

public class MeiZi {

    private String name;
    private String imageUri;
    private int type;

    public MeiZi(String name, String imageUri,int type) {
        this.name = name;
        this.imageUri = imageUri;
        this.type = type;
    }
    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getImageUri() {
        return imageUri;
    }

    public void setImageUri(String imageUri) {
        this.imageUri = imageUri;
    }


}

我们看一下这个Bean对象，有的哥们可能会问了，为什么是这个Bean对象为什么叫MeiZi，哈哈，偷了下懒，用了之前的加载图片的小栗子来继续今天要实现的功能。上面定义了 type 来标记要实例化那个布局。我们可以在实例化对象的时候，根据自己的需要显示的布局设定自己约定好的值给type，后面再在BaseAdapter中进行判断就可以了。

下面来看ListViewAdapter中的代码：

/**
 * Created by wangke on 17-4-2.
 */

public class ListViewAdapter extends BaseAdapter {

    private Context context;
    private List<MeiZi> meiZiList;

    public ListViewAdapter(Context context, List<MeiZi> meiZiList) {
        this.context = context;
        this.meiZiList = meiZiList;
    }

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


    /**
     * 用来返回第position个条目是何种类型
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        return meiZiList.get(position).getType();
    }


    /**
     * 用来返回不同布局的总数
     * @return
     */
    @Override
    public int getViewTypeCount() {

        return 2;
    }

    @Override
    public Object getItem(int position) {
        return meiZiList.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) {

                convertView = View.inflate(context, R.layout.item_listview_meizi, null);
                viewHolder = new ViewHolder();

                viewHolder.imageView = (MyImageView) convertView.findViewById(R.id.imageView_meizi);
                viewHolder.textView = (TextView) convertView.findViewById(R.id.tv_name);

                convertView.setTag(viewHolder);

            }else if(getItemViewType(position) == 1){


                convertView = View.inflate(context, R.layout.item_listview_hanzi, null);
                viewHolder = new ViewHolder();

                viewHolder.imageView = (MyImageView) convertView.findViewById(R.id.imageView_hanzi);
                viewHolder.textView = (TextView) convertView.findViewById(R.id.tv_name_hanzi);

                convertView.setTag(viewHolder);

            }


        }else {


            viewHolder = (ViewHolder) convertView.getTag();

        }

        viewHolder.textView.setText(meiZiList.get(position).getName());

        viewHolder.imageView.loadImageFromUrl(meiZiList.get(position).getImageUri());



        return convertView;
    }

    static class ViewHolder{

        MyImageView imageView;
        TextView textView;


    }

}

我们在getView()方法中调用已经实现过的getItemViewType(position)方法来决定具体要实例化的是哪个布局。

所以我们在模拟数据的时候，如果要显示HanZi的话就在创建对象的时候指定type为1，显示MeiZi的话就指定为0当然要指定什么值完全由你自己决定。

写到这里，ListView显示多种布局样式的案例就完成了，是不是很简单呢;-）

今天是清明节假期的第二天，决定下午去踩单车，感受一下春天的气息。不由的回忆起去年清明节的时候……难免有点伤感。。。