GridLayoutManager 设置不同宽度间隔的用法

目标效果

上面是我的目标效果。

每行3个图片，4个间隔宽度分别是12dp,6dp,6dp,12dp；
图片宽度已经算好，使用上面的间隔，刚好布满屏幕；
忽略 top 和 bottom（因为top和bottom的修改比较简单）。

先上代码：


    public static final int SPAN_COUNT = 3;
    private static final int ITEM_EDGE_PADDING = 12;

...

        GridLayoutManager layoutManage = new GridLayoutManager(mActivity, SPAN_COUNT);
        mRcyProducts.setLayoutManager(layoutManage);

        int itemWidth = Utils.dip2px(108); // 图片宽度108dp。实际代码里，我不会这样用魔法数字。
        final int space = screenWidth - itemWidth * SPAN_COUNT;
        RecyclerView.ItemDecoration itemDecoration = new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                int eachWidth = space / SPAN_COUNT;

                int mode = parent.getChildLayoutPosition(view) % SPAN_COUNT;
                outRect.top = 0;
                outRect.bottom = 0;
                if (mode == 0) {
                    outRect.left = Utils.dip2px(ITEM_EDGE_PADDING);
                    outRect.right = eachWidth - outRect.left;
                } else if (mode == SPANCOUNT - 1) {
                    outRect.right = Utils.dip2px(ITEM_EDGE_PADDING);
                    outRect.left = eachWidth - outRect.right;
                } else {
                    outRect.left = eachWidth / 2;
                    outRect.right = eachWidth / 2;
                }
            }
        };
        mRcyProducts.addItemDecoration(itemDecoration);

写的时候也参考了一些链接，但是效果总是不尽如人意。下面这篇还不错，解释了一些问题。

https://blog.csdn.net/HZHAboom/article/details/78629937

下面解释一下我的理解，以及为什么这么写。

因为RecyclerView的宽度计算比较复杂，所以我下面的内容，猜测的成分比较大，但是可以很好的解释我遇到的问题，并且比较合理。

猜测1. 每个spanSize占用的宽度是一样的。

好像废话一样。比如我的情况是总SPAN_COUNT = 3，每行3个图片，每个图片的spanSize都是默认的1。

猜测2. 每个itemView 都是在各自对应的 spanSize 区域内显示。

具体到我的情况，就是每个图片都是在 screenWidth / SPAN_COUNT 的宽度范围内显示。这一点很重要。
这里可以假设一种情况：每行2个item，且item1的spanSize是2，item2的spanSize是1。
那么item2应该默认会在屏幕右1/3的地方开始显示。我没有验证，有兴趣的同学可以试一下。

并且，在我的情况里，每个图片的显示宽度是一样的，所以我可以在布局里写死宽度，而不用担心offset给宽度计算带来的影响。如果有宽度不一样的情况，应该小心处理每个item的outRect.left+outRect.right+itemWidth = screenWidth / SPAN_COUNT

现在再来看我的代码，int space = screenWidth - itemWidth * SPAN_COUNT;，这是总共可用间隔宽度；
int eachWidth = space / SPAN_COUNT;，这是每个item分配到的间隔宽度；
int mode = parent.getChildLayoutPosition(view) % SPAN_COUNT;，是每个item的位置；
最后根据位置分配不同的offset。

在我的情况里，
item1 的 outRect.left = 12dp, outRect.right = 0dp；
item2 的 outRect.left = 6dp, outRect.right = 6dp；
item3 的 outRect.left = 0dp, outRect.right = 12dp。

offset 可以为负值吗？

可以。
设置item1的left为18dp，right为-6dp，可以得到下图。

-1.jpg

不同item之间也可以重叠。

-2.jpg

a. 保证每个item的宽度一样
b. 小心计算item的间隔，保证 itemWidth + outRect.left + outRect.right = screenWidth / SPAN_COUNT。

否则可能出现下面的问题，item1的宽度明显过小了。

1.jpg

最后编辑于：2019.05.05 17:55:14