美文网首页自定义控件
GridLayoutManager 设置不同宽度间隔的用法

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

作者: 十二书 | 来源:发表于2019-05-05 17:29 被阅读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

    相关文章

      网友评论

        本文标题:GridLayoutManager 设置不同宽度间隔的用法

        本文链接:https://www.haomeiwen.com/subject/vdjhoqtx.html