Recyclerview GridLayout分隔间距

RecyclerView 支持网格布局，我们使用GridLayoutManager来设置为网格布局，在使用网格布局时遇到Item之间间隔的问题，以下以每行三个为例来讲解。
每行显示三个图片，设置图片宽度恒定（eg :100dp）后，在不设置分隔的情况下，recyclerview会自动计算空隙宽度，然后填充到每个Item右边，如下图所示。但这种布局往往不满足我们的使用习惯，我们一般需要使图片左右靠边，中间间隙自动填充，因此我们需要移动item的位置。如下所示，需要将第二个、第三个Item右移。

gridLayout divider.png

下面开始介绍我们的实现方案，我们所需的工作就是计算每个item所需的移动距离，计算的过程后面介绍，现在假设我们已经计算出这个距离，为dividerWidth，那么我们只需要以下代码就ok了。

 private final int SPAN_COUNT = 3;
 gridLayoutManager = new GridLayoutManager(this, SPAN_COUNT, LinearLayoutManager.VERTICAL, false);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                 return SPAN_COUNT/3;
            }
        })；

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    GridLayoutManager.LayoutParamslayoutParams = (GridLayoutManager.LayoutParams) view.getLayoutParams();
    int spanSize =layoutParams.getSpanSize();
    if(spanSize ==eachItemCount){
        int spanIndex =layoutParams.getSpanIndex();
        int itemPosition =spanIndex/eachItemCount;//eachItemCount每个item所占空间
        outRect.left =dividerWidth*itemPosition;//dividerWidth每份间隔宽度（item左侧间距）下面会具体介绍.
    }
     outRect.bottom =dividerHeight;//item底部间距
}

设置完以上代码就可以正常工作了，下面简单介绍下他是怎么工作的：
outRect结构如下所示，及矩形的数据结构，四个值分别代表目标Item四周的距离，如下图所示：

public final class Rect implements Parcelable {
    public int left;
    public int top;
    public int right;
    public int bottom;}

Untitled Diagram (1).png

跟下源码定位到以下代码（版本V7-25.0.1）：

 Rect getItemDecorInsetsForChild(View child) {
        final LayoutParams lp = (LayoutParams) child.getLayoutParams();
        ...
        final Rect insets = lp.mDecorInsets;
        insets.set(0, 0, 0, 0);
        final int decorCount = mItemDecorations.size();//mItemDecorations为分割线的集合，因此GridLayout可以设置多个分隔线
        for (int i = 0; i < decorCount; i++) {
            mTempRect.set(0, 0, 0, 0);
           //此处调用我们重写的函数，insets是Item的四周间距，此处加上我们设置的间距
            mItemDecorations.get(i).getItemOffsets(mTempRect, child, this, mState);
            insets.left += mTempRect.left;
            insets.top += mTempRect.top;
            insets.right += mTempRect.right;
            insets.bottom += mTempRect.bottom;
        }
        lp.mInsetsDirty = false;
        return insets;
    }

其实写这篇文章的主要原因是Item移动位置的计算，以下以每行三个为例计算每个item移动的位置：

gridLayout divider (1).png

上图中空白处和为1，则每个空白为1/3，移动后一共两个空白，故每个占1/2，
显然第二个Item需要右移（1/2-1/3 = 1/6）的位置，那么第三个item需要移动自己的1/6距离+第二个item移动的位置1/6，即2/6。因此我们在计算空白的宽度时将其分为6份。

  @Px int eachDividerWidth = (UISizeUtils.getScreenWidth(this)-UISizeUtils.dip2px(this,100)*SPAN_COUNT)/6;//把空白分为6份
        DividerGridLayout dividerGridLayout = new DividerGridLayout(1,eachDividerWidth,UISizeUtils.dip2px(this,10));

因此计算出每份距离后，在getItemOffsets方法中根据spanIndex来计算每个Item距离左侧的距离
outRect.left的距离，为dividerWidth*itemPosition。

 if(spanSize ==eachItemCount){
        int spanIndex =layoutParams.getSpanIndex();
        int itemPosition =spanIndex/eachItemCount;//eachItemCount每个item所占空间
        outRect.left =dividerWidth*itemPosition;//dividerWidth每份间隔宽度（item左侧间距）
    }

将其推广到每行四个Item时，每个每个空白为1/4，移动后每个空白占1/3,因此每个Item需要移动（1/3-1/4 = 1/12），每行5个Item时每个移动（1/4-1/5 = 1/20），归纳总结。对于每行N个Item，每个Item需要移动（1/(N*(N-1))）的位置。