头部悬停效果:

1.gif

在实现功能之前我们先来了解RecyclerView.ItemDecoration中三个重要的方法

方法1:getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)

这个方法代表的是给RecycleView的itemview的left,top,right,bottom都加上10px的padding值,给itemview加上粉红色的背景来更好的体现效果,在代码中加上自己定义的ItemDecoration

public class MyItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.set(10, 10, 10, 10);
    }
}

 mRecyclerView.addItemDecoration(new MyItemDecoration());

运行效果如下: 1.png

方法2:onDraw(Canvas c, RecyclerView parent, RecyclerView.State state)

这个方法表示在绘制itemview之前绘制一层背景

 private Paint mPaint;

    public MyItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLACK);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        View child0 = parent.getChildAt(0);
        c.drawRect(0, parent.getTop(), parent.getRight(), child0.getBottom() + 10, mPaint);

        View child2 = parent.getChildAt(2);
        c.drawRect(0, child2.getTop(), parent.getRight(), child2.getBottom() + 10, mPaint);
    }

2.png

方法3:onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)

该方法表示在绘制完itemview之后再绘制一层背景

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        View child = parent.getChildAt(3);
        c.drawRect(0, child.getTop(), parent.getRight(), child.getBottom() + 10, mPaint);
    }

3.png

现在我们来用二种方法实现Recycleview分割线

1.利用getItemOffsets+onDraw方法

 @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.set(10, 10, 10, 10);
    }

    private Paint mPaint;

    public MyItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.GREEN);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        for (int i = 0; i < parent.getChildCount(); i++) {
            View child = parent.getChildAt(i);
            //child.getBottom() + 20   +20是getItemOffsets设置了padding top + bottom =20
            c.drawRect(child.getLeft(), child.getTop(), child.getRight(), child.getBottom() +20, mPaint);
        }
    }

4.png

2.利用getItemOffsets+onDrawOver方法

 @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.set(10, 10, 10, 10);
    }

    private Paint mPaint;

    public MyItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.GREEN);
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        for (int i = 0; i < parent.getChildCount(); i++) {
            View child = parent.getChildAt(i);

            c.drawRect(child.getLeft(), child.getBottom(), child.getRight(), child.getBottom() + 20, mPaint);
        }
    }

5.png

效果还是一样的,只不过drawRect传的第二个值不一样

RecycleView ItemDecoration介绍(二)头部悬停效果

https://www.jianshu.com/p/926c6bfa0e36