Material Design下RecycleView实现分组效果详解

在移动端应用程序中，列表属于最基本且重要的元素之一。通常会使用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类型

-------------------
-------- --- ------------------------- ----- --- -
    ------ -------------------------
-

指定每个子项需要使用的 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

阅读全文

猜你喜欢

  • 基于角色的无障碍性：使用 aria-describedby 和 aria-labelledby

    在 Web 开发中，提高可用性和无障碍性已成为越来越重要的话题。有些用户可能会使用屏幕阅读器或其他辅助技术访问您的网站，这意味着您需要确保您的应用程序是可访问的，并能够提供信息以帮助这些用户使用您的应...

    1 年前
  • ECMAScript 2021 (ES12) 中的 Promise.any() 与 Promise.all() 有何异同

    Promise 是一种非常常用的异步编程方案，它可以让我们轻松地处理异步操作的结果；而 Promise.all() 与 Promise.race() 更是 Promise 中最常用的方法之一。

    1 年前
  • Koa.js 2.x 版本下基于 Koa-router 的接口路由设计

    Koa.js 是一款 Node.js 的 web 框架，它的特点是轻量、模块化、中间件式设计。Koa-router 是官方推荐的路由中间件，它的接口路由设计非常灵活。

    1 年前
  • 使用 Babel 编译 ES6 代码时如何实现按需加载

    随着 ES6 的逐渐成熟，越来越多的前端项目开始使用这个新版本的 JavaScript。但是由于浏览器的兼容性问题，我们在开发的时候还需要使用 Babel 这样的工具将 ES6 代码转化为 ES5 代...

    1 年前
  • Angular Material Design 学习笔记：5 种常用布局介绍

    在前端开发中，布局是一个非常重要的概念。好的布局可以使网站看起来更加美观舒适，更容易引导用户完成操作。而使用 Angular Material Design（简称 Angular Material）可...

    1 年前
  • Headless CMS 的前端框架和 API

    前言 在现代 web 应用中，内容管理系统（CMS）是非常关键的一部分。传统的 CMS 通常是面向 web 开发者提供了一个管理和展示网站内容的工具。然而，随着现代化的前端技术不断涌现，一个新的 CM...

    1 年前
  • ECMAScript 2018 中的对象属性：利用 Proxy 提升代码可读性与可维护性

    在 ECMAScript 2018 中，新增了一种对象属性： Proxy，这种属性可以帮助我们更好地管理对象数据，从而提升代码的可读性和可维护性。 什么是 Proxy？ Proxy 是一种新的对象属性...

    1 年前
  • ESLint：如何处理未使用的变量的问题？

    在前端开发中，我们经常会遇到未使用的变量问题，这些变量往往是代码重构或者重构后的遗留代码。当变量未被使用时，它们很容易成为代码质量问题的一个来源。因此，我们需要使用 ESLint 来解决这个问题。

    1 年前
  • Chai 插件 chai-smoothie 的开发与使用技巧

    Chai 是一个 JavaScript 的断言库，它是前端领域常用的一个测试框架。chai-smoothie 是 Chai 的一个插件，它可以在 Chai 断言库的基础上，提供更加丰富的语法和链式描述...

    1 年前
  • 借助 ECMAScript 2019 中的可选参数语法，让函数调用更加灵活

    ECMAScript 2019 可选参数语法介绍 借助 ECMAScript 2019 中的可选参数语法，让函数调用更加灵活。 可选参数语法有助于我们编写更好的代码，可以扩展函数参数列表，同时可以使代...

    1 年前
  • 不同终端下响应式设计如何实现页面元素的比例自适应？

    不同终端下响应式设计如何实现页面元素的比例自适应？ 在现代化的网页设计中，响应式设计是非常重要的一部分。随着许多用户使用不同的设备访问网页，如笔记本电脑、平板电脑、移动电话、智能电视等等，如何在不同的...

    1 年前
  • 利用 Kubernetes 与 Istio 构建高可用微服务

    微服务架构旨在将应用程序拆分为各个小型服务，每个服务负责一项特定的业务功能。这样可以使整个系统更加模块化、灵活，并且可以灵活扩展和升级。但是微服务也带来了一些挑战，例如服务的部署协调、服务间网络通信等...

    1 年前
  • 利用 Redis 实现 Lua 脚本周期执行及优化

    前言 随着互联网技术的不断发展，越来越多的应用场景需要高效可靠的数据存储，而 Redis 作为一种高性能、可扩展、支持多种数据结构的 key-value 存储系统，已经成为了众多应用开发中不可缺少的一...

    1 年前
  • Node.js 中使用 Async 模块实现复杂异步任务的技巧和注意事项

    Node.js 是一种 JavaScript 运行时环境，它允许在服务器端运行 JavaScript 代码。在 Node.js 中，异步任务很常见，比如读写文件、发送网络请求等等。

    1 年前
  • Vue.js 中如何处理跨域问题？

    在使用 Vue.js 开发前端应用时，我们经常需要与后端进行数据交互，而在实际开发过程中，我们很可能会遇到跨域问题。那么在 Vue.js 中，如何处理跨域问题呢？本文将为大家详细解答。

    1 年前
  • MongoDB 分片集群配置实践：避免性能瓶颈

    MongoDB 分片集群配置实践：避免性能瓶颈 随着数据量的不断增大，一些使用 MongoDB 数据库的应用程序可能会出现性能瓶颈。为了缓解这种情况，可以将数据集合拆分成多个"shard"，即"分片"...

    1 年前
  • Docker 运行 MySQL 容器时报错：Can't connect to MySQL server on '127.0.0.1'

    在使用 Docker 运行 MySQL 容器的过程中，有时会遇到连接 MySQL 时报错的情况。最常见的错误提示是 Can't connect to MySQL server on '127.0.0....

    1 年前
  • ES8 中的 Object.seal() 和 Object.freeze() 方法详解

    在 JavaScript 开发中，对象是非常重要的数据类型之一。为了保证对象的安全性和稳定性，JavaScript 提供了许多方法供开发人员使用。ES8 中的 Object.seal() 和 Obje...

    1 年前
  • Node.js Web 平台的全栈架构实践

    在 Web 开发领域中，全栈架构一直是比较热门的话题。简单来说，就是让前端开发人员能够完成后端应用的开发工作。而 Node.js 作为一种轻量级、高效的 JavaScript 运行环境，天然适合用来构...

    1 年前
  • CSS Grid 中的修改尺寸、均匀缩放和自适应布局

    CSS Grid 是一种可以创建复杂的两维布局的 CSS 模块，它让前端开发人员可以更加自由和灵活地设计和布置页面的结构。在实际开发中，我们常常需要对 Grid 布局进行一些修改尺寸、均匀缩放和自适应...

    1 年前

相关推荐

    暂无文章