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样式的分割线封装套路是一样的

你可能感兴趣的:(RecyclerView系列 - GridView样式分割线封装)