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

前言

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

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

文章目录如下

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

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

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

addItemDecoration 方法简介

我们先来看一下 addItemDecoration 方法

官网链接

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 视图上面。

如何添加分割线

RecyclerViewDivider,已支持以下功能

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

详情代码见 RecyclerViewSample

实现思路

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

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

思路很简单

重写 getItemOffsets 方法，加上 divider 的高度，影响 itemView 的最终 size
在 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;// 适配 drawableif (mDivider != null) {mDivider.setBounds(left, top, right, bottom);mDivider.draw(canvas);}// 适配分割线if (mPaint != null) {canvas.drawRect(left, top, right, bottom, mPaint);}
}

Item 间距平均分布

针对 GridLayoutManager 的

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

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

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

思路分析

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

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

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

核心代码如下：

@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

@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，足足花了我几个晚上的时间，我是站在巨人的肩膀上成长起来的，同样，我也希望成为你们的巨人。觉得不错的话可以关注一下我的微信公众号程序员徐公，在此感谢各位大佬们。主要分享

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

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