RecyclerView addItemDecoration 的妙用 - item 间距平均分布和添加分割线

╰+哭是因爲堅強的太久メ 2022-02-17 04:50 894阅读 0赞

## 前言 ##

RecyclerView，在开发当中使用非常频繁的一个控件，今天，主要讲解以下两个问题

*  添加分割线
 *  item 间距的平均分布

文章目录如下

> addItemDecoration 方法简介  
> 如何添加分割线  
> addItemDecoration 如何实现间隔平均分布  
> 如何找到我

**程序员徐公**，五年中大厂开发经验，助你升职加薪，带你走进大厂

1.  公众号程序员徐公回复**黑马**，获取 Android 学习视频
2.  公众号程序员徐公回复**徐公666**，获取简历模板，教你如何优化简历，走进大厂
3.  公众号程序员徐公回复**面试**，可以获得面试常见算法，剑指 offer 题解
4.  公众号程序员徐公回复**马士兵**，可以获得马士兵学习视频一份

![程序员徐公][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70]

--------------------

## addItemDecoration 方法简介 ##

我们先来看一下 addItemDecoration 方法

[官网链接][Link 1]

> Add an RecyclerView.ItemDecoration to this RecyclerView. Item decorations can affect both measurement and drawing of individual item views.

> Item decorations are ordered. Decorations placed earlier in the list will be run/queried/drawn first for their effects on item views. Padding added to views will be nested; a padding added by an earlier decoration will mean further item decorations in the list will be asked to draw/pad within the previous decoration’s given area.

简单来来说，**ItemDecoration 是 itemView 的装饰，可以影响 itemView 的 measurement 和 draw**。

ItemDecoration 主要有几个方法

getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)

> Retrieve any offsets for the given item. Each field of outRect specifies the number of pixels that the item view should be inset by, similar to padding or margin. The default implementation sets the bounds of outRect to 0 and returns.

简单点说：**可以影响 item 的大小，类似于在 item 中设置 padding 和 margin**。

void onDraw (Canvas c, RecyclerView parent, RecyclerView.State state)

> Draw any appropriate decorations into the Canvas supplied to the RecyclerView. Any content drawn by this method will be drawn before the item views are drawn, and will thus appear underneath the views.

**在提供给RecyclerView的画布上绘制任何适当的装饰。通过此方法绘制的任何内容都将在绘制项目视图之前绘制，因此将显示在 item 视图下面**

void onDrawOver (Canvas c, RecyclerView parent, RecyclerView.State state)

> Draw any appropriate decorations into the Canvas supplied to the RecyclerView. Any content drawn by this method will be drawn after the item views are drawn and will thus appear over the views.

**在提供给RecyclerView的画布上绘制任何适当的装饰。通过此方法绘制的任何内容都将在绘制项目视图之后绘制，因此将出现在 item 视图上面。**

--------------------

## 如何添加分割线 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 1]

RecyclerViewDivider,已支持以下功能

1.  自定义分割线，设置 drawable
2.  设置分割线高度，颜色
3.  设置分割线距离屏幕左边，右边的距离
4.  设置是否显示最后一条分割线

详情代码见 [RecyclerViewSample][]

### 实现思路 ###

我们知道 RecyclerView 没有像之前 ListView 提供 divider 属性，**设置分割线的话有挺多人在 itemView 的布局里面加个 1dp 左右的 view**，根据业务场景设置是否可见。这是其中的一种方法。

但其实，我们也可以使用 recyclerView.addItemDecoration() 来实现，主要需要重写 getItemOffsets 和 onDraw 方法

思路很简单

1.  重写 getItemOffsets 方法，加上 divider 的高度，影响 itemView 的最终 size
2.  在 onDraw 方法，根据 LinearLayoutManager 的方向分别绘制分割线

@Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.set(0, 0, 0, mDividerHeight);
    }
    
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        if (mOrientation == LinearLayoutManager.VERTICAL) {
            drawVerticalDivider(c, parent);
        } else {
            drawHorizontalDivider(c, parent);
        }
    }

//Draw item dividing line
    private void drawVerticalDivider(Canvas canvas, RecyclerView parent) {
        // mLeftOffset 为自己设置的左边偏移量
        final int left = parent.getPaddingLeft() + mLeftOffset;
        // mRightOffset 为设置的右边偏移量
        final int right = parent.getMeasuredWidth() - parent.getPaddingRight() + mRightOffset;
        final int childSize = parent.getChildCount();
    
        if (childSize <= 0) {
            return;
        }
    
        // 从第一个 item 开始绘制
        int first = mStart;
        // 到第几个 item 绘制结束
        int last = childSize - mEnd - (mIsShowLastDivider ? 0 : 1);
        Log.d(TAG, " last = " + last + " childSize =" + childSize + "left = " + left);
    
        if (last <= 0) {
            return;
        }
    
        for (int i = first; i < last; i++) {
            drawableVerticalDivider(canvas, parent, left, right, i, mDividerHeight);
        }
    
    }
    
    private void drawableVerticalDivider(Canvas canvas, RecyclerView parent, int left, int right, int i, int dividerHeight) {
        final View child = parent.getChildAt(i);
    
        if (child == null) {
            return;
        }
    
        RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
        final int top = child.getBottom() + layoutParams.bottomMargin;
        final int bottom = top + dividerHeight;
    
        // 适配 drawable
        if (mDivider != null) {
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(canvas);
        }
    
        // 适配分割线
        if (mPaint != null) {
            canvas.drawRect(left, top, right, bottom, mPaint);
        }
    }

--------------------

## Item 间距平均分布 ##

### 针对 GridLayoutManager 的 ###

在 Android 开发当中，我们经常会看到这样的界面，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 2]

一般来说，可能有以下几种需求：

1.  **要求第一列和最后一列距离屏幕的距离 A 是固定的**，其余每个 item 之间的距离 B 也是固定的（但 A 不等于 B）
2.  **要求第一列和最后一列距离屏幕的距离 A 是固定的**，item 的大小是固定的，其余每个 item 之间的距离跟随分辨率的大小变化
3.  **第一行距离顶部的距离可以设置**，最后一行距离底部的距离可以设置

**思路分析**

首先，我们知道，对于 GridLayoutmanager ,当我们设置的 spancount 为 3 的时候，那么每个 item  
的最大宽度为 itemMaxW = recycylerW / spancount = recycylerW / 3.

假设我们 spancount 为 3，那么在不设置 itemDercation 的情况下它的分布是这样的，可以看到第一列与最后一行的距离是不一样的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 3]

而加上 itemDercation 之后，我们所看到的 item 是这样的，因此，我们可以分别对每个 item 的 ouctRect 进行处理

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 4]

核心代码如下：

@Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
    
        int top = 0;
        int left;
        int right;
        int bottom;
    
        int itemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        mSpanCount = getSpanCount(parent);
        int childCount = parent.getAdapter().getItemCount();
    
        // 屏幕宽度-View的宽度*spanCount 得到屏幕剩余空间
        int maxDividerWidth = getMaxDividerWidth(view);
        int spaceWidth = mFirstAndLastColumnW;//首尾两列与父布局之间的间隔
        // 除去首尾两列，item与item之间的距离
        int eachItemWidth = maxDividerWidth / mSpanCount;
        int dividerItemWidth = (maxDividerWidth - 2 * spaceWidth) / (mSpanCount - 1);//item与item之间的距离
    
        left = itemPosition % mSpanCount * (dividerItemWidth - eachItemWidth) + spaceWidth;
        right = eachItemWidth - left;
        bottom = dividerItemWidth;
    
        // 首行
        if (mFirstRowTopMargin > 0 && isFirstRow(parent, itemPosition, mSpanCount, childCount)) {
            top = mFirstRowTopMargin;
        }
    
        //最后一行
        if (isLastRow(parent, itemPosition, mSpanCount, childCount)) {
            if (mLastRowBottomMargin < 0) {
                bottom = 0;
            } else {
                bottom = mLastRowBottomMargin;
            }
        }
    
        Log.i(TAG, "getItemOffsets: dividerItemWidth =" + dividerItemWidth + "eachItemWidth = " + eachItemWidth);
    
        Log.i(TAG, "getItemOffsets: itemPosition =" + itemPosition + " left = " + left + " top = " + top
                + " right = " + right + " bottom = " + bottom);
    
        outRect.set(left, top, right, bottom);
    }

在代码中使用

mRecyclerView.setLayoutManager(layoutManager);
    int firstAndLastColumnW = DisplayUtils.dp2px(this, 15);
    int firstRowTopMargin = DisplayUtils.dp2px(this, 15);
    GridDividerItemDecoration gridDividerItemDecoration =
            new GridDividerItemDecoration(this, firstAndLastColumnW, firstRowTopMargin, firstRowTopMargin);
    gridDividerItemDecoration.setFirstRowTopMargin(firstRowTopMargin);
    gridDividerItemDecoration.setLastRowBottomMargin(firstRowTopMargin);
    mRecyclerView.addItemDecoration(gridDividerItemDecoration);
    List<Integer> imageList = DataUtils.produceImageList(30);
    ImageAdapter imageAdapter = new ImageAdapter(this, imageList);
    
    mRecyclerView.setAdapter(imageAdapter);

### 针对横向的 LinearlayoutManager ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 5]

@Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {
        int itemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        int childCount = parent.getAdapter().getItemCount();
    
        if (itemPosition == 0) {
            outRect.left = firstAndlastRect.left;
            outRect.right = firstAndlastRect.right;
            outRect.bottom = firstAndlastRect.bottom;
            outRect.top = firstAndlastRect.top;
            return;
        }
    
        if (itemPosition == childCount - 1) {
            outRect.left = 0;
            outRect.right = firstAndlastRect.left;
            outRect.bottom = firstAndlastRect.bottom;
            outRect.top = firstAndlastRect.top;
            return;
        }
    
        setOutRect(outRect, space);
    }

int j = DisplayUtils.dp2px(this, 15);
    Rect firstAndLastRect = new Rect(j, i, i, 0);
    HorizontalSpacesDecoration spacesDecoration = new HorizontalSpacesDecoration(rect, firstAndLastRect);
    mRecyclerView.addItemDecoration(spacesDecoration);
    List<Integer> integers = DataUtils.produceImageList(R.mipmap.ty1, 30);
    ImageAdapter imageAdapter = new ImageAdapter(this, integers);
    mRecyclerView.setAdapter(imageAdapter);

[RecyclerViewSample][]：https://github.com/gdutxiaoxu/RecyclerViewSample

## 找到我 ##

这篇文章,加上一些 Demo，足足花了我几个晚上的时间，我是站在巨人的肩膀上成长起来的，同样，我也希望成为你们的巨人。觉得不错的话可以关注一下我的微信公众号**程序员徐公**，在此感谢各位大佬们。主要分享

1.  **Android 开发相关知识**：包括 java，kotlin， Android 技术。
2.  **面试相关分享**：包括常见的面试题目，大厂面试真题、面试经验套路分享。
3.  **算法相关学习笔记**：比如怎么学习算法，leetcode 常见算法总结，跟大家一起学习算法。
4.  **时事点评**：主要是关于互联网的，比如小米高管屌丝事件，拼多多女员工猝死事件等

希望我们可以成为朋友，成长路上的忠实伙伴！  
![image][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70]: /images/20220217/d7921babc8bd4e8b9c583e50a3afafe9.png
[Link 1]: https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 1]: /images/20220217/604117a1a0364ddeacf4cac9228e7c19.png
[RecyclerViewSample]: https://github.com/gdutxiaoxu/RecyclerViewSample
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 2]: /images/20220217/c07696eb1bef4282b377e33fca07152e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 3]: /images/20220217/5fabb8016ceb4a3fb5943893f8678c03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 4]: /images/20220217/92560b799d554ca09d98c28d28f4dc04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkdXR4aWFveHU_size_16_color_FFFFFF_t_70 5]: /images/20220217/bf55b70c7ba04010a3340527a4c9731a.png
[image]: /images/20220217/f820e8fe5971414590cc9fbfeda176d5.png