自定义控件

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

2019-05-05  本文已影响33人  十二书
目标效果

上面是我的目标效果。

  1. 每行3个图片,4个间隔宽度分别是12dp,6dp,6dp,12dp;
  2. 图片宽度已经算好,使用上面的间隔,刚好布满屏幕;
  3. 忽略 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
上一篇下一篇

猜你喜欢

热点阅读