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());
    }
}