RecyclerView间距设置问题

最终的效果如下:

RecyclerView间距设置问题_第1张图片
最终效果图


上图是我需求的一个页面,作为学习就直接贴出来了。

为了更好的使用网格布局,所以决定使用RecyclerView来开发这需求。

首先:

为了更好地说明问题,连续发几张截图,并顺截图说明:

1:代码设置全局截图

RecyclerView间距设置问题_第2张图片
NO1

因为要设计成网格样式,所以使用GridLayoutManager,这里我只是空实现,为了以后扩展使用,别没有什么逻辑代码。这个GridLayoutManager我设置成了3列。在98行代码处理。

2:适配器代码,红框部分值得看的地方。

RecyclerView间距设置问题_第3张图片
值得注意的代码

3:上图红框部分26,27行代码说明

目的是我这个页面有两种类型的item,所以定义两个常量来区分。请看下图可知。

RecyclerView间距设置问题_第4张图片
两种类型的item标记

4:代码流程机器跑一下。

跑起来之后是这个效果。

RecyclerView间距设置问题_第5张图片
初次运行截图

5:解决

重点是需要画分割线,继续上图。

也许看上去很乱,我会一点一点解释。重点是getItemOffsets方法,用来给item设置内部偏移量。所以接下重点就是getItemOffsets方法。


RecyclerView间距设置问题_第6张图片
分割线类代码预览

6:添加分割线。

此时添加上图所写的分割线对象。

RecyclerView间距设置问题_第7张图片
添加分割线对象

7:跑起来


RecyclerView间距设置问题_第8张图片
最终的效果。

==================================解释====================================

接下来还没结束,这里最大的迷惑就是getItemOffsets方法中的操作,所以接着上图

1:效果图对比

没有设置分割线和设置分割线之后的效果,一目了然。

RecyclerView间距设置问题_第9张图片
效果图对比

2:应该做的


RecyclerView间距设置问题_第10张图片
应该做的

3:设置属性


RecyclerView间距设置问题_第11张图片
设置属性


4:最初的效果图

可以看到3个item的属性值是这样的,我们需要做的就是把蓝色框的宽度平均成4个等间距。

RecyclerView间距设置问题_第12张图片
最初的效果图

5:处理之后的效果图

我们需要用getItemOffsets方法处理成这个样子。如下图蓝色框是等间距,宽度是30.

RecyclerView间距设置问题_第13张图片
处理之后的效果图

6:最终计算设置操作

需要处理第一列,中间列,和最后一列,这里需要做区分,就是头,中间,尾。

形参:outRect.set就是设置item所在列中的偏移值。

RecyclerView间距设置问题_第14张图片
最终计算设置操作

7:最后一图

最后一图说明了计算过程。

计算过程

============================================================

以上是我对RecyclerView画分割线的认识,有写的不对的地方,望给予指教,不胜感激!!!

你可能感兴趣的:(RecyclerView间距设置问题)