RecyclerView使用GridLayoutManager实现两种item

作者:燕歆波

导读:一个页面里有标题和内容,内容是网格布局,可以理解为标题和内容作为一个item出现,一开始想用多个RecyclerView实现,可是想想就痛苦,刚想百度,就想起来RecyclerView的GridLayout可是指定item占几列或者几行。于是使用GridLyout来实现了。

[{"name":"哈哈","code":"shbx","sort":1,"childs":[{"name":"哈哈","code":"sbcx","url":"http://www.lkgjj.com/PersonalQuery.aspx","icon":"http://192.168.10.112:8082/sp_web/dsf/app/apply/dl.do?id=84358","sort":1,"uuid":"64d0f1324bc24853bb37f9ac2c1fe962","categoryCode":"shbx","id":84359}]},{"name":"哈哈","code":"cydh","sort":2,"childs":[{"name":"哈哈","code":"cydh","url":"http://m.46644.com/tel/","icon":"http://192.168.10.112:8082/sp_web/dsf/app/apply/dl.do?id=84361","sort":1,"uuid":"e9909c84d3f44767887b9b435f2321ac","categoryCode":"cydh","id":84362}]},{"name":"哈哈","code":"fczx","sort":3,"childs":[{"name":"哈哈","code":"sfcx","url":"https://m.fang.com/esf/lankao/","icon":"http://192.168.10.112:8082/sp_web/dsf/app/apply/dl.do?id=84365","sort":1,"uuid":"e11b2af94d874dd2b95deb6cb898566b","categoryCode":"fczx","id":84366}]},{"name":"哈哈","code":"cxxz","sort":4,"childs":[{"name":"哈哈","code":"hccc","url":"http://m.46644.com/train/","icon":"http://192.168.10.112:8082/sp_web/dsf/app/apply/dl.do?id=84382","sort":1,"uuid":"9355e25ced36462f8556bf1be2fe2e75","categoryCode":"cxxz","id":83752}]}]

数据基本都是这样子的；
先把第一级的category抽出来，变成和里面的子元素一样的数据结构,然后按照顺序放到一个list里面,将数据传给adapter,在adapter中，来处理category和childs的类型；

全局定义两种类型,TYPE_TITLE和TYPE_VALUE,

    /**
     * 标题
     */
    final static int TYPE_TITLE = 0;

    /**
     * 内容
     */
    final static int TYPE_VALUE = 1;

由于我们是将category重新生成了一个childs，所以有些属性它是没有的,所以在类型判断的时候，我们根据属性判断这个item是title还是value：

    @Override
    public int getItemViewType(int position) {

        ConveniceServiceBean.ChildsBean childsBean = mServiceList.get(position);
        if (childsBean.getCategoryCode() != null) {
            return TYPE_VALUE;
        } else {
            return TYPE_TITLE;
        }
    }

然后在onCreateViewHolder方法中,根据type，判断应该加载哪一个view:

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        if (viewType == TYPE_TITLE) {
            View view = View.inflate(mContext, R.layout.item_convenice_category_top_layout, null);
            return new TitleHolder(view);
        } else if (viewType == TYPE_VALUE) {
            View view = View.inflate(mContext, R.layout.item_convenice_service_layout, null);
            return new ServiceHolder(view);
        } else {
            View view = View.inflate(mContext, R.layout.item_convenice_service_layout, null);
            return new ServiceHolder(view);
        }
    }

由于有两种布局,所以我们要有两个ViewHolder:

public class ServiceHolder extends RecyclerView.ViewHolder

和

public class TitleHolder extends RecyclerView.ViewHolder

在绑定数据的时候,需要判断是哪一个ViewHolder：

 @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof ServiceHolder) {}
        else if (holder instanceof TitleHolder) {}

然后分别设置不同的数据，需要注意的一点，在一开始创建adapter的时候,我们在泛型中一般会指定viewholder的名称,如果是多重item的话,不需要指定,而是要填写原始的ViewHolder,不然，在判断的时候可能会报红:

public class ConveniceServiceAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>

最后，我们给RecyclerView设置adapter的时候，指定管理器,然后设置setSpanSizeLookup方法，在方法中判断当前是占一列还是两列:

MyGridLayoutManager myGridLayoutManager = new MyGridLayoutManager(this,2, OrientationHelper.VERTICAL,false);
        myGridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                ConveniceServiceBean.ChildsBean childsBean = childsBeanList.get(position);
                if(childsBean.getCategoryCode() == null){
                    return 2;//占两列
                }else{
                    return 1;//占一列
                }
            }
        });
        rv_service.setLayoutManager(myGridLayoutManager);
        rv_service.setAdapter(new ConveniceServiceAdapter2(this,childsBeanList));

这样就实现了上面title,下面网格的布局!