GridLayoutManager这么用，你可能还真没尝试过，移动端页面开发框架

实现以上功能需要解决两个难点：

1. 如何给不同行展示不同数量的子视图

2. 每个模块标题的绘制

这两个问题的解决方案分别对应着GridLayoutManager和ItemDecoration，我们挨个了解。

1. GridLayoutManager

GridLayoutManager其实我们已经很熟悉了，只是我们平时没有了解SpanSize这个概念，先看如下一段代码：

GridLayoutManager gll = new GridLayoutManager(this, 6);

mRecyclerView.setLayoutManager(gll);

上面的代码中我们创建了一个纵向、每行最多容量6个子View的GridLayoutManager，默认情况下，一行总的SpanSize为6，每个子视图默认的SpanSize为1，所以不做处理的情况下GridLayoutManager会将每一行分成6份，每一份展示一个子视图，如下图的第一行：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MoM2W1h6-1571057729481)(https://upload-images.jianshu.io/upload_images/15679108-bdff703c1ff803ff?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

这时，我如果将子视图的SpanSize都设置为2，那么这个子视图将占整个RecyclerView可用宽度的2/6，如上图第二行，同理，我将SpanSize上升为3，那么该子视图的宽度也就上升为可用的宽度的3/6，如上图第三行，这也是GridLayoutManager能够在不同行设置不同数量的子视图的原因，当然了，你也可以将同一行里面的三个子视图SpanSize分别设置为1、2、3。好了，距离代码实战还差一个如何绘制标题。

2. ItemDecoration

分割线ItemDecoration是一个很有意思的东西，因为它可以实现一些好玩的东西，比如以下的通讯录的字母标题和时间轴：

| 通讯录的字母标题 | 时间轴 |

| — | — |

| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GbVdIX8H-1571057729482)(https://upload-images.jianshu.io/upload_images/15679108-f8175304e0293a7d?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)] | |

| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OY7TGnMk-1571057729482)(https://upload-images.jianshu.io/upload_images/15679108-54660275e4b3e98e?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

|

还可以利用它做一些特殊的效果，例如字母标题的吸顶，这里我分别推荐