recyclerVeiw的学习(三)

任何事情，你想做就有方法，不想做就有借口，你有选择的自由，也有承担后果的义务。

本节给大家带来Recyclerview的多布局的实现。这种效果在开发中很常见，其实实现方法也很简单，跟listview的多布局实现方式差不多。废话不多说，先上图看看recyclerVeiw中常见的多布局开发实例。

recyvlerview多布局的实现.gif

实现要领

• setSpanSizeLookup（）方法的使用
• getItemViewType（ ）//该方法实现多布局

具体看看代码
MainActivity中的代码

public class MultiItemActivity extends AppCompatActivity {

    private RecyclerView mRecyclerview;
    private MultipleItemQuickAdapter multipleItemAdapter;
    private GridLayoutManager manager;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mult);
        mRecyclerview = (RecyclerView) findViewById(R.id.recyclerview);

        final List data = getMultipleItemData();

         manager = new GridLayoutManager(this, 2);
        mRecyclerview.setLayoutManager(manager);
        multipleItemAdapter = new MultipleItemQuickAdapter(this, data);
       // 该方法主要是决定每个item的跨度
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return data.get(position).getSpanSize();
            }

        });
        mRecyclerview.setAdapter(multipleItemAdapter);
//        mRecyclerview.addOnScrollListener(listener);

    }

    public static List getMultipleItemData() {
        List list = new ArrayList<>();
        for (int i = 0; i <= 4; i++) {
            list.add(new MultipleItem(MultipleItem.TEXT, MultipleItem.IMG, "横排", R.mipmap.apple));
            list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.IMG, "hellow", R.mipmap.apple));
            list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.IMG, "nihao", R.mipmap.apple));
            list.add(new MultipleItem(MultipleItem.TEXT, MultipleItem.IMG, "竖排", R.mipmap.apple));
            list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.TEXT, "hellow", R.mipmap.apple));
            list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.TEXT, "nihao", R.mipmap.apple));
        }

        return list;
    }
}

接下来看看adapter的实现吧

public class MultipleItemQuickAdapter extends RecyclerView.Adapter{
    public Context mContext;
    List data;
    private LayoutInflater mInflater;

    public MultipleItemQuickAdapter(Context mContext, List datas) {
        this.mContext = mContext;
        this.data = datas;
        mInflater = LayoutInflater.from(mContext);
    }

    @Override
    public int getItemViewType(int position) {
        if (data.get(position).getItemType() == MultipleItem.IMG) {
            return MultipleItem.IMG;
        } else if(data.get(position).getItemType()==MultipleItem.IMG_TEXT){
            return MultipleItem.IMG_TEXT;
        }else {
            return MultipleItem.TEXT;
        }
    }
    @Override
    public MyViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
//        if (viewType==MultipleItem.IMG){
//            return new MyViewHolders(mInflater.inflate(R.layout.item_img_text,parent,false),viewType);
//        }else
      if (viewType==MultipleItem.IMG_TEXT){
            return new MyViewHolders(mInflater.inflate(R.layout.item_img_text,parent,false),viewType);
        }else {
            return new MyViewHolders(mInflater.inflate(R.layout.item_channel_title,parent,false),viewType);
        }
    }

    @Override
    public void onBindViewHolder(MyViewHolders holder, int position) {
        switch (holder.viewType){
            case MultipleItem.TEXT:
                holder.tvTitle.setText(data.get(position).getContent());
                break;
            case MultipleItem.IMG_TEXT:
                holder.fruit_name.setText(data.get(position).getContent());
                Glide.with(mContext).load(data.get(position).getImgsource()).into(holder.fruit_image);
                break;
        }

    }

    @Override
    public int getItemCount() {
        return data.size();
    }


    class MyViewHolders extends RecyclerView.ViewHolder{
        int viewType;
        TextView tvTitle;
        TextView fruit_name;
        ImageView fruit_image;

        public MyViewHolders(View itemView,int viewtype) {
            super(itemView);
            this.viewType=viewtype;
            switch (viewtype){
                case MultipleItem.TEXT:
                    tvTitle= (TextView) itemView.findViewById(R.id.tvTitle);
                    break;
                case MultipleItem.IMG_TEXT:
                    fruit_name= (TextView) itemView.findViewById(R.id.fruit_name);
                    fruit_image= (ImageView) itemView.findViewById(R.id.fruit_image);
                    break;
            }
        }
    }


}

j接下来提供两个布局的实现

• item_img_text

布局

• item_channel_title

注意

通过以上的实现就能实现：这里要说一下这个数据格式。因为这里处理是将标题也作为一个item的，只是这个标题的item的type跟正常的数据的item类型不同。
如果后台的的格式是如下的格式

{
  "code": 0,
  "msg": "请求成功",
  "data": [
    {
      "groupName": "车型",
      "groupDesc": "无",
      "groupData": [
        {
          "childName": "不限"
        },
        {
          "childName": "微型车"
        },
        {
          "childName": "小型车"
        },
        {
          "childName": "紧凑车"
        },
        {
          "childName": "中型车"
        },
        {
          "childName": "跑车"
        }
      ]
    },
    {
      "groupName": "车龄",
      "groupDesc": "/单位：年",
      "groupData": [
        {
          "childName": "不限"
        },
        {
          "childName": "1年内"
        },
        {
          "childName": "3年内"
        },
        {
          "childName": "5年内"
        },
        {
          "childName": "5年以上"
        }
      ]
    },
    {
      "groupName": "里程",
      "groupDesc": "/单位：万公里",
      "groupData": [
        {
          "childName": "不限"
        },
        {
          "childName": "1万公里内"
        },
        {
          "childName": "3万公里内"
        },
        {
          "childName": "5万公里内"
        },
        {
          "childName": "5万公里以上"
        }
      ]
    }
  ]
}

而要实现如下图的样式

s01.jpg

这里就要将group跟child的数据转换到同一个list中,同时给这两种数据加不同的type，即可实现上图的效果。

具体这种数据的参考代码

https://github.com/fishyer/GroupRecyclerView/blob/master/image/s01.jpg