在移动端应用程序中，列表属于最基本且重要的元素之一。通常会使用RecycleView控件来实现列表的展示，而且RecycleView并不仅仅是一个简单的列表框架，它还提供了许多令人惊喜的特性，例如增加动画效果、下拉刷新、懒加载和分组展示等等。
本文将介绍如何使用RecycleView的分组展示功能。在Android中，我们平常使用的ListView控件是支持分组的，然而RecycleView却没有内置的支持方式。幸运的是Google设计出了Material Design，并为它的RecyclerView提供了一个完美的解决方案。
什么是 RecycleView 分组？
在RecycleView控件实现分组的基本概念是，将数据按照特定的条件分为若干个部分，用不同的ViewHolder展示不同的分组数据，每个分组开头可以添加分组标题或分组头部。这种展示方式在复杂显示数据时非常有用。例如在一个电子商务应用程序中，我们需要按照商品品牌或类别对商品数据进行归类，然后通过展示商品名称和价格等信息来显示列表。
如何使用 RecycleView 分组？
在RecycleView中实现分组展示可以通过为RecyclerView设置正确的LayoutManager和对Adapter做出一些更改来实现。LayoutManager是集合RecycleView子项的容器，在LayoutManager中可以选择线性布局、网格布局，以及瀑布流模式等多种方式来展示数据。目前常用到的是线性布局和网格布局。
要实现 RecycleView 的分组，我们需要使用StaggeredGridLayoutManager 或 GridLayoutManager，这两种都是继承于 LinearLayoutManager 的，但比 LinearLayoutManager 更强大。
样式效果：
在本示例中，我们使用GridLayoutManager实现物品列表的展示，其中包含了三种视图类型：头部、Banner、内容项。
实现此样式，我们需要完成以下步骤：
1、准备数据集合
-- -------------------- ---- -------
--------
--- -------- - -------------------------
--- -- -- - ----- -- ----------
--- ---- - -------------------- ----------- -------------
-- -- - - -- -- --- -----------------------
-------------
----------
------ - ----
-
-
-
-
------------------
-
TitleItem进行了分类(或分组)，TextItem是分类下的节点，每个TitleItem都代表一组TextItem的类别，在程序中，我们需要先将数据集合分为若干组。分组的目的是分组头部的实现调用，需要新建一个 TitleItem 实例对象，并设置ItemType.TITLE 引用头部类型。标题项本身也是RecyclerView的一个普通子项，其样式和组内容格式一样，也可以实现很多自定义效果。
2、定义并实例化ViewHolder
-- -------------------- ---- -------
----------------- ------
----- ------------------------- ----- - ---------------------------------
----- ------------------------ ----- - ---------------------------------
----- -------------------------- ----- - ---------------------------------
-------- --------
--- -------------------------- ---------- --------- ----- ----------------------- -
--- ------- - --------------
--- -------- - ----------------------------
------ ---- ---------- -
-------------------- -- -
--- ---- - ------------------------------------------ ------- ------
---------------------
-
------------------- -- -
--- ---- - ----------------------------------------- ------- ------
--------------------
-
---- -- -
--- ---- - ------------------------------------------- ------- ------
----------------------
-
-
-ViewHolder是RecyclerView的核心部分之一，它被用于存储RecyclerView中的子项，在此步骤中，需要定义每一种子项的ViewHolder类，然后新建并实例化。
TitleViewHolder：对应 TitleItem 类或 Titel 类型的数据项，使用自定义视图。
TextViewHolder：对应 TextItem 类或 Text 类型的数据项，使用自定义视图。
BannerViewHolder：对应 BannerItem 类或 Banner 类型的数据项，使用自定义视图。
3、绑定 ViewHolder 和 数据
-- -------------------- ---- -------
-------------------
--- ---------------------------- ------------------------ ----- --------- -
---- ------ -
-- -------- -- -
--- ------ - ---------- -- --------------
-------------------- - ---------
------------------------------------------------
--------------------------------------------
-
-- --------- -- -
--- ------ - ---------- -- ---------------
-------------------- - ----------
-
-- ---------- -- -
--- ------ - ---------- -- ----------------
------------
--- ------ - -------------
----------------------------------------------------
--------------------------------------------------
-----------------------------
--------------
-
-
-数据项提供欸在指定ViewHolder中展示自己的方式通过 onBindViewHolder(holder,item) 实现。在上述代码中，我们为每个ViewHolder绑定了对应类型的数据项。通过BindingHolder()方法连接实体ViewHolder数据项，复用实现更高效。
4、绑定指定子项需要使用的ViewHolder类型
//指定item对应的viewtype
override fun getItemViewType(position: Int): Int {
return list[position].type.value
}指定每个子项需要使用的 ViewHolder 或item 的类型，以便 RecyclerView 在显示列表时知道使用哪种类型的 ViewHolder。可以在上述代码中看到，在Adapter中实现获取指定位置对应的子项类型。
5、初始化并设置LayoutManager
-- -------------------- ---- -------
-----------------------------------
-------------------------- - -------------------------- -----------
---------------------------- - ------ - ---------------------------------- -
-------- --- --------------------- ----- --- -
------ ---- ----------------------------------- -
------------------- -- -
--------------------- -- ----------
---- -- ----------
-
-
-在LayoutManager中可以选择线性布局和网格布局的多种方式来展示衣服给数据。
StaggeredGridLayoutManager就是加强版的 GridLayoutManager，它的展示方式就非常独特，而实现方式与 GridLayoutManager 类似。
GridLayoutManager 能比LinearLayoutManager 实现更复杂的布局，常常会用它来实现一个类似网格状的布局。
在初始化LayoutManager的过程中，我们需要设置LayoutManager的列合并。上述代码中的’spanCount' 是指定LayoutManager中的列数，这里设置了列数为3。
示例代码
这里给出一个完整的示例代码，方便您学习：
-- -------------------- ---- -------
----- ------------------- - ---------- -
-------- --- ------------- ------------
-------- --- -------- -----------
-------- --- -------------- -----------------
--------
------- --- -------------- -------------- -
--- -------- - -------------------------
--- -- -- - ----- -- -
--- ---- - -------------------- ----------- -------------
-- -- - - -- -- -
-- -----------------------
----------------------------- - ---- ----------------
-
------------------
-
------ --------
-
-------- --- -------------
--------- --------------- ---------- -----------
------------------- -------
-- ---- -
--- ---- - ------------------------------------------------ ---------- ------
------------ - ---------------------------------------
------ ----
-
-------- --- ------------------- ----- ------------------- -------- -
------------------------- -------------------
----------------------------------
------------- - -------------------------- -----------
-------------------------- - -------------
---------------------------- - ------ - ---------------------------------- -
-------- --- --------------------- ----- --- -
------ ---- ----------------------------------- -
------------------- -- -
--------------------- -- ---------- ----
---- -- ---------- ----
-
-
-
-----------
--- -------- - -------------
------- - ---------------------
-------------------- - -------
-
--------- ------ -
------- ----- --- ---------- - - ------
-
-
----- ------------------- --- ----- --------------- - ----------------------------------------------- -
-------- --- --------------- --- -
------ ---------
-
-------- --- -------------------------- ---------- --------- ----- ----------------------- -
--- ------- - --------------
--- -------- - ----------------------------
------ ---- ---------- -
-------------------- -- -
--- ---- - ------------------------------------------ ------- ------
---------------------
-
------------------- -- -
--- ---- - ----------------------------------------- ------- ------
--------------------
-
---- -- -
--- ---- - ------------------------------------------- ------- ------
----------------------
-
-
-
-------- --- ---------------------------- ------------------------ --------- ---- -
--- ---- - --------------
---- ------ -
-- -------- -- -
--- ------ - ---------- -- --------------
-------------------- - ---------
------------------------------------------------
--------------------------------------------
-
-- --------- -- -
--- ------ - ---------- -- ---------------
-------------------- - ----------
-
-- ---------- -- -
--- ------ - ---------- -- ----------------
------------
--- ------ - -------------
----------------------------------------------------
--------------------------------------------------
-----------------------------
--------------
-
-
-
-------------------
-------- --- ------------------------- ----- --- -
------ -------------------------
-
-代码流程分析：
- RecyclerView 容器初始化；
- 准备数据集合；
- 准备multitype框架中需要使用的 ViewHolder类（TitleViewHolder、TextViewHolder、BannerViewHolder）；
- 新建 ViewHolder——
onCreateViewHolder()方法中返回对应 ViewHolder 类型，然后实例化； - 将特定数据项绑定到 ViewHolder——
onBindViewHolder()实现；重写 getItemViewType(position: Int) 方法。
详细代码戳：https://github.com/AaronYin0514/RecyclerViewExample
总结
RecycleView 是一个非常强大的移动前端框架，提供了许多特性，例如动画，下拉刷新，懒加载，分组展示等等。其中，展示方式的灵活性也非常出色，可以轻松实现复杂数据展示，降低移动前端的开发难度。本文中我们介绍了如何在 MaterialDesign 下使用 RecycleView 实现分组效果，从而让您更好地使用这一框架。如果您有任何问题或疑问，请在评论区发表您的看法，我们随时准备为您解答。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6f148f6b2d6eab3246acd