复杂RecyclerView的实现

之前周末的时候写过一篇复杂ListView相关的文章，但是写的不够详尽（具体到每个方法），只是个人觉得没有必要写的那么详细，因为大部分的内容对于一个拥有安卓开发开发经验的人来说跑完Demo之后都会很好理解的。

但是现如今使用ListView的部分朋友已经转到RecyclerView这一黑科技控件下了，所以我便将之前的思路试着看移植到RecyclerView之中，中间遇到了两个坑，下面来喝大家分享一下！

首先，按照规律，我们来看下效果图：

下面我们来一步步实现：

首先想到的是RecyclerView的一些设置，这些其实也没啥好说的：

看代码：

   myRecyclerViewAdapter = new MyRecyclerViewAdapter(this, users);        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);        recyclerView.setLayoutManager(linearLayoutManager);        recyclerView.setAdapter(myRecyclerViewAdapter);

主要是一些设置的东西。

下面我们来看重点：

MyRecyclerViewAdapter的实现

我们一步步进行分解

1.首先看顶部的ViewPager布局：

下面来看布局代码：

<?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.support.v4.view.ViewPager        android:id="@+id/item1_vp"        android:layout_width="match_parent"        android:layout_height="200dp"        android:text="item00"/></LinearLayout>

其实也很简单直接声明下，之后我们来看ViewPager的Adapter设定，我这里就简单地设定了Adapter：

public class ViewPagerAdapter extends PagerAdapter {    private Context context;    public ViewPagerAdapter(Context context) {        this.context = context;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        TextView textView = new TextView(context);        textView.setText(position + "");        container.addView(textView);        return textView;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView((View) object);    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public int getCount() {        return 4;    }}

也是最最基础的东西了，没啥好说的，看不懂的童鞋面壁思过去。。。

2.两个线性布局，他俩存在的意义就是为了体现咱们的思路适应多种布局：

3.横向ScrollView，其实这里也可以用横向RecyclerView，只是这里为了避免嵌套引发的问题，使用了横向ScrollVIew：

布局如下：

<?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">    <HorizontalScrollView        android:id="@+id/horizontalscrollview"        android:layout_width="match_parent"        android:layout_height="match_parent"        >        <LinearLayout            android:id="@+id/ll_main"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="horizontal">        </LinearLayout>    </HorizontalScrollView></LinearLayout>

实现动态添加的代码如下：

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

这里犹豫ScrollView只能有一个直接的子布局，所以我们在这里向LinearLayout中添加布局，然后再添加到HorizontalScrollView之中。

其次，为了保证布局中，横向滚动的ScrollView保证一屏之中只有两个，所以这里我们获取屏幕的宽度，然后设定每个子View的宽度为半个屏幕，哈哈！

下面就来到了最精彩的时候了：

我们应该怎样整合这些复杂的布局呢？

RecyclerView.Adapter<RecyclerView.ViewHolder>中给我们提供了几个非常好用的方法：

 @Override    public int getItemViewType(int position) {}
和
   //为每种布局定义自己的ViewHolder    public class ViewHolder1 extends RecyclerView.ViewHolder {        private ViewPager item1_vp;        public ViewHolder1(View itemView) {            super(itemView);            item1_vp = (ViewPager) itemView.findViewById(R.id.item1_vp);        }        public void setData() {            item1_vp.setAdapter(new ViewPagerAdapter(ctx));        }    }
下面我们来一步步解释下：

创建ViewHolder的时候会调用该方法：

    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        RecyclerView.ViewHolder holder = null;        switch (viewType) {            case TYPE1:                holder = new ViewHolder1(View.inflate(ctx, R.layout.itemlayout1, null));                break;            case TYPE2:                holder = new ViewHolder2(View.inflate(ctx, R.layout.itemlayout2, null));                break;            case TYPE3:                holder = new ViewHolder3(View.inflate(ctx, R.layout.itemlayout3, null));                break;            case TYPE4:                holder = new ViewHolder4(View.inflate(ctx, R.layout.horizontal_crollview_main, null));                break;            default:                break;        }        return holder;    }
总共有四种类型，分别标记下：

  //为三种布局定义一个标识    private final int TYPE1 = 0;    private final int TYPE2 = 1;    private final int TYPE3 = 2;    private final int TYPE4 = 3;

绑定ViewHolder的时候，调用如下方法：

    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        //由于木有相关的viewType参数，只能通过方法来获取了        int viewType = getItemViewType(position);        switch (viewType) {            case TYPE1:                ((ViewHolder1) holder).setData();                break;            case TYPE2:                ((ViewHolder2) holder).setData(position);                break;            case TYPE3:                ((ViewHolder3) holder).setData(position);                break;            case TYPE4:                ((ViewHolder4) holder).setData((ViewHolder4) holder);                break;        }    }

在这里我把设定的方法全部放到ViewHolder里面了。

这里我们需要根据返回类型的不同进行相关设定：

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

这样就可以得出了各种条目类型以及对应关系。

但是看到这里是不是有点儿乱呢，乱就对了，说明你已经在认真思考了，哈哈！

我来总结下，处理复杂RecyclerView的方法：

1.重写
 @Override    public int getItemViewType(int position) {}
非常重要，这里是进行子条目布局区分的重要方法，

2.重写

 @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {}
方法可以根据type的不同返回不同的条目布局ViewHolder

3.重写：

 @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {}
可以进行相关的绑定，也就是说白了进行初始化。
下面来贴上Adpater的完整源码：

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {    //定义常用的参数    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;    public MyRecyclerViewAdapter(Context ctx, List<User> objects) {        this.ctx = ctx;        this.users = objects;        //别忘了初始化inflater        inflater = LayoutInflater.from(ctx);    }    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        RecyclerView.ViewHolder holder = null;        switch (viewType) {            case TYPE1:                holder = new ViewHolder1(View.inflate(ctx, R.layout.itemlayout1, null));                break;            case TYPE2:                holder = new ViewHolder2(View.inflate(ctx, R.layout.itemlayout2, null));                break;            case TYPE3:                holder = new ViewHolder3(View.inflate(ctx, R.layout.itemlayout3, null));                break;            case TYPE4:                holder = new ViewHolder4(View.inflate(ctx, R.layout.horizontal_crollview_main, null));                break;            default:                break;        }        return holder;    }    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        //由于木有相关的viewType参数，只能通过方法来获取了        int viewType = getItemViewType(position);        switch (viewType) {            case TYPE1:                ((ViewHolder1) holder).setData();                break;            case TYPE2:                ((ViewHolder2) holder).setData(position);                break;            case TYPE3:                ((ViewHolder3) holder).setData(position);                break;            case TYPE4:                ((ViewHolder4) holder).setData((ViewHolder4) holder);                break;        }    }    @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 int getItemCount() {        return users.size();    }    //为每种布局定义自己的ViewHolder    public class ViewHolder1 extends RecyclerView.ViewHolder {        private ViewPager item1_vp;        public ViewHolder1(View itemView) {            super(itemView);            item1_vp = (ViewPager) itemView.findViewById(R.id.item1_vp);        }        public void setData() {            item1_vp.setAdapter(new ViewPagerAdapter(ctx));        }    }    public class ViewHolder2 extends RecyclerView.ViewHolder {        private TextView item2_tv;        public ViewHolder2(View itemView) {            super(itemView);            item2_tv = (TextView) itemView.findViewById(R.id.item2_tv);        }        public void setData(int position) {            item2_tv.setText(users.get(position).getItem2_str());        }    }    public class ViewHolder3 extends RecyclerView.ViewHolder {        private Button item3_btn;        public ViewHolder3(View itemView) {            super(itemView);            item3_btn = (Button) itemView.findViewById(R.id.item3_btn);        }        public void setData(int position) {            item3_btn.setText(users.get(position).getItem3_str());        }    }    public class ViewHolder4 extends RecyclerView.ViewHolder {        private LinearLayout ll_main;        public ViewHolder4(View itemView) {            super(itemView);            ll_main = (LinearLayout) itemView.findViewById(R.id.ll_main);        }        public void setData(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);            }        }    }}


我在编写代码中遇到的两个坑：

子布局已经设置match_parent了，但是条目布局还是包裹内容的形式展示出来了，这里做了个处理就好了，

    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="@color/colorBlack"        />
在布局的最下面加了一个View布局，撑开了整个布局条目，使之匹配父布局，目前原因未知，先这样处理了。

2.刷新控件适应的是XRefreshView，非常感谢作者啊，但是在上拉加载的时候始终会遮盖最新的条目，使之没法展示出来，这里我做了个小小的处理：

   recyclerView.scrollBy(0,30);
上滑一段距离，这样就可以展示出来了，提示用户下面还有内容可以下拉查看。嗯嗯，还行吧！

下面照旧是放出源码的时候了：

ComplexRecyclerView

谢谢！