ItemDecoration解析(二) onDraw onDrawOver

上篇文章介绍了利用ItemDecorationgetItemOffsets方法来设置每个ItemView的间隔,这篇文章继续介绍下ItemDecoration剩下的两个方法(未过时的)——onDrawonDrawOver

在官方的开发文档中有指出,onDraw是在itemview绘制之前,onDrawOver是在itemview绘制之后。

All ItemDecorations are drawn in the order they were added, before the item views (in onDraw() and after the items (in onDrawOver(Canvas, RecyclerView, RecyclerView.State).

相信稍微了解过Android中View的绘制流程的都知道,View先会调用draw方法,在draw中又会调用onDraw方法。 而在RecyclerViewdraw方法中会先通过super.draw() 调用父类也就是Viewdraw方法,进而继续调用RecyclerViewOnDraw方法,ItemDecorationsonDraw方法就在此时会被调用,RecyclerView执行完super.draw()之后,ItemDecorationsonDrawOver方法也被调用,这也就解释了为什么说onDraw会绘制在itemview之前,表现形式是在最底层(抽象的说法,最底层应该是background),onDrawOver是在itemview绘制之后,表现形式在最上层。如果你觉得有点绕的话,可以看看下面的部分源码:

    /**
     * RecyclerView的draw方法
     * @param c
     */
    @Override
    public void draw(Canvas c) {
        // 调用父类也就是View的draw方法
        super.draw(c);
        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            // 执行ItemDecorations的onDrawOver方法
            mItemDecorations.get(i).onDrawOver(c, this, mState);
        }
    }

    /**
     *  View的draw方法
     * @param canvas
     */
    @CallSuper
    public void draw(Canvas canvas) {
        ....
        // View会继续调用onDraw
        if (!dirtyOpaque) onDraw(canvas);
        ....
    }

    /**
     * RecyclerView的onDraw方法
     * @param c
     */
    @Override
    public void onDraw(Canvas c) {
        super.onDraw(c);
        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            // 执行ItemDecorations的onDraw方法
            mItemDecorations.get(i).onDraw(c, this, mState);
        }
    }

通过上面的分析,我们大概的了解了它的原理,接下来再来看看怎么用吧。

一般情况下,一个列表中的item除了上篇文章中有间隔那种表现形式,还有另一种带分割线的表现是形式。如下图所示:

之前在使用ListView的时候,可以通过在xml中定义中divider dividerHeight来实现,不过RecyclerView并没有这些属性,在未使用ItemDecoration时,一般都是在Itemxml布局的底部设置一个View来充当Divider,然后在ViewHolder根据position来控制,这样同样显得ViewHolder中有很一些看上去很不爽的代码。

那么问题来了,用ItemDecoration怎么实现呢?其实很简单,只需要在上篇文章的基础上,把间隔处绘制相应颜色就行了,废话不多说,我们来实现吧。

  1. 通过构造方法传入divider的高度(orientationHORIZONTAL时表示宽度),还有颜色。

        public DividerDecoration(int height, Context ctx) {
            this(height, Color.GRAY, ctx);
        }
    
    
        public DividerDecoration(int height, @ColorInt int color, Context ctx) {
            this.mDividerHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, height, ctx.getResources().getDisplayMetrics());
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setColor(color);
        }
    
  2. 设置每个Item间的间隔,留出空间画divider

        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
            if (layoutManager instanceof LinearLayoutManager) {
                if (((LinearLayoutManager) layoutManager).getOrientation() == LinearLayoutManager.HORIZONTAL) {
                    if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1)
                        outRect.set(0, 0, (int) mDividerHeight, 0);
                } else {
                    if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1)
                        outRect.set(0, 0, 0, (int) mDividerHeight);
                }
            }
        }
    
  3. divider

        @Override
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
            RecyclerView.LayoutManager manager = parent.getLayoutManager();
            if (manager instanceof LinearLayoutManager) {
                if (((LinearLayoutManager) manager).getOrientation() == LinearLayoutManager.VERTICAL) {
                    drawVertical(c, parent);
                } else {
                    drawHorizontal(c, parent);
                }
            }
        }
    
        /**
         * 画divider (orientation为vertical)
         *
         * @param c
         * @param parent
         */
        private void drawVertical(Canvas c, RecyclerView parent) {
            // recyclerView是否设置了paddingLeft和paddingRight
            final int left = parent.getPaddingLeft();
            final int right = parent.getWidth() - parent.getPaddingRight();
            final int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                final View child = parent.getChildAt(i);
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                        .getLayoutParams();
                // divider的top 应该是 item的bottom 加上 marginBottom 再加上 Y方向上的位移
                final int top = child.getBottom() + params.bottomMargin +
                        Math.round(ViewCompat.getTranslationY(child));
                // divider的bottom就是top加上divider的高度了
                final int bottom = (int) (top + mDividerHeight);
                c.drawRect(left, top, right, bottom, mPaint);
            }
        }
    
        /**
         * 画divider (当orientation为horizontal)
         *
         * @param c
         * @param parent
         */
        private void drawHorizontal(Canvas c, RecyclerView parent) {
            // 和drawVertical差不多 left right 与 top和bottom对调一下
            final int top = parent.getPaddingTop();
            final int bottom = parent.getHeight() - parent.getPaddingBottom();
            final int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                final View child = parent.getChildAt(i);
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                        .getLayoutParams();
                final int left = child.getRight() + params.rightMargin +
                        Math.round(ViewCompat.getTranslationX(child));
                final int right = (int) (left + mDividerHeight);
                c.drawRect(left, top, right, bottom, mPaint);
            }
        }
    

其实重写onDraw或者onDrawOver都能实现上图的效果,因为这里并没有层级之分,当有其他的需求时,我们只需要记住onDraw在绘制ItemView之前绘制,onDrawOver会在绘制ItemView之后绘制,然后根据实际情况处理就行了。下一篇,我们再用ItemDecoration实现更好玩的——stickHeader的效果,先来个图,预告下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • 特别声明: 本文转发自:【江清清的博客】http://blog.csdn.net/developer_jiangq...
    _猜火车_阅读 37,427评论 11 70
  • 这篇文章分三个部分,简单跟大家讲一下 RecyclerView 的常用方法与奇葩用法;工作原理与ListView比...
    LucasAdam阅读 4,385评论 0 27
  • LinearLayoutManager情况 public class DividerItemDecoration ...
    43d60efa37c7阅读 717评论 0 0
  • 梧桐疏影,月入窗。 隔帘犹听,风如诉。 重掩门,幕更深, 寄与谁听? 岁已穷,芳菲暮, 月华楼满,流年虚度, 惊醒...
    玉生烟阅读 360评论 0 4
  • 开始认真的去喜欢一个人,认真的去做一件事情
    compete阅读 133评论 0 0