阅读 18

RecyclerView使用指南(四)—— 使用ItemDecoration

声明:原创作品,转载请注明出处:www.jianshu.com/p/b2654f4a6…

这次我将对RecyclerView的ItemDecoration类进行讲解。 ItemDecoration是RecyclerView类中的一个内部抽象类,我们可以通过继承这个类并将它设置给RecyclerView来装饰我们的条目。

在讲解之前,我们先做一些准备工作:

  1. 将RecyclerView显示出来,并把它的条目背景色设为绿色。
  2. 写一个DemoItemDecoration类,继承ItemDecoration类。
  3. 给RecyclerView添加DemoItemDecoration。
  4. 改一下Activity的布局,加个背景。

OK,我们实现了这个效果:

接下来,我们看一下ItemDecoration类,在这个类中,我们可以重写的方法有3个,分别是getItemOffsets(),onDraw()以及onDrawOver()方法。我们尝试一下,看看它们都有什么作用。

一、getItemOffsets()

这个方法本身有4个参数,起到主要作用的是outRect,我们可以通过设置outRect参数的属性值(left、top、right、bottom),来改变整个条目的偏移量。 看下例子:

public class DemoItemDecoration extends RecyclerView.ItemDecoration {
    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.left = 40;
        outRect.right = 40;
        //第一个条目,我们不给它设置上边距
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = 40;
        }
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
    }

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
    }
}
复制代码

运行看下效果:

其实,这时候我们每个条目所对应的区域已经变成非透明的区域了。(这里你不理解也没关系,请继续往下看)

二、onDraw()

通过重写这个方法,我们可以更改item图层下面的图层,emmm.... 我们给RecyclerView更换一个背景吧,这样你可能更能理解上一句话的意思。 上代码:

@Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        Bitmap pic = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.j);
        c.drawBitmap(pic, parent.getLeft(), parent.getTop(), mPaint);
    }
复制代码

运行效果:

注意:这个例子只是为了展示我们可以通过onDraw方法改变item图层下面的图层,请不要在开发中这样做。

我们来一个常规一点的例子,比如:给我们的条目加上分割线。代码如下:

public class DemoItemDecoration extends RecyclerView.ItemDecoration {
    private int mDividerHeight = 40;
    private Paint mPaint;

    public DemoItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.YELLOW);
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.left = 40;
        outRect.right = 40;
        //第一个条目,我们不给它设置上边距
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = mDividerHeight;
        }
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int childCount= parent.getChildCount();
        //遍历RecyclerView的所有子view
        for (int i = 0; i < childCount; i++) {
            //看看子view是否是列表中的条目,如果是的话,我们获取它的位置
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);
            //因为第一个条目我们没有设置上边距,所以我们在画图的时候也要排除掉它
            if (position != 0) {
                float dividerTop = view.getTop() - mDividerHeight;
                float dividerLeft = parent.getLeft();
                float dividerBottom = view.getTop();
                float dividerRight = parent.getWidth();
                c.drawRect(dividerLeft, dividerTop, dividerRight, dividerBottom, mPaint);
            }
        }
    }

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
    }
}
复制代码

运行效果:

请将变量dividerLeft赋值为view.getLeft()试试,你就会理解为什么我说“其实,这时候我们每个条目所对应的区域已经变成非透明的区域了。”这句话了。 再给RecyclerView设一个左侧内边距,将变量dividerLeft赋值为parent.getPaddingLeft()试试。

三、onDrawOver()

通过onDraw()方法的运行效果,我们发现它画出来的图案是位于item底部的,而onDrawOver()这个方法绘制的图案是位于item上层的。我们先写个示例代码:

public class DemoItemDecoration extends RecyclerView.ItemDecoration {
    private int mDividerHeight = 40;
    private Paint mPaint;

    public DemoItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.YELLOW);
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.left = 40;
        outRect.right = 40;
        //第一个条目,我们不给它设置上边距
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = mDividerHeight;
        }
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
    }

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int childCount = parent.getChildCount();
        //遍历RecyclerView的所有子view
        for (int i = 0; i < childCount; i++) {
            //看看子view是否是列表中的条目,如果是的话,我们获取它的位置
            View view = parent.getChildAt(i);
            float dividerTop = view.getTop() + 40;
            float dividerLeft = view.getLeft();
            float dividerBottom = view.getTop() + 60;
            float dividerRight = parent.getWidth();
            c.drawRect(dividerLeft, dividerTop, dividerRight, dividerBottom, mPaint);
        }
    }
}
复制代码

效果:

总结

好了,这一篇讲了如何使用ItemDecoration,我们再重新捋一捋:

  1. 写一个类继承ItemDecoration。
  2. 按需求重写getItemOffsets(),onDraw()以及onDrawOver()方法。
  3. 为RecyclerView添加ItemDecoration。

系列文章

《RecyclerView使用指南(一)—— 基本使用》
《RecyclerView使用指南(二)—— 多种ItemLayout》
《RecyclerView使用指南(三)—— 添加分割线和点击事件》
《RecyclerView使用指南(四)—— 使用ItemDecoration》
《RecyclerView使用指南(五)—— 实现吸顶效果》

关注下面的标签,发现更多相似文章
评论