RecyclerView系列 - GridView样式分割线封装

1. 说明

---

上节课我们给大家讲解了下ListView样式的分割线封装，其实很简单，就那么几步，那么我们这节课就来看下GridView样式分割线的封装是如何实现的，其实和ListView步骤是一样的，只是在onDraw()方法中的画法不一样而已，那么具体的我们就来看下

2. 分析

---

2.1 自定义GridLayoutItemDecoration 继承 RecyclerView.ItemDecoration，然后复写构造方法，并且实现2个方法getItemOffset()和onDraw()方法，onDraw()方法分为两步：
第一步：画水平方向分割线；
第二步：画垂直方向分割线 ；
画分割线具体方法如下图所示

RecyclerView - GridView样式分割线计算方法.png

3. 具体实现

---

3.1 写一个类GridLayoutItemDecoration 继承 RecyclerView.ItemDecoration，然后复写构造方法，并且实现2个方法getItemOffset()和onDraw()方法，具体实现如下：

/**
 * Created by JackChen on 2018/3/3.
 * GridView样式的分割线
 */
public class GridLayoutItemDecoration extends RecyclerView.ItemDecoration {

    private Drawable mDriver ;

    // 网上绝大部分用的系统的一个属性 叫做 android.R.attrs.listDriver ，这个也可以，需要在清单文件中配置
    public GridLayoutItemDecoration(Context context, int drawableRescourseId){
        // 解析获取 Drawable
        mDriver = ContextCompat.getDrawable(context , drawableRescourseId) ;
    }


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        // 留出分割线的位置  每个item控件的下边和右边
        outRect.bottom = mDriver.getIntrinsicHeight() ;
        outRect.right = mDriver.getIntrinsicWidth() ;
    }

    // 绘制分割线
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        // 绘制分割线

        // 绘制水平方向
        drawHorizontal(c,parent) ;
        // 绘制垂直方向
        drawVertical(c,parent) ;
    }


    /**
     * 绘制垂直方向的分割线
     * @param c
     * @param parent
     */
    private void drawVertical(Canvas c, RecyclerView parent) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) childView.getLayoutParams();

            int top = childView.getTop() - params.topMargin ;
            int bottom = childView.getBottom() + params.bottomMargin ;
            int left = childView.getRight() + params.rightMargin ;
            int right = left + mDriver.getIntrinsicWidth() ;

            //计算水平分割线的位置
            mDriver.setBounds(left , top , right , bottom);
            mDriver.draw(c);
        }
    }


    /**
     * 绘制水平方向的分割线
     * @param c
     * @param parent
     */
    private void drawHorizontal(Canvas c, RecyclerView parent) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = parent.getChildAt(i);

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) childView.getLayoutParams();

            int left = childView.getLeft() - params.leftMargin;
            int right = childView.getRight() + mDriver.getIntrinsicWidth() + params.rightMargin;
            int top = childView.getBottom() + params.bottomMargin;
            int bottom = top + mDriver.getIntrinsicHeight() ;

            //计算水平分割线的位置
            mDriver.setBounds(left , top , right , bottom);
            mDriver.draw(c);
        }
    }
}

3.2 直接在recycler_view.setAdapter下调用recycler_view.addItemDecoration(new GridLayoutItemDecoration(this , R.drawable.item_divider_02)) ;

注意：
如果分割线是一条直线的话，item_divider_02中就是画矩形区域，代码如下：

如果分割线是一张图片的话，就直接引用drawable下的一张图片就行

ok，这个就是GridView样式分割线的封装，其实跟ListView样式的分割线封装套路是一样的