美文网首页Android进阶旅程Android技术知识程序员
深入理解 RecyclerView之ItemDecoration

深入理解 RecyclerView之ItemDecoration

作者: 赵小缺 | 来源:发表于2017-12-25 16:49 被阅读86次

    RecyclerView已经推出了两年多了,大家也都领教了它的强大,但是它也有不足之处,没有分割线!现通过官方给的样例和画一些图帮助分析RecyclerView是如何绘制间隔线的。

    学习思路:

    一.基本知识点
    二.Item和间隔线的绘制流程
    三.ItemDecoration代码讲解
    1.item垂直排列分析
    2.item横向排列分析
    3.网格间隔线分析

    一、基本知识点

    偏移量的概念,看清下图每张图中设置的四个参数,分别代表了(左,上,右,下)的偏移量。红色部分就是偏移出去的部分,其实就是我们需要的间隔线,不过我们只需要一个方向的偏移量就够了,就是在下面的或者右边的偏移量,后面会细讲。


    image.png

    内边距padding,和外边距margin,分析代码的时候会用到。


    image.png

    二、Item和间隔线的绘制流程

    RecyclerView绘制item和间隔线的流程:item1——间隔线——Item2——间隔线...如此往复,所以绘制完item每次绘制间隔线的时候都需要测量绘制。

    先看一张图: image.png

    一定要把间隔线想象成矩形,就是图中黑色矩形

    三、ItemDecoration代码讲解

    RecyclerView没有像之前ListView提供divider属性,而是提供了方法recyclerView.addItemDecoration(),其中ItemDecoration需要我们自己写,有的童鞋可能会偷懒去网上找别人写好的,但是如果功能稍加改动就不之所错了,所以了解原理很重要。

    ItemDecoration类主要是三个方法:

    public void onDraw(Canvas c, RecyclerView parent, State state)
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)
    public void onDrawOver(Canvas c, RecyclerView parent, State state)
    

    主要讲解前面两个方法。
    我们自己写的类需要继承ItemDecoration且重写onDraw(),getItemOffsets()方法才能完成我们需要的间隔线。getItemOffsets()方法第一个参数可以看出,绘制线条其实就是绘制一个矩形,通过方法名可以看出是获得条目的偏移量,只需要实现outRect.set(left,top,right,bottom);四个参数就是左上右下四个方向的偏移量,
    我们可以通过LinearLayoutManager.VERTICAL来判断是绘制横向线条还是纵向线条。

    @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
                State state) {
            
            if(mOrientation == LinearLayoutManager.VERTICAL){
                //item垂直排放,所以绘制水平线条,左上右偏移量都是0
                outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
            }else{//item水平排放,所以绘制处置线条,左上下偏移量都是0
                outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0 );
            }
            
        }
    
    

    mDivider.getIntrinsicWidth()是需要绘制的Drawable的高度。
    再来看onDraw()方法

    @Override
        public void onDraw(Canvas c, RecyclerView parent, State state) {
            if(mOrientation == LinearLayoutManager.VERTICAL){
                  //垂直,这里的垂直是item垂直,画水平线
                drawVertical(c,parent);
            }else{//水平,这里的水平是item水平,画垂直线条
                drawHorizontal(c,parent);
            }
            
            super.onDraw(c, parent, state);
        }
        
        private void drawHorizontal(Canvas c, RecyclerView parent) {
                    //这里的水平是item水平,画垂直线条
            int top = parent.getPaddingTop();
            int bottom = parent.getHeight() - parent.getPaddingBottom();
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount ; i++) {
                View child = parent.getChildAt(i);
                
                RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
                int left = child.getRight() + params.rightMargin + Math.round(ViewCompat.getTranslationX(child));
                int right = left + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top , right, bottom);
                mDivider.draw(c);
            }
        }
    
        private void drawVertical(Canvas c, RecyclerView parent) {
            // 这里的垂直是item垂直,画水平线
            int left = parent.getPaddingLeft();
            int right = parent.getWidth() - parent.getPaddingRight();
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount ; i++) {
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
                int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
                int bottom = top + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top , right, bottom);
                mDivider.draw(c);
            }
        }
    
    

    看清楚代码里的注解,不要搞混了。

    (一)item垂直排列分析

    查看drawVertical(Canvas c, RecyclerView parent)方法

    private void drawVertical(Canvas c, RecyclerView parent) {
            // 这里的垂直是item垂直,画水平线
            int left = parent.getPaddingLeft();
            int right = parent.getWidth() - parent.getPaddingRight();
            int childCount = parent.getChildCount();
            //循环的意思是:每个item就是一个child,每个item下面有一个线条
            for (int i = 0; i < childCount ; i++) {
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
                int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
                int bottom = top + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top , right, bottom);
                mDivider.draw(c);
            }
        }
    
    

    本来是想把注解写在代码里的,发现写完之后代码很乱很多,显得很困难的样子,为了不造成视觉困难就在下面解析代码吧,先看最后两行很好理解,

    mDivider.setBounds(left, top , right, bottom);
    mDivider.draw(c);
    

    setBounds(int left, int top, int right, int bottom),
    这个四参数指的是drawable将在被绘制在canvas的哪个矩形区域内,这个区域就是下图中黑色矩形的区域!核心代码就是这四个int值left、right、top、bottom。


    image.png
    int left = parent.getPaddingLeft();
    

    很好理解,父组件RecyclerView左内边距,理解为左侧开始的地方。

    int right = parent.getWidth() - parent.getPaddingRight();
    

    宽度减去右内边距,理解为右侧结束的地方。

    int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
    
    image.png

    需要竖着滑动,垂直方向的属性动画的平移,要加上ViewCompat.getTranslationY(child),Math.round()四舍五入。
    上图中有三条红线,第一条就是child.getBottom的位置,第二条跟第一条之间的距离就是params.bottomMargin(图中稍稍有误),不要被三条红线误导了,黑色的矩形框才是我们的间隔线!!!所以bottom就很好写了,它就是top加间隔线的高度啦!就是图中第三条线。此时间隔线绘制结束,尽管去调用吧~如果理解了画横线的过程,那么画竖线就很简单了,其实就是把上图逆时针旋转90度,然后做分析。

    (二)item横向排列分析

    这次我们反过来做,先不看代码,先来看图分析left、right、top、bottom这几个值该怎么写。


    image.png

    可以想到top和bottom很好写:
    1、int top = parent.getPaddingTop();
    2、int bottom = parent.getHeight- parent.getPaddingBottom();

    来看图中第一条红线的位置:child.getRight
    第一条红线和第二条红线的距离:params.rightMargin,不难写出:
    3、int left = child.getRight() + params.rightMargin + Math.round(ViewCompat.getTranslationX(child));
    左右滑动需要加上水平方向动画的平移ViewCompat.getTranslationX(child)

    right就是left加上mDivider的宽度~
    4、int right = left + mDivider.getIntrinsicHeight();
    查看drawHorizontal(Canvas c, RecyclerView parent) 方法做一下对比:

    private void drawHorizontal(Canvas c, RecyclerView parent) {
             //这里的水平是item水平,画垂直线条
            int top = parent.getPaddingTop();
            int bottom = parent.getHeight() - parent.getPaddingBottom();
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount ; i++) {
                View child = parent.getChildAt(i);
                
                RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
                int left = child.getRight() + params.rightMargin + Math.round(ViewCompat.getTranslationX(child));
                int right = left + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top , right, bottom);
                mDivider.draw(c);
            }
        }
    

    是不是完全一样?

    (三)网格间隔线分析

    网格间隔线虽然有点复杂,但如果慢慢分析,还是可以写出来的,要注意细节。其实就是横线和竖线都画,对于某一个item来说就是右边添加偏移量和下边添加偏移量。

    @Override
        @Deprecated
        public void getItemOffsets(Rect outRect, int itemPosition,
                RecyclerView parent) {
            int right = mDivider.getIntrinsicWidth();
            int bottom = mDivider.getIntrinsicHeight();
            outRect.set(0, 0, right, bottom);
        }
    

    onDraw(Canvas c, RecyclerView parent, State state)方法里就不用做判断if(mOrientation == LinearLayoutManager.VERTICAL){},因为横竖线都要画的。

    drawVertical(c,parent);// 绘制水平间隔线
    drawHorizontal(c,parent);//绘制垂直间隔线
    

    先上图,一定要画图。


    image.png
    private void drawVertical(Canvas c, RecyclerView parent) {
            //绘制垂直间隔线(垂直的矩形)
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
                int left = child.getRight() + params.rightMargin;
                int right = left + mDivider.getIntrinsicWidth();
                int top = child.getTop() - params.topMargin;
                int bottom = child.getBottom() + params.bottomMargin;
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    

    获得的图形是这样的:


    image.png

    绘制横线间隔线:

    private void drawHorizontal(Canvas c, RecyclerView parent) {
            // 绘制水平间隔线
            int childCount = parent.getChildCount();
            for (int i = 0; i < childCount; i++) {
                View child = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
                int left = child.getLeft() - params.leftMargin;
                int right = child.getRight()+ params.rightMargin;
                int top = child.getBottom() + params.bottomMargin;
                int bottom = top + mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    
    image.png

    最终绘制结果是这样的:


    image.png

    哎呦?线条交叉的地方为什么没有绘制呢?其实如果分割线非常的细这样写是没有问题的,已经实现了网格的分割。如果非要写的完美把交叉区域也写上话,也很简单——只需要在drawVertical或者drawHorizontal的其中一个加入mDivider的宽或高即可(如果两个里面都加的话就会出现重叠绘制交叉处的bug);
    那么我们来修改drawVertical方法里的right就行了:
    int right = child.getRight()+ params.rightMargin+mDivider.getIntrinsicWidth();

    当然,在实际开发的过程中会涉及到分别判断出首行,末行,首列,末列,根据是否绘制边界线(drawBorderLine)来进行处理偏移,这里就不多说了。

    相关文章

      网友评论

        本文标题:深入理解 RecyclerView之ItemDecoration

        本文链接:https://www.haomeiwen.com/subject/sxuxgxtx.html