GridLayout+Decoration 间距问题

众所周知，要给RecyclerView中的Item加间距，有两种比较通用的方式：

• 直接在item的布局中加入间距
• 给RecyclerView添加ItemDecoration来处理间距

第一种方式很直白，就是每个item之间其实没有间距，是通过在每个item内部处理显示内容和边界处手动加空白，这样看起来就像是有了间距一样。而第二种方式，表面看起来也是很简单的：间距多少直接填多少就好了嘛，有什么难的。但是实际使用时呢，会有奇怪的问题。

举个栗子

一个简单的需求，要给一个N行3列的RecyclerView加间距，每个Item之间间距10，然后靠边的距离屏幕边距是0,即紧贴屏幕,这样写：

addItemDecoration(object : RecyclerView.ItemDecoration() {
               override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
                     val pos = parent.getChildAdapterPosition(view)
                   val column = (pos % span)
                   
                   outRect.left = 5
                   outRect.right = 5
                   outRect.top = 5
                   outRect.bottom = 5
                   
                   if (column == 0){
                       outRect.left = 0
                   }
                   if (column == 2){
                       outRect.right = 0
                   }
               }
           })

看起来好像没问题？第一列的左边距都是0，第三列的右边距都是0，除此之外边所有Item的左右间距刚好是 5+5=10，是这样吗？看看效果

image

很明显，中间的item变小了，这是ItemDecoration绘制原理上导致的。因为Item首先是均等分布，且Item内部显示的内容部分并不是完全居中，然后绘制计算的这个过程，又是从左向右一一计算的。所以越往后计算会把距离拉大，虽然看起来间距是正常的，但是因为可显示内容部分的宽度被挤压了，所以显得中间部分可显示区域变小了。

怎么解决呢？也很简单，在这个例子中，对于每一行来说，只有两部分间距，即第一列的Item和第二列的Item间有一个间距，第二列Item跟第三列Item之间也有一个间距。而左右两侧距离屏幕距离是0，所以得出这一行中除了可显示内容View之外，剩下的需要留白的宽度是10+10=20。然后，因为一行是三列，所以对于每一个Item来说，他所分得的空白宽度，就是20/3。那么对第一列Item来说，他的左侧距离是0（靠左侧屏幕），那么右侧距离就是 20/3-0=20/3。第二列，他的左侧距离是多少呢？想一下，他的左侧距离再加上第一列Item的右侧距离，刚好就是10，既然已经知道了第一列Item的右侧间距，那么第二列Item的左侧距离就是10-20/3=10/3，那他这个Item当前还剩下的空白距离，就是20/3-10/3，也就是10/3。那第三列Item的左侧边距，同理可得为10-10/3=20/3，右侧距离为20/3-20/3，刚好是0，代码如下：

addItemDecoration(object : RecyclerView.ItemDecoration() {
               override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
                   val pos = parent.getChildAdapterPosition(view)
                   val column = (pos % span)
                   
                   if (column == 0) { //第一列
                       outRect.left = 0
                       outRect.right = 20/3
                   } else if (column == 1) { //第二列
                       outRect.left = 10/3
                       outRect.right = 10/3
                   } else { //第三列
                       outRect.left = 20/3
                       outRect.right = 0
                   }

                   outRect.top = 5
                   outRect.bottom = 5
               }
           })

这样效果就完美了：

image