复杂ListView实现

前期，一个哥们接到了一款APP的首页需求，首页的页面相对比较复杂，由几种布局组合而成，开始，他打算用addHeader的这种方式来完成复杂布局，但是，在编码过程中遇到了诸如滑动冲突等的一系列的坑，最后不得不放弃。我抽空写了个Demo给他，由于之前接触的大部分也是单个布局，很少会有复杂布局之类的需求，但是我又不想和他一样踩坑，怎样才能既不用处理竖直方向的滑动冲突呢，所以我便开始了研究。

实现效果如下：

首先，我们来分析一下，这个复杂布局分为以下几个子布局：

第一：ViewPager

这个部分的话，之前基本上都是轮播图的位置

第二普通布局：

这个就没啥必要说了

第三：按钮布局

也没啥好说的

第四：横向ScrollView：

这里的实现是根据屏幕自适应，同时保证只会显示两个子布局

好了，下面来说说实现思路吧：

主要的实现思路是根据不同的条目位置，或者说是根据不同的条目JavaBean对应的标记来返回不同的View：

重要的两个方法：

1.

    //这个方法必须重写，它返回了有几种不同的布局    @Override    public int getViewTypeCount() {        return 4;    }

2.

  // 每个convertView都会调用此方法，获得当前应该加载的布局样式    @Override    public int getItemViewType(int position) {return type;}

至于布局文件的话就不说了，具体的实现代码如下:

package com.marsjiang.complexlistview.adapter;import android.content.Context;import android.support.v4.app.FragmentManager;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.Button;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import android.widget.Toast;import com.marsjiang.complexlistview.R;import com.marsjiang.complexlistview.model.User;import com.marsjiang.complexlistview.util.CommonUtil;import java.util.List;/** * Created by Jiang on 2017-06-29. */public class MyListViewAdapter extends BaseAdapter {    //定义常用的参数    private Context ctx;    private int resourceId;    //JavaBean    private List<User> users;    private LayoutInflater inflater;    //为三种布局定义一个标识    private final int TYPE1 = 0;    private final int TYPE2 = 1;    private final int TYPE3 = 2;    private final int TYPE4 = 3;    private FragmentManager fragmentManager;    private ViewHolder4 item4;    public MyListViewAdapter(Context context, List<User> objects, FragmentManager fragmentManager) {        this.ctx = context;        this.users = objects;        //别忘了初始化inflater        inflater = LayoutInflater.from(ctx);        this.fragmentManager = fragmentManager;    }    @Override    public int getCount() {        return users.size();    }    @Override    public User getItem(int position) {        return users.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    //这个方法必须重写，它返回了有几种不同的布局    @Override    public int getViewTypeCount() {        return 4;    }    // 每个convertView都会调用此方法，获得当前应该加载的布局样式    @Override    public int getItemViewType(int position) {        //获取当前布局的数据        User u = users.get(position);        //哪个字段不为空就说明这是哪个布局        //比如第一个布局只有item1_str这个字段，那么就判断这个字段是不是为空，        //如果不为空就表明这是第一个布局的数据        //根据字段是不是为空，判断当前应该加载的布局        Log.i("LHD", u.toString());        Log.i("LHD", "第一个返回值" + u.getItem1_str());        Log.i("LHD", "第二个返回值" + u.getItem2_str());        Log.i("LHD", "第三个返回值" + u.getItem3_str());        if (u.getItem1_str() != null) {            return TYPE1;        } else if (u.getItem2_str() != null) {            return TYPE2;        } else if (u.getItem3_str() != null) {//如果前两个字段都为空，那就一定是加载第三个布局啦。            return TYPE3;        } else {            return TYPE4;        }    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        //初始化每个holder        ViewHolder1 holder1 = null;        ViewHolder2 holder2 = null;        ViewHolder3 holder3 = null;        ViewHolder4 holder4 = null;        int type = getItemViewType(position);        if (convertView == null) {            switch (type) {                case TYPE1:                    convertView = inflater.inflate(R.layout.itemlayout1, null, false);                    holder1 = new ViewHolder1();                    holder1.item1_vp = (ViewPager) convertView.findViewById(R.id.item1_vp);                    convertView.setTag(holder1);                    break;                case TYPE2:                    convertView = inflater.inflate(R.layout.itemlayout2, null, false);                    holder2 = new ViewHolder2();                    holder2.item2_tv = (TextView) convertView.findViewById(R.id.item2_tv);                    convertView.setTag(holder2);                    break;                case TYPE3:                    convertView = inflater.inflate(R.layout.itemlayout3, null, false);                    holder3 = new ViewHolder3();                    holder3.item3_btn = (Button) convertView.findViewById(R.id.item3_btn);                    convertView.setTag(holder3);                    break;                case TYPE4:                    convertView = inflater.inflate(R.layout.horizontal_crollview_main, null, false);                    holder4 = new ViewHolder4();                    holder4.ll_main = (LinearLayout) convertView.findViewById(R.id.ll_main);                    convertView.setTag(holder4);                    break;                default:                    break;            }        } else {            switch (type) {                case TYPE1:                    holder1 = (ViewHolder1) convertView.getTag();                    break;                case TYPE2:                    holder2 = (ViewHolder2) convertView.getTag();                    break;                case TYPE3:                    holder3 = (ViewHolder3) convertView.getTag();                    break;                case TYPE4:                    holder4 = (ViewHolder4) convertView.getTag();                    break;            }        }        //为布局设置数据        switch (type) {            case TYPE1:                holder1.item1_vp.setAdapter(new ViewPagerAdapter(ctx));                break;            case TYPE2:                holder2.item2_tv.setText(users.get(position).getItem2_str());                break;            case TYPE3:                holder3.item3_btn.setText(users.get(position).getItem3_str());                break;            case TYPE4:                setItem4(holder4);                break;        }        return convertView;    }    //设置第四层布局    public void setItem4(ViewHolder4 itemHolder4) {        LinearLayout rl_layout = null;        TextView tv_title = null;        TextView tv_sub_title = null;        ImageView iv_test = null;        for (int i = 0; i < 10; i++) {            View view = LayoutInflater.from(ctx).inflate(R.layout.scroll_item_layout, null);            int screenWidth = CommonUtil.getScreenWidth(ctx);            int screenHeight = CommonUtil.getScreenHeight(ctx);            //根据屏幕宽度设定横向滑动子View的宽度            view.setLayoutParams(new LinearLayout.LayoutParams(screenWidth / 2, 120));            rl_layout = (LinearLayout) view.findViewById(R.id.rl_layout);            tv_title = (TextView) view.findViewById(R.id.tv_title);            tv_sub_title = (TextView) view.findViewById(R.id.tv_sub_title);            tv_sub_title = (TextView) view.findViewById(R.id.tv_sub_title);            iv_test = (ImageView) view.findViewById(R.id.iv_test);            tv_title.setText("主标题" + i);            tv_sub_title.setText("子标题" + i);            iv_test.setImageResource(R.mipmap.ic_launcher);            final int finalI = i;            rl_layout.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View view) {                    Toast.makeText(ctx, "view" + finalI, Toast.LENGTH_SHORT).show();                }            });            itemHolder4.ll_main.addView(view);        }    }    //为每种布局定义自己的ViewHolder    public static class ViewHolder1 {        private ViewPager item1_vp;    }    public static class ViewHolder2 {        private TextView item2_tv;    }    public static class ViewHolder3 {        private Button item3_btn;    }    public static class ViewHolder4 {        private LinearLayout ll_main;    }}

上面就是Adapter的全部代码，四种布局对应四种ViewHolder；

至于ViewPager还有HorizontalScrollView的设置大家自行查看源码！

源码如下：

ComplexListView（源码中包含SwipeRefreshLayout上拉加载，下拉刷新代码）