ItemDecoration解析(二) onDraw onDrawOver

转载于：http://www.jianshu.com/p/6a093bcc6b83

 
 

  
  
上篇文章介绍了利用ItemDecoration的getItemOffsets方法来设置每个ItemView的间隔，这篇文章继续介绍下ItemDecoration剩下的两个方法（未过时的）——onDraw和onDrawOver。

  
  
在官方的开发文档中有指出，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方法。 而在RecyclerView的draw方法中会先通过super.draw() 调用父类也就是View的draw方法，进而继续调用RecyclerView的OnDraw方法，ItemDecorations的onDraw方法就在此时会被调用，RecyclerView执行完super.draw()之后，ItemDecorations的onDrawOver方法也被调用，这也就解释了为什么说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时，一般都是在Item的xml布局的底部设置一个View来充当Divider，然后在ViewHolder根据position来控制，这样同样显得ViewHolder中有很一些看上去很不爽的代码。
  
  
那么问题来了，用ItemDecoration怎么实现呢？其实很简单，只需要在上篇文章的基础上，把间隔处绘制相应颜色就行了，废话不多说，我们来实现吧。
  
  
通过构造方法传入divider的高度(orientation为HORIZONTAL时表示宽度)，还有颜色。
 ```java
 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);
    }
```
  
  
设置每个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);
             }
         }
     }
画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的效果，先来个图，预告下。

    
    

     
     
    
    
 
 

作者：static_sadhu
链接：http://www.jianshu.com/p/6a093bcc6b83
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。