zoukankan      html  css  js  c++  java
  • 自定义RecyclerView.ItemDecoration,实现RecyclerView的分割线效果

    [转] 原文 

    自定义RecyclerView.ItemDecoration,实现RecyclerView的分割线效果

    字数1598 阅读302 评论2 喜欢23

    1.背景

      RecyclerView是谷歌V7包下新增的控件,用来替代ListView和GridView使用的一个控件。在使用的过程中,往往需要使用到divider的效果(item之间的分割线)。而RecyclerView并不像ListView一样自带有divider的属性。而是需要用到RecyclerView.ItemDecoration这样一个类,但是ItemDecoration是一个抽象类,而且android内部并没有给它做一些效果的实现。那么就需要我们自己去继承并实现其中的方法,本文讲述的就是在GridLayoutManager和LinearLayoutManager下如何去实现ItemDecoration。至于RecyclerView.ItemDecoration的具体分析,大家可以去看看这篇文章http://blog.piasy.com/2016/03/26/Insight-Android-RecyclerView-ItemDecoration/ 这里不作过多的阐述。

    2.实现基本的Item的divider

    2.1 创建SpacesItemDecoration

      创建一个类SpacesItemDecoration继承与RecyclerView.ItemDecoration,实现其中的onDraw和getItemOffsets方法,在这里我们的设计是左右距离相等,上下距离相等。

    public class SpacesItemDecoration extends RecyclerView.ItemDecoration {     private int leftRight;     private int topBottom;      public SpacesItemDecoration(int leftRight, int topBottom) {         this.leftRight = leftRight;         this.topBottom = topBottom;     }      @Override     public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {       super.onDraw(c, parent, state);     }      @Override     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {      } }

      在这里我们主要实现的方法是onDraw和getItemOffsets,getItemOffsets重要确定divider的范围,而onDraw是对divider的具体实现。

    2.2 LinearLayoutManager下divider的实现

      首先在getItemOffsets方法中需要判断当前的RecyclerView所采用的哪种LayoutManager。这里要注意的是GridLayoutManager是继承LinearLayoutManager的,所以需要先判断是否为GridLayoutManager。

    private SpacesItemDecorationEntrust getEntrust(RecyclerView.LayoutManager manager) {         SpacesItemDecorationEntrust entrust = null;         //要注意这边的GridLayoutManager是继承LinearLayoutManager,所以要先判断GridLayoutManager         if (manager instanceof GridLayoutManager) {             entrust = new GridEntrust(leftRight, topBottom, mColor);         } else {//其他的都当做Linear来进行计算             entrust = new LinearEntrust(leftRight, topBottom, mColor);         }         return entrust;     }

      然后我们来看具体的实现,首先判断是VERTICAL还是HORIZONTAL。对于VERTICAL,每一个item必需的是top,left和right,但是最后一个item还需要bottom。而对于HORIZONTAL,每一个item必需的是top,left和bottom,但是最后一个item还需要right。

     @Override     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {         LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();         //竖直方向的         if (layoutManager.getOrientation() == LinearLayoutManager.VERTICAL) {             //最后一项需要 bottom             if (parent.getChildAdapterPosition(view) == layoutManager.getItemCount() - 1) {                 outRect.bottom = topBottom;             }             outRect.top = topBottom;             outRect.left = leftRight;             outRect.right = leftRight;         } else {             //最后一项需要right             if (parent.getChildAdapterPosition(view) == layoutManager.getItemCount() - 1) {                 outRect.right = leftRight;             }             outRect.top = topBottom;             outRect.left = leftRight;             outRect.bottom = topBottom;         }     }

      就这样,divider效果就实现了(当然是没有任何的颜色的)。调用方式只需要。

      int leftRight = dip2px(7);   int topBottom = dip2px(7);   rv_content.addItemDecoration(new SpacesItemDecoration(leftRight, topBottom));

    VERTICAL

    HORIZONTAL.png

    2.3 GridLayoutManager下divider的实现

      对于GridLayoutManager下的实现,相比LinearLayoutManager要复杂一些。首先当然是判断VERTICAL还是HORIZONTAL。对于VERTICAL,我们每一项必须的是top和left,但是对于最后一排的还需要bottom,同时对于最右侧的还需要right。根据这些,就很好写出它的一个规则了。同时HORIZONTAL下的也是类似的分析。

     @Override     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {         GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();         //判断总的数量是否可以整除         int totalCount = layoutManager.getItemCount();         int surplusCount = totalCount % layoutManager.getSpanCount();         int childPosition = parent.getChildAdapterPosition(view);         if (layoutManager.getOrientation() == GridLayoutManager.VERTICAL) {//竖直方向的             if (surplusCount == 0 && childPosition > totalCount - layoutManager.getSpanCount() - 1) {                 //后面几项需要bottom                 outRect.bottom = topBottom;             } else if (surplusCount != 0 && childPosition > totalCount - surplusCount - 1) {                 outRect.bottom = topBottom;             }             if ((childPosition + 1) % layoutManager.getSpanCount() == 0) {//被整除的需要右边                 outRect.right = leftRight;             }             outRect.top = topBottom;             outRect.left = leftRight;         } else {             if (surplusCount == 0 && childPosition > totalCount - layoutManager.getSpanCount() - 1) {                 //后面几项需要右边                 outRect.right = leftRight;             } else if (surplusCount != 0 && childPosition > totalCount - surplusCount - 1) {                 outRect.right = leftRight;             }             if ((childPosition + 1) % layoutManager.getSpanCount() == 0) {//被整除的需要下边                 outRect.bottom = topBottom;             }             outRect.top = topBottom;             outRect.left = leftRight;         }     }

      这样,GridLayoutManager的效果就实现了,调用方法跟LinearLayoutManager下是一样的。效果如下


    VERTICAL

    HORIZONTAL

    3.实现Item的带颜色分割线的效果

    3.1 LinearManager下的实现

      上述基本实现了item分割的效果,但是它没有办法设置颜色,颜色,颜色(重要的问题说三遍)。要实现颜色,首先我们得传入一个颜色色值。

    //color的传入方式是resouce.getcolor protected Drawable mDivider;  public SpacesItemDecorationEntrust(int leftRight, int topBottom, int mColor) {         this.leftRight = leftRight;         this.topBottom = topBottom;         if (mColor != 0) {             mDivider = new ColorDrawable(mColor);         }     }

      有了颜色,那么我们就需要去重写onDraw方法了,我们需要去确定绘制的区域。先贴上代码

     @Override     public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {         LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();         //没有子view或者没有没有颜色直接return         if (mDivider == null || layoutManager.getChildCount() == 0) {             return;         }         int left;         int right;         int top;         int bottom;         final int childCount = parent.getChildCount();         if (layoutManager.getOrientation() == GridLayoutManager.VERTICAL) {             for (int i = 0; i < childCount - 1; i++) {                 final View child = parent.getChildAt(i);                 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();                 //将有颜色的分割线处于中间位置                 float center = (layoutManager.getTopDecorationHeight(child) - topBottom) / 2;                 //计算下边的                 left = layoutManager.getLeftDecorationWidth(child);                 right = parent.getWidth() - layoutManager.getLeftDecorationWidth(child);                 top = (int) (child.getBottom() + params.bottomMargin + center);                 bottom = top + topBottom;                 mDivider.setBounds(left, top, right, bottom);                 mDivider.draw(c);             }         } else {             for (int i = 0; i < childCount - 1; i++) {                 final View child = parent.getChildAt(i);                 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();                 //将有颜色的分割线处于中间位置                 float center = (layoutManager.getLeftDecorationWidth(child) - leftRight) / 2;                 //计算右边的                 left = (int) (child.getRight() + params.rightMargin + center);                 right = left + leftRight;                 top = layoutManager.getTopDecorationHeight(child);                 bottom = parent.getHeight() - layoutManager.getTopDecorationHeight(child);                 mDivider.setBounds(left, top, right, bottom);                 mDivider.draw(c);             }         }     }

      RecyclerView的机制是去绘制要显示在屏幕中的view,而没有显示出来的是不会去绘制。所以这边需要使用的是layoutManager.getChildCount()而不是layoutManager.getItemCount()。对于LinearManager下来说,需要绘制分割线的区域是两个item之间,这里分为VERTICAL和HORIZONTAL。我们拿VERTICAL来进行分析,首先获取item以及它的LayoutParams,在这里计算float center = (layoutManager.getTopDecorationHeight(child) - topBottom) / 2;因为一个RecyclerView可以添加多个ItemDecoration,而且方法的调用顺序是先实现所有ItemDecoration的getItemOffsets方法,然后再去实现onDraw方法。目前没有找到办法去解决每个ItemDecoration的具体区域。所以退而求其次的将分割线绘制在所有ItemDecoration的中间区域(基本能满足一般的需求,当然可以自己修改位置满足自己的需求)。
      然后我们要去确定绘制的区域,left就是所有ItemDecoration的宽度,right就是parent的宽度减去所有ItemDecoration的宽度。top是child的底部位置然后还要加上center(center的目的是绘制在中间区域),bottom就是top加上需要绘制的高度。同理在HORIZONTAL模式下可以类似的实现。使用一个ItemDecoration的效果

     int leftRight = dip2px(2);  int topBottom = dip2px(2);  rv_content.addItemDecoration(new SpacesItemDecoration(leftRight, topBottom,getResources().getColor(R.color.colorPrimary)));

    VERTICAL

    HORIZONTAL


      当然你也可以使用多个ItemDecoration

     int leftRight = dip2px(10);  int topBottom = dip2px(10);  rv_content.addItemDecoration(new SpacesItemDecoration(leftRight, topBottom));  rv_content.addItemDecoration(new SpacesItemDecoration(dip2px(2), dip2px(2), getResources().getColor(R.color.colorPrimary)));

    VERTICAL

    HORIZONTAL

    3.2 GridManager下的实现

      GridManager下的实现的步骤类似与LinearManager,不同的是确定绘制分割线的区域。它的分割线的区域是相邻的item之间都需要有分割线。废话不多说,先上代码。

    @Override     public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {         GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();         if (mDivider == null || layoutManager.getChildCount() == 0) {             return;         }         //判断总的数量是否可以整除         int totalCount = layoutManager.getItemCount();         int surplusCount = totalCount % layoutManager.getSpanCount();          int left;         int right;         int top;         int bottom;          final int childCount = parent.getChildCount();         if (layoutManager.getOrientation() == GridLayoutManager.VERTICAL) {              for (int i = 0; i < childCount; i++) {                 final View child = parent.getChildAt(i);                 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();                 //得到它在总数里面的位置                 final int position = parent.getChildAdapterPosition(child);                 //将带有颜色的分割线处于中间位置                 final float centerLeft = (layoutManager.getLeftDecorationWidth(child) - leftRight) / 2;                 final float centerTop = (layoutManager.getTopDecorationHeight(child) - topBottom) / 2;                 //是否为最后一排                 boolean isLast = surplusCount == 0 ?                         position > totalCount - layoutManager.getSpanCount() - 1 :                         position > totalCount - surplusCount - 1;                 //画下边的,最后一排不需要画                 if ((position + 1) % layoutManager.getSpanCount() == 1 && !isLast) {                     //计算下边的                     left = layoutManager.getLeftDecorationWidth(child);                     right = parent.getWidth() - layoutManager.getLeftDecorationWidth(child);                     top = (int) (child.getBottom() + params.bottomMargin + centerTop);                     bottom = top + topBottom;                     mDivider.setBounds(left, top, right, bottom);                     mDivider.draw(c);                 }                 //画右边的,能被整除的不需要右边,并且当数量不足的时候最后一项不需要右边                 boolean first = totalCount > layoutManager.getSpanCount() && (position + 1) % layoutManager.getSpanCount() != 0;                 boolean second = totalCount < layoutManager.getSpanCount() && position + 1 != totalCount;                 if (first || second) {                     //计算右边的                     left = (int) (child.getRight() + params.rightMargin + centerLeft);                     right = left + leftRight;                     top = child.getTop() + params.topMargin;                     //第一排的不需要上面那一丢丢                     if (position > layoutManager.getSpanCount() - 1) {                         top -= centerTop;                     }                     bottom = child.getBottom() - params.bottomMargin;                     //最后一排的不需要最底下那一丢丢                     if (!isLast) {                         bottom += centerTop;                     }                     mDivider.setBounds(left, top, right, bottom);                     mDivider.draw(c);                 }             }         } else {              for (int i = 0; i < childCount; i++) {                 final View child = parent.getChildAt(i);                 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();                 //得到它在总数里面的位置                 final int position = parent.getChildAdapterPosition(child);                 //将带有颜色的分割线处于中间位置                 final float centerLeft = (layoutManager.getLeftDecorationWidth(child) - leftRight) / 2;                 final float centerTop = (layoutManager.getTopDecorationHeight(child) - topBottom) / 2;                 //是否为最后一排                 boolean isLast = surplusCount == 0 ?                         position > totalCount - layoutManager.getSpanCount() - 1 :                         position > totalCount - surplusCount - 1;                 //画右边的,最后一排不需要画                 if ((position + 1) % layoutManager.getSpanCount() == 1 && !isLast) {                     //计算右边的                     left = (int) (child.getRight() + params.rightMargin + centerLeft);                     right = left + leftRight;                     top = layoutManager.getTopDecorationHeight(child);                     bottom = parent.getHeight() - layoutManager.getTopDecorationHeight(child);                     mDivider.setBounds(left, top, right, bottom);                     mDivider.draw(c);                 }                 boolean first = totalCount > layoutManager.getSpanCount() && (position + 1) % layoutManager.getSpanCount() != 0;                 boolean second = totalCount < layoutManager.getSpanCount() && position + 1 != totalCount;                 //画下边的,能被整除的不需要下边                 if (first || second) {                     left = child.getLeft() + params.leftMargin;                     if (position > layoutManager.getSpanCount() - 1) {                         left -= centerLeft;                     }                     right = child.getRight() - params.rightMargin;                     if (!isLast) {                         right += centerLeft;                     }                     top = (int) (child.getBottom() + params.bottomMargin + centerTop);                     bottom = top + topBottom;                     mDivider.setBounds(left, top, right, bottom);                     mDivider.draw(c);                 }             }         }     }

      我们就VERTICAL的情况下来进行分析,首先横向的分割线,只需要在最左侧的item绘制出来的时候进行分割线的绘制就行了。当然最后一排是不需要的。

     if ((position + 1) % layoutManager.getSpanCount() == 1 && !isLast) {                     //计算下边的     left = layoutManager.getLeftDecorationWidth(child);     right = parent.getWidth() - layoutManager.getLeftDecorationWidth(child);     top = (int) (child.getBottom() + params.bottomMargin + centerTop);     bottom = top + topBottom;     mDivider.setBounds(left, top, right, bottom);      mDivider.draw(c); }

      水平的分割线的计算方式类似与LinearLayoutManager下的计算方式。这里不过多阐述。而竖直方向的会有一些区别。由于GridLayoutManager下,item的数量不一定能够刚好整除每排的数量。所以这边的绘制区域是根据每个item来进行确定的。
      能被整除的或者当数量不足的时候最后一项不需要竖直的分割线。同时要注意补齐centerTop(分割线绘制在中间区域的位置)。

     //画右边的,能被整除的不需要右边,并且当数量不足的时候最后一项不需要右边  boolean first = totalCount > layoutManager.getSpanCount() && (position + 1) % layoutManager.getSpanCount() != 0;  boolean second = totalCount < layoutManager.getSpanCount() && position + 1 != totalCount; if (first || second) { //计算右边的    left = (int) (child.getRight() + params.rightMargin + centerLeft);    right = left + leftRight;    top = child.getTop() + params.topMargin;    //第一排的不需要上面那一丢丢     if (position > layoutManager.getSpanCount() - 1) {           top -= centerTop;        }     bottom = child.getBottom() - params.bottomMargin;      //最后一排的不需要最底下那一丢丢    if (!isLast) {        bottom += centerTop;        }    mDivider.setBounds(left, top, right, bottom);    mDivider.draw(c); }

      HORIZONTAL下的情况可以进行类似的分析,代码的调用方式跟LinearLayoutManager下是一样的。


    VERTICAL

    HORIZONTAL

    4 最后

      至此,RecyclerView的divider效果已经基本实现了。当然,你可以在这基础上进行修改,满足自己的一些需求。欢迎大家一起相互交流。代码已经上传至github https://github.com/hzl123456/SpacesItemDecoration
    (ps:在实际的使用过程中,当对RecyclerView的item进行增加和删除的操作是,会使ItemDecoration的分割区域计算错误。原因是在添加和删除操作的时候,只会计算更新的部分区域的OutRect,导致出现问题,这个时候我们只需要在添加和删除操作之后调用RecyclerView的invalidateItemDecorations()方法就可以解决问题了)

  • 相关阅读:
    表单提交
    后台返回来的数据是字符串
    背景图充满屏幕
    微信小程序添加模板消息
    axios
    前端常见的跨域解决方案
    gulp的压缩
    git的使用步骤
    vue项目使用mint UI
    利用HBuilder将vue项目打包成移动端app
  • 原文地址:https://www.cnblogs.com/wxmdevelop/p/6201961.html
Copyright © 2011-2022 走看看