最终的效果如下:

上图是我需求的一个页面,作为学习就直接贴出来了。
为了更好的使用网格布局,所以决定使用RecyclerView来开发这需求。
首先:
为了更好地说明问题,连续发几张截图,并顺截图说明:
1:代码设置全局截图

因为要设计成网格样式,所以使用GridLayoutManager,这里我只是空实现,为了以后扩展使用,别没有什么逻辑代码。这个GridLayoutManager我设置成了3列。在98行代码处理。
2:适配器代码,红框部分值得看的地方。

3:上图红框部分26,27行代码说明
目的是我这个页面有两种类型的item,所以定义两个常量来区分。请看下图可知。

4:代码流程机器跑一下。
跑起来之后是这个效果。

5:解决
重点是需要画分割线,继续上图。
也许看上去很乱,我会一点一点解释。重点是getItemOffsets方法,用来给item设置内部偏移量。所以接下重点就是getItemOffsets方法。

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

7:跑起来

==================================解释====================================
接下来还没结束,这里最大的迷惑就是getItemOffsets方法中的操作,所以接着上图
1:效果图对比
没有设置分割线和设置分割线之后的效果,一目了然。

2:应该做的

3:设置属性

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

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

6:最终计算设置操作
需要处理第一列,中间列,和最后一列,这里需要做区分,就是头,中间,尾。
形参:outRect.set就是设置item所在列中的偏移值。

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

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