RecyclerView详解 —— 自定义分割线

RecyclerView

作为

ListView

和

GridView

的升级版，Google并没有提供默认的分割线实现，不得不说这是一大遗憾，不过Google为我们提供了一个与之相关的抽象类：

public static abstract class ItemDecoration {
public void onDraw(Canvas c, RecyclerView parent, State state) {
onDraw(c, parent);
}

public void onDrawOver(Canvas c, RecyclerView parent, State state) {
onDrawOver(c, parent);
}

public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
parent);
}
}

可以看到有两个绘制的方法，一般来说我们只需要复写其中一个即可：

onDraw()

：在Item绘制之前先开始画，被Item的内容覆盖。

onDrawOver()

：在Item绘制之后开始画，覆盖Item的内容。

getItemOffsets()

：设置Item的偏移量，空出来的部分一般就是用来绘制分隔线。

注意：

onDraw()

和

onDrawOver()

这两个方法只要手指触摸到屏幕就会被调用，而且在滑动时会被多次调用； 对于

getItemOffsets()

而言，假设一屏最多显示10个Item，那么这个方法只会被调用10次。

水平与纵向分割线

对于水平和纵向的分割线可以写在一个类中，需要时传入使用类型即可。

代码比较简单，我们直接来看完整代码：

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

public static final int VERTICAL = 0;
public static final int HORIZONTAL = 1;

private int mDividerOrientation;
private int mDividerSize;
private Paint mPaint;

public DividerItemDecoration(Context context, int orientation) {
mDividerOrientation = orientation;

mDividerSize = dp2px(context, 1);

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(0xFFE3E3E3);
mPaint.setStyle(Paint.Style.FILL);
}

@Override
public void onDraw(Canvas canvas, RecyclerView parent,
RecyclerView.State state) {
if (mDividerOrientation == VERTICAL) {
drawVertical(canvas, parent);     // 垂直方向间隔高度为分割线高度
} else {
drawHorizontal(canvas, parent);    // 水平方向间隔宽度为分割线宽度
}
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
RecyclerView.State state) {
if (mDividerOrientation == HORIZONTAL) {
outRect.set(0, 0, 0, mDividerSize);
} else {
outRect.set(0, 0, mDividerSize, 0);
}
}

private void drawHorizontal(Canvas canvas, RecyclerView parent) {
// 对于水平方向的分割线，两端的位置是不变的，可以直接通过RecyclerView来获取
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
// 这里获取的是一屏的Item数量
int childCount = parent.getChildCount();

// 分割线从Item的底部开始绘制，且在最后一个Item底部不绘制
for (int i = 0; i < childCount - 1; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams layoutParams =
(RecyclerView.LayoutParams) child.getLayoutParams();
// 有的Item布局会设置layout_marginXXX
int top = child.getBottom() + layoutParams.bottomMargin;
int bottom = top + mDividerSize;
canvas.drawRect(left, top, right, bottom, mPaint);
}
}

/**
* 绘制纵向分割线原理参考上面的方法
*/
private void drawVertical(Canvas canvas, RecyclerView parent) {
int top = parent.getPaddingTop();
int bottom = parent.getHeight() - parent.getPaddingBottom();
int childCount = parent.getChildCount();

for (int i = 0; i < childCount - 1; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams layoutParams =
(RecyclerView.LayoutParams) child.getLayoutParams();
final int left = child.getRight() + layoutParams.rightMargin;
final int right = left + mDividerSize;
canvas.drawRect(left, top, right, bottom, mPaint);
}
}

private int dp2px(Context context, float dpVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal,
context.getResources().getDisplayMetrics());
}
}