原创内容,转载请注明出处:https://www.jianshu.com/p/d774fa56dc1d
前言
上篇文章介绍了如何轻松实现RecyclerView添加分隔线，本文将延续之前的思路，研究如何实现网格分隔线的添加。首先我们要了解的是，网格分隔线相较线性更复杂一些，需要同时考虑行、列之间的绘制。一般实际项目中，网格列表只实现item之间添加分隔线，下面就针对这种情况开始定义GridItemDecoration，目前支持设置行列间距大小、间距颜色，最后一行底部是否显示，效果图先走一发：
未添加.png
添加后.png
如果你希望最后一行也显示：
最后一行显示.png
实现思路
继承RecyclerView.ItemDecoration，重写
getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)
onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)（或onDraw方法，两者区别在于onDraw是在itemview绘制之前，onDrawOver是在itemview绘制之后），完整代码如下：
/**
* 描述: 自定义网格ItemDecoration
* 作者: LemZ
*/
public class GridItemDecoration extends RecyclerView.ItemDecoration {
private Drawable mDivider;
private boolean mShowLastLine;
private int mHorizonSpan;
private int mVerticalSpan;
private GridItemDecoration(int horizonSpan,int verticalSpan,int color,boolean showLastLine) {
this.mHorizonSpan = horizonSpan;
this.mShowLastLine = showLastLine;
this.mVerticalSpan = verticalSpan;
mDivider = new ColorDrawable(color);
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
drawHorizontal(c, parent);
drawVertical(c, parent);
}
private void drawHorizontal(Canvas c, RecyclerView parent) {
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
//最后一行底部横线不绘制
if (isLastRaw(parent,i,getSpanCount(parent),childCount) && !mShowLastLine){
continue;
}
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
final int left = child.getLeft() - params.leftMargin;
final int right = child.getRight() + params.rightMargin;
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mHorizonSpan;
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
private void drawVertical(Canvas c, RecyclerView parent) {
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
if((parent.getChildViewHolder(child).getAdapterPosition() + 1) % getSpanCount(parent) == 0){
continue;
}
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
final int top = child.getTop() - params.topMargin;
final int bottom = child.getBottom() + params.bottomMargin + mHorizonSpan;
final int left = child.getRight() + params.rightMargin;
int right = left + mVerticalSpan;
// //满足条件( 最后一行 && 不绘制 ) 将vertical多出的一部分去掉;
if (i==childCount-1) {
right -= mVerticalSpan;
}
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
/**
* 计算偏移量
* */
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int spanCount = getSpanCount(parent);
int childCount = parent.getAdapter().getItemCount();
int itemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
if (itemPosition < 0){
return;
}
int column = itemPosition % spanCount;
int bottom;
int left = column * mVerticalSpan / spanCount;
int right = mVerticalSpan - (column + 1) * mVerticalSpan / spanCount;
if (isLastRaw(parent, itemPosition, spanCount, childCount)){
if (mShowLastLine){
bottom = mHorizonSpan;
}else{
bottom = 0;
}
}else{
bottom = mHorizonSpan;
}
outRect.set(left, 0, right, bottom);
}
/**
* 获取列数
* */
private int getSpanCount(RecyclerView parent) {
// 列数
int mSpanCount = -1;
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager) {
mSpanCount = ((GridLayoutManager) layoutManager).getSpanCount();
} else if (layoutManager instanceof StaggeredGridLayoutManager) {
mSpanCount = ((StaggeredGridLayoutManager) layoutManager).getSpanCount();
}
return mSpanCount;
}
/**
* 是否最后一行
* @param parent RecyclerView
* @param pos 当前item的位置
* @param spanCount 每行显示的item个数
* @param childCount child个数
* */
private boolean isLastRaw(RecyclerView parent, int pos, int spanCount, int childCount) {
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager) {
return getResult(pos,spanCount,childCount);
} else if (layoutManager instanceof StaggeredGridLayoutManager) {
int orientation = ((StaggeredGridLayoutManager) layoutManager).getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL) {
// StaggeredGridLayoutManager 且纵向滚动
return getResult(pos,spanCount,childCount);
} else {
// StaggeredGridLayoutManager 且横向滚动
if ((pos + 1) % spanCount == 0) {
return true;
}
}
}
return false;
}
private boolean getResult(int pos,int spanCount,int childCount){
int remainCount = childCount % spanCount;//获取余数
//如果正好最后一行完整;
if (remainCount == 0){
if(pos >= childCount - spanCount){
return true; //最后一行全部不绘制;
}
}else{
if (pos >= childCount - childCount % spanCount){
return true;
}
}
return false;
}
/**
* 使用Builder构造
* */
public static class Builder {
private Context mContext;
private Resources mResources;
private boolean mShowLastLine;
private int mHorizonSpan;
private int mVerticalSpan;
private int mColor;
public Builder(Context context) {
mContext = context;
mResources = context.getResources();
mShowLastLine = true;
mHorizonSpan = 0;
mVerticalSpan = 0;
mColor = Color.WHITE;
}
/**
* 通过资源文件设置分隔线颜色
*/
public Builder setColorResource(@ColorRes int resource) {
setColor(ContextCompat.getColor(mContext, resource));
return this;
}
/**
* 设置颜色
*/
public Builder setColor(@ColorInt int color) {
mColor = color;
return this;
}
/**
* 通过dp设置垂直间距
* */
public Builder setVerticalSpan(@DimenRes int vertical) {
this.mVerticalSpan = mResources.getDimensionPixelSize(vertical);
return this;
}
/**
* 通过px设置垂直间距
* */
public Builder setVerticalSpan(float mVertical) {
this.mVerticalSpan = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, mVertical, mResources.getDisplayMetrics());
return this;
}
/**
* 通过dp设置水平间距
* */
public Builder setHorizontalSpan(@DimenRes int horizontal) {
this.mHorizonSpan = mResources.getDimensionPixelSize(horizontal);
return this;
}
/**
* 通过px设置水平间距
* */
public Builder setHorizontalSpan(float horizontal) {
this.mHorizonSpan = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, horizontal, mResources.getDisplayMetrics());
return this;
}
/**
* 是否最后一条显示分割线
* */
public GridItemDecoration.Builder setShowLastLine(boolean show){
mShowLastLine = show;
return this;
}
public GridItemDecoration build() {
return new GridItemDecoration(mHorizonSpan, mVerticalSpan, mColor,mShowLastLine);
}
}
}
绘制行之间横线，drawHorizontal()需添加判断最后一行是否需绘制
//最后一行底部横线不绘制
if (isLastRaw(parent,i,getSpanCount(parent),childCount) && !mShowLastLine){
continue;
}
绘制列之间竖线时，若网格未占满一行，显示出来的最后一个item右侧会绘制分隔，不需要的话应添加判断
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
final int top = child.getTop() - params.topMargin;
final int bottom = child.getBottom() + params.bottomMargin + mHorizonSpan;
final int left = child.getRight() + params.rightMargin;
int right = left + mVerticalSpan;
// //满足条件( 最后一行 && 不绘制 ) 将vertical多出的一部分去掉;
if (i==childCount-1) {
right -= mVerticalSpan;
}
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
，需要绘制则注释，在网格列表中如果最后一行正好摆满,(如总9个, 3列) 最后一行还是会显示，必须添加getResult方法，完善判断，代码量不是很多，主要就是一些判断的注意，具体测量可以详细阅读不难理解。
通过builder设置你想要的效果，包括颜色、间距等，具体使用代码如下：
GridLayoutManager gridLayoutManager = new GridLayoutManager(context,3);
GridItemDecoration divider = new GridItemDecoration.Builder(context)
.setHorizontalSpan(R.dimen.common_vew_column_padding)
.setVerticalSpan(R.dimen.common_vew_raw_padding)
.setColorResource(R.color.orange)
.setShowLastLine(true)
.build();
recycle_recommend.addItemDecoration(divider);
recycle_recommend.setLayoutManager(gridLayoutManager);
结尾
目前该自定义GridItemDecoration能满足大部分需求，若需要四周绘制可以在此基础上重新计算偏移量及绘制间距，横竖方向间隔显示不同颜色也可以添加drawable对象或设置不同paint实现，有时间我也会再扩展一下^ ^