绘制RecyclerView的分隔线

作者: CSU_IceLee | 来源:发表于2017-03-18 09:29 被阅读757次

    RecyclerView

    现在开发Android的都知道,RecyclerView可以替代ListView和GridView,因为它的自由度很高,我们可以很随意的展示我们的数据集,还有默认的动画!但是有一个瑕疵,那就是没有提供一个分隔线的实现类,只有一个抽象类(RecyclerView.ItemDecoration)等着我们自己去实现!不过实现起来还是很简单的。

    自定义ItemDecoration的步骤(我以竖向举例)

    1. 新建一个类,继承自RecyclerView.ItemDecoration
    2. 把各个item之间的距离加大!留出空间给我们要绘制的分隔线。所以要重写getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)方法,设置偏移量!
    3. 绘制分隔线到上面设置的间距,重写onDraw()方法。

    代码实现

    public class MyItemDecoration extends RecyclerView.ItemDecoration {
        //分隔线
        Drawable mDivider;
    
        //我们通过获取系统属性中的listDivider来添加,在系统中的AppTheme中设置
        public static final int[] ATRRS  = new int[]{
                android.R.attr.listDivider
        };
        public MyItemDecoration(Context context, int orientation){
            TypedArray ta = context.obtainStyledAttributes(ATRRS);
            mDivider = ta.getDrawable(0);
            ta.recycle();
        }
    
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
           int pos =parent.getChildLayoutPosition(view);//得到当前view的位置
           if(pos != parent.getAdapter().getItemCount()-1) {//如果不是最后一个view 那么留出空间
                //设置paddingLeft,paddingTop, paddingRight, paddingBottom
                outRect.set(0,0,0,mDivider.getIntrinsicHeight());
                //mDivider.getIntrinsicHeight()是获取我们定义的分隔线的高度!
              }
        }
    }
    
    设置offset后的效果

    我们可以看到已经有白色的空间了!我们想用自定义的颜色去填充它,接来下我们先在drawable目录下建一个shape,作为我们的divider:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/grey"></solid>
    <size android:height="4dp"></size>
    </shape>
    

    然后在styles的主题AppTheme里设置:

    <item name="android:listDivider">@drawable/divider_bg</item>
    

    然后我们继续绘制我们的分隔线,重写onDraw()方法:

        @Override
        public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
            //设置分隔线的left和right
            int left = parent.getPaddingLeft();
            int right = parent.getWidth() - parent.getPaddingRight();
    
            for (int i = 0; i < parent.getChildCount(); i++) {
                View view = parent.getChildAt(i);
                RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) view.getLayoutParams();
                //分隔线的top和bottom
                int top = view.getBottom()+params.bottomMargin;
                int bottom = top + mDivider.getIntrinsicHeight();
                //分隔线的绘制区域
                mDivider.setBounds(left,top,right,bottom);
                //把分隔线绘制到canvas
                mDivider.draw(c);
            }
        }
    

    然后运行结果:


    运行结果

    我们可以在shape中画出渐变效果,然后分隔符就变成这样了:

    渐变运行结果
    到此我们就完工了,很简单,只需要重写两个方法就可以了!
    下一篇:绘制分组悬浮分隔栏

    相关文章

      网友评论

        本文标题:绘制RecyclerView的分隔线

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