RecyclerView还能这么玩

RecyclerView 从诞生至今,因其具有良好的灵活性、可扩展性而深受人们的爱好。目前已经被开发者广泛应用到App中。本文主要针对 RecyclerView 的可扩展性进行详解,将 RecyclerView 玩出新花样 —— 利用 RecyclerView 实现复杂布局。如果你还对 RecyclerView 不熟悉,建议你先把 RecyclerView 的常规用法学习了再来看本文。

1

需求

我们能用 RecyclerView 实现列表效果,网格列表效果以及瀑布流效果。但是这些都是比较单一布局。如果我们现在有个需求,需要做成这样的效果。 具体如下图 1 和 图2 所示:

图1

图2

我们先分析下这需求。从图 1 和图 2 可知,最外面的控件是支持上下滑动的。这很有可能是一个列表或者是一个 ScrollView 。头部是有 8 个控件以 4 x 2 的方阵排列着。中间部分由 2 x 2 的控件组成一个矩形。底部是类似列表的样式。

2

实现思路

我第一想法就是使用 RecyclerView 进行嵌套。最外面是一个 RecyclerView,它中间再包裹这三个 RecyclerView 。这三个 RecyclerView 分别处理头部、中间部分、底部的排版逻辑。然后再使用通用的 Adapter 进行设配,从而提高代码复用率。这想想还是挺不错。

不过这个方案很快就被我否定了。因为谷歌是不建议 RecyclerView 进行嵌套。硬要这么做,也是没有毛病,所有的 item 会在第一次加载时被初始化,视图复用机制会被作废。还有自己再反问自己几个问题:

  • item 的事件怎么传递以及处理?
  • 如果全部被嵌套的 RecyclerView 都要加载图片,会不会出现卡顿情况?
  • 如果中间选项布局超过 10 个怎么办,难道又要重新添加一个 RecyclerView? 我发现自己都回答不上这几个问题,所以该方案是行不通的。

我记得 ListView 能够利用下面两个方法实现多 Item 布局。

作为 ListView 的替代品的 RecyclerView, 应该是支持这种实现吧。果然,不出我所料。

我发现 RecyclerView 也有 getItemViewType 方法,但 getViewTypeCount 已经没有了。值得注意的是 RecyclerView 必须实现的三个方法中 onCreateViewHolder(ViewGroup parent, int viewType) 第二个参数正是布局的类型。

那么这就好办了, 我们可以通过根据不同的 item 来返回不同的布局类型。 这个方案既简单同时不会破坏 RecyclerView 的机制,又能保证良好的可扩展性。所以我最终采用最这种方法来实现上面的效果。

3

代码实现

1)根据不同的 viewType 加载不同的布局。头部 8 个控件可以用统一布局文件来表示,中间 4 个控件也同样的原理,剩下底部也是采用一个 xml 文件来表示。

2)数据的来源。 Adapter 的数据都是由 Activity 传递过来的。我们把 RecycleView 分割为三个部分,这就需要在 MainActivity 中给 Adapter 传递三个不同泛型的 List。

3)数据绑定 因为有三个不同的 ViewHolder, 所以需要对三个不同的 ViewHolder 绑定不同 List。

4)显示样式 在 MianActivity 中,我采用的是 4 列的网格布局管理局。有人一定会问为什么一定要选择 4 列?就不能 5 列?6 列? 很简单,因为在整个列表中,在头部中一行有 4 个控件, 1 个控件占据 1 个span。我就以头部的数据为标准,这样比较方便计算出后面 item 中每个控件占据每行的 span 数。

在 MultitudeAdapter 中,需要计算好每个控件占据多少个 span 。重载父类的方法 onAttachedToRecyclerView ,并动态为不同 position 设置不同的 SpanSize

小贴士

因微信不支持站内链接, 请点击【阅读原文】阅读完整的代码

作者:猴哥,公众号:极客猴。爱好读书,喜欢钻研技术,梦想成为文艺青年的IT Boy。

- END -

原文发布于微信公众号 - 极客猴(Geek_monkey)

原文发表时间:2017-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

24160
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

43160
来自专栏coding for love

CSS入门

大家都知道,学习前端,有三大神器,html+css+js。如果用武学来比喻,html就好像骨架身躯,学习html就是习武之人所谓的打熬身体,身体底子好,习武才能...

9120
来自专栏菜鸟前端工程师

html+css学习笔记007-样式优先级0外链css样式表

10120
来自专栏Golang语言社区

JS游戏开发 可移动地图的实现

一、前言 这一讲的内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用...

54360
来自专栏Coding迪斯尼

寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效

上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程...

8830
来自专栏程序员的诗和远方

20180728_ARTS_week05

这题有点犯难,上面是 Discuss 中的一个解法,看了之后挺好理解的,要找回环字符串,就从 a 和 aa 一阶和二阶这两种形式往两边找,感觉特别巧妙。

10520
来自专栏玩转全栈

flutter实现一个sideBar

用flutter中实现这么一个sidebar,期初我想了5中方式,但是最后,发现只有一种可以实现,那么是哪5种方式呢?

619100
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

18430
来自专栏Thinks

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

16620

扫码关注云+社区

领取腾讯云代金券