RecycleView实现多布局可展开列表

2018-06-25  本文已影响0人  912b7e5babf9

前言

盗用图一张

今天就来讲讲这种效果的实现逻辑吧。

二.实现原理

2.1 首先看看要展示的原始数据结构

结合上面的效果图,我们需要将Data数据源“切割”成4部分,header,productGroup,product和footer,其中product作为一个list展示,需要满足即可展示也可隐藏的功能。

接下来,我们要实现的整体逻辑就是将一个data数据拆解成四种不同类型的数据,然后依次塞到RecycleView对应的List中平铺展示。这里,我们需要定义数据类型

2.2 定义不同的数据类型

既然将数据分成四个不同的数据类型,又需要统一展示在RecycleView的list中,那么这四个不同的数据类型需要继承一个统一的数据类型ItemData

2.3 定义统一数据类型类ItemData

这里我们统一定义了一个itemType,用于给数据进行分类,然后加了一个itemId,用于给每个数据设置一个position

接下来,看看 header,productGroup,product和footer这四类数据,其中header和footer无非是显示一个字符串,这个就简单的展示下header对应的数据data吧

2.4 HeaderData数据样例

FooterData和HeaderData大同小异,此处省略,然后看productGroup和product,这两个有些特殊,类似一个二级列表,而productGroup对应的是二级列表中的Parent,product对应的是二级列表中的child。

下面看看productGroup对应的数据结构---ProductGroupData

2.5 ProductGroupData代码

ProductGroupData最主要的是标志位expand,用于记录其二级列表是否为展开状态,然后一个 List productList 用来存放二级数据

然后是ProductData数据结构

2.5 ProductData代码

ProductData中主要包含一个subItemId,这是用来标记二级数据展示时的childPosition

至此数据结构创建完毕

三. 数据拆分整合

3.1 模拟一个数据源

Data数据结构前面已经介绍过,下面需要将数据源整合成我们展示时的数据格式

3.2 整个整合流程代码

然后具体的大家要对HeaderData,ProductGroupData和FooterData进行处理,其中ProductGroupData里面包含ProductData的列表数据,这些数据有一个共同点,就是需要设置itemType和itemId,itemType用于设置数据类型,itemId用来存放数据下标(即position),当然大家更需要处理好 ProductGroupData与ProductData中的数据关联。

ok,数据整合完毕后,就是adapter的处理了,所有数据放到RecyclerView.Adapter中展示,因为所有数据(包括HeaderData,ProductGroupData,FooterData以及ProductData的list)均会平铺展示在RecycleView中,于是我们需要重写以下方法:

getItemCount  ----- 重新计算data的所有数目getItemViewType(intposition)  ---- 获取每项的内容onCreateViewHolder(ViewGroup parent,intviewType)  ---- 每项根据类型定义不同ui布局onBindViewHolder(RecyclerView.ViewHolder holder,intposition) --- 不同数据类型的对应逻辑处理

在adapter声明里,我们会定义两个数据list

protectedList mData;//传入的dataprotectedListmAllOrders=newArrayList<>();//展示的data

mData用于从activity中传入数据,此时的数据结构为

  ----HeaderData

  ----ProductGroupData

        ----ProductData1

        ----ProductData2

        ----........

  ----FooterData

mAllOrders是最终展示数据,其数据结构为

  ----HeaderData

  ----ProductGroupData

  ----ProductData1

  ----ProductData2

  ----........

  ----FooterData

mData与mAllOrders最大区别在于mData中包含有二级数据结构,而mAllOrders中的数据就一层,统一平铺展示。

getItemCount既承载着将mData数据结构转化成mAllOrders的数据结构,也需要计算所有数据的个数

3.2 getItemViewType(int position)获取每项的内容

这个比较简单

@OverridepublicintgetItemViewType(intposition){returnmAllOrders.get(position).getItemType();    }

然后是onCreateViewHolder(ViewGroup parent, int viewType)

3.3 onCreateViewHolder示例代码

3.4 onBindViewHolder不同数据处理逻辑

最后在bindHeader,bindProductGroup,bindProduct,bindFooter中对各数据的展示和逻辑做处理。

这里需要提醒的是bindProductGroup(holder,obj,position);方法,因为当中涉及到点击展开ProductData集合,再点击收起ProductData集合的操作,需要用到RecycleView的两个更新方法:

//展开时调用notifyItemRangeInserted(intpositionStart,intitemCount)//收起时调用notifyItemRangeRemoved(intpositionStart,intitemCount)

3.5 点击展开,点击收起ProductData列表的逻辑

处理此逻辑示例代码如下:

//点击事件

一切就绪以后,在MainActivity中调用

3.6 全部中示例代码

R.layout.item_header

R.layout.item_product_group

R.layout.item_product

R.layout.item_footer

ok,今天关于“RecycleView实现多布局可展开列表”的原理解析及实现过程就讲到这里了,谢谢咯。

http://www.kekedj.com/djHome_10.html  我的作品

我的音乐播放器

上一篇下一篇

猜你喜欢

热点阅读