美文网首页
RecyclerView.ItemDecoration 分割线

RecyclerView.ItemDecoration 分割线

作者: FZB | 来源:发表于2019-08-05 09:14 被阅读0次

    RecyclerView 添加分割线

    1默认分割线

    image.png
    //默认分割线 水平分割线
                    recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
    //默认分割线 竖直分割线
                    recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL));
    
    
    

    2自定义分割线样式

    image.png
    
                    dv = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
                    dh = new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL);
                    dv.setDrawable(getResources().getDrawable(R.drawable.divideritemdecoration_v));
                    dh.setDrawable(getResources().getDrawable(R.drawable.divideritemdecoration_h));
                    recyclerView.addItemDecoration(dv);
                    recyclerView.addItemDecoration(dh);
    

    divideritemdecoration_v

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <size android:height="5dp"/>
        <gradient android:startColor="@android:color/holo_red_dark" android:angle="45"
            android:centerColor="@color/colorPrimaryDark"
            android:endColor="@android:color/holo_orange_dark"/>
    </shape>
    

    divideritemdecoration_h

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <size android:width="5dp"/>
      <gradient android:startColor="@android:color/holo_green_light"
          android:angle="90"
          android:centerColor="@color/colorPrimaryDark"
          android:endColor="@android:color/holo_blue_dark"/>
    </shape>
    

    2自定义分割线样式 去除底部右边分割线

    继承 RecyclerView.ItemDecoration
    重写方法

    • onDraw
    • setDrawable
    • getItemOffsets
     public void setDrawable(@NonNull Drawable drawable) {
            if (drawable == null) {
                throw new IllegalArgumentException("Drawable cannot be null.");
            } else {
                this.mDivider = drawable;
            }
        }
    
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
            if (parent.getLayoutManager() != null && this.mDivider != null) {
                if (this.mOrientation == 1) {
                    this.drawVertical(c, parent); //绘制分割线要忽略最后一行
                } else {
                    this.drawHorizontal(c, parent);//绘制分割线要忽略最后一列
                }
    
            }
        }
    //  itemview的偏移就在此
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            if (this.mDivider == null) {
                outRect.set(0, 0, 0, 0);
            } else {
                if (this.mOrientation == 1) {
    //最后一列不偏移
                    outRect.set(0, 0, 0,parent.getAdapter().getItemCount()-parent.getChildAdapterPosition(view)<=parent.getAdapter().getItemCount()%spancount?0:this.mDivider.getIntrinsicHeight());
                } else {
    //最后一行不偏移
                    outRect.set(0, 0, parent.getChildAdapterPosition(view)%spancount!=(spancount-1)?this.mDivider.getIntrinsicWidth():0, 0);
                }
    
            }
        }
    
    

    问题

    我们的自定义分割线宽度过大导致 界面绘制时最后列右边留白,最后行底部留白
    解决问题

    // t top  l left  r right  b bottom
    //偏移距离
    //vindex  行
    //hspancount 总行
    //hindex  列
    //spancount 总列
    
    private int t(int vindex, int hspancount) {
            return vindex*mDivider_V.getIntrinsicHeight()/hspancount;
        }
    
        private int b(int vindex, int hspancount) {
            return (hspancount-1-vindex)*mDivider_V.getIntrinsicHeight()/hspancount;
    
        }
    
        private int l(int hindex) {
            return mDivider_H.getIntrinsicWidth()*hindex/spancount;
        }
    
        private int r(int hindex) {
            return (spancount-1-hindex)*mDivider_H.getIntrinsicWidth()/spancount;
        }
    
    image.png

    源码 https://github.com/fzbbihailantian/RecycleView

    相关文章

      网友评论

          本文标题:RecyclerView.ItemDecoration 分割线

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