頭部懸停效果:

1.gif

在實現(xiàn)功能之前我們先來了解RecyclerView.ItemDecoration中三個重要的方法

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

這個方法代表的是給RecycleView的itemview的left,top,right,bottom都加上10px的padding值,給itemview加上粉紅色的背景來更好的體現(xiàn)效果,在代碼中加上自己定義的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

現(xiàn)在我們來用二種方法實現(xiàn)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介紹(二)頭部懸停效果

http://www.itdecent.cn/p/926c6bfa0e36