RecycleView分割线、分组、粘性布局之ItemDecoration

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yoonerloop/article/details/80444523

    我们在使用 ListView 的时候要设置分割线只要在xml文件中,使用android:divider就可以了,但是在RecyclerView 却没有直接的设置方法。ListView中要实现分组效果、粘性布局,绝大多数都会使用PinnedSectionListView、StickyListHeaders等开源框架来实现这个功能,那么在RecycleView中该怎么使用呢?接下来就通过RecycleView的ItemDecoration来实现这些功能。

ItemDecoration类主要包含三个方法:

  •     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)
  •     public void onDraw(Canvas c, RecyclerView parent, State state)
  •     public void onDrawOver(Canvas c, RecyclerView parent, State state)
    方法一:可以实现类似padding的效果。
    方法二:可以实现类似绘制背景的效果,内容在底部。

    方法三:可以绘制在内容的上面,覆盖内容。

    需要注意的是onDraw在绘制ItemView之前绘制,onDrawOver会在绘制ItemView之后绘制,使用onDraw可以实现分割线效果,使用onDrawOver可以实现蒙层效果,二者可以混合使用,也可以实现一样的效果,实际使用中应该选择合适的。

一、RecycleView的下划线

1、获取下划线的Drawable对象

    这里使用Android自带的android.R.attr.listDivider下划线样式,在构造方法里面得到Drawable:

        final TypedArray a = context.obtainStyledAttributes(android.R.attr.listDivider);
        mDivider = a.getDrawable(0);
        a.recycle();
2、设置padding

    getItemOffsets方法中设置Margin:

       outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
       或者:
       outRect.bottom = mDivider.getIntrinsicHeight();
3、绘制
     //获取Recycleview的left、right
    final int left = parent.getPaddingLeft();
    final int right = parent.getWidth() - parent.getPaddingRight();
    //获取Recycleviewitem个数
    final int childCount = parent.getChildCount();
    //遍历每一个item,给ItemDecoration绘制线条
    for (int i = 0; i < childCount; i++) {
        final View child = parent.getChildAt(i);
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                .getLayoutParams();
        final int top = child.getBottom() + params.bottomMargin;
        final int bottom = top + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);

在Activity加入:

recycleview.addItemDecoration(new DividerDecoration(this));

运行效果:



完整代码:

public class DividerDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };

    private Drawable mDivider;

    public DividerDecoration(Context context) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
    }


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        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();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }
}

二、RecyclerView分组

    通过RecycleView的下划线的设置方法,下一步扩展RecyclerView,使其显示为分组的效果,原理也类似,绘制分组首先需要绘制一个分组的View,和绘制一个文字的View,也就是说View需要两个,那么就需要定义两个画笔进行绘制。同时分组也需要一个分组的依据,这里根据以日期为例进行分组,同一日期的为一组。

1、定义分组的依据接口
    public interface DecorationCallback {
        String getData(int position);
    }
2、初始化绘制文字的画笔和分组背景画笔。

    这里初始化画笔也需要在构造方法里进行:

    (1)View的画笔初始化

    Paint paint = new Paint();
    paint.setColor(ContextCompat.getColor(context, R.color.bg_header));

    (2)文字画笔的初始化

    Paint textPaint = new TextPaint();
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);//普通字体
    textPaint.setFakeBoldText(false);//不加粗
    textPaint.setAntiAlias(true);//抗锯齿
    textPaint.setTextSize(40);//文字大小
    textPaint.setColor(Color.BLACK);//背景颜色
    textPaint.setTextAlign(Paint.Align.LEFT);//绘制起始位置
3、设置分组的padding

    分组的padding用于显示分组的head布局,绘制背景颜色、绘制文字等需求,这里需要明白那些部分需要设置padding,上面说过咱们是依据日期分组的,那个就要根据日期判断,日期相同的为一组,不同的视为不同的分组。

    (1)分组依据

    如果是第一个则视为新的分组,记录当前的日期,然后将后面的和上一个日期对比,一样则为同一个分组,不一样则为不同的分组。

    private boolean isHeader(int pos) {
        if (pos == 0) {
            return true;
        } else {
            String preData = callback.getData(pos - 1);
            String data = callback.getData(pos);
            return !preData.equals(data);
        }
    }

    (2)设置padding

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        //获取绘制的item所在的位置
        int pos = parent.getChildAdapterPosition(view);
        String data = callback.getData(pos);
        if (TextUtils.isEmpty(data)) {
            return;
        }
        //不同组、和第一个才添加padding,其他的不处理
        if (pos == 0 || isHeader(pos)) {
            outRect.top = topHead;
        } else {
            outRect.top = 0;
        }
    }
3、绘制

    矩形的绘制比较简单,这里着重介绍下TextView的绘制。一般而言,绘制的起始位置是所画图形对应的矩形的左上角点。但在drawText中是非常例外的,y所代表的是基线的位置,只要x坐标、基线位置、文字大小确定以后,文字的位置就确定的了,所以这边需要处理基线位置,才能使文字垂直居中,基线的处理如下:

    Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
    float baseline = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top) / 2;

    绘制原理看代码备注:

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        //获取绘制起始点
        int left = parent.getPaddingLeft();
        //获取绘制终点
        int right = parent.getWidth() - parent.getPaddingRight();
        //获取RecyclerView中item的个数
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            //获取item的View
            View view = parent.getChildAt(i);
            //获取所在位置
            int position = parent.getChildAdapterPosition(view);
            //获取回调日期
            String textLine = callback.getData(position);
            if (TextUtils.isEmpty(textLine)) {
                return;
            }
            //绘制分组日期
            if (position == 0 || isHeader(position)) {
                float top = view.getTop() - topHead;
                float bottom = view.getTop();
                //绘制矩形
                Rect rect = new Rect(left, (int) top, right, (int) bottom);
                c.drawRect(rect, paint);
                //绘制文字基线,文字的的绘制是从绘制的矩形底部开始的
                Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
                float baseline = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top) / 2;
                textPaint.setTextAlign(Paint.Align.CENTER);//文字居中
                //绘制文本
                c.drawText(textLine, rect.centerX(), baseline, textPaint);
            }
        }
    }

    这样这个分组就完成了,在Activity中进行使用,注意ItemDecoration是可以叠加的:

    recycleview.addItemDecoration(new DividerDecoration(this));
    recycleview.addItemDecoration(new SectionDecoration(this, new SectionDecoration.DecorationCallback() {
        @Override
        public String getData(int position) {
            return mDataList.get(position).data;
        }
    }));

效果如下:



    源码地址:https://github.com/yoonerloop/StickyRecycleView 点击打开链接

三、RecyclerView粘性布局

    粘性头布局要求头常驻布局最上面,和RecycleView滑动与不滑动没有关系,并且随着RecycleView的滑动header的数据依据特定的分组变化,在这种情况下显然onDrawOver更加合适,因此需要重写onDrawOver方法,在这个方法里面处理,而不是在Draw方法里面进行处理。构造方法与getItemOffsets方法保持不变,和上面分组的一致。onDrawOver方法重写的如下:

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        //获取当前可见的item的数量,不包括分组项,注意区分下面的
        int childCount = parent.getChildCount();
        //获取所有的的item个数,源码中不建议使用Adapter中获取
        int itemCount = state.getItemCount();
        //考虑padding,得到绘制的x轴起始点和终点的坐标
        int left = parent.getLeft() + parent.getPaddingLeft();
        int right = parent.getRight() - parent.getPaddingRight();
        //获取上一个和当前的日期
        String preDate;
        String currentDate = null;
        //注意:这里不能使用itemCount
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);
            String textLine = callback.getData(position);
            //前一个Date作为preDate
            preDate = currentDate;
            //获取当前的currentDate
            currentDate = callback.getData(position);
            //日期相同,跳出本次循环
            if (TextUtils.isEmpty(currentDate) || TextUtils.equals(currentDate, preDate)) {
                continue;
            }
            if (TextUtils.isEmpty(textLine)) {
                continue;
            }
            int viewBottom = view.getBottom();
            float textY = Math.max(topHead, view.getTop());
            //下一个和当前不一样,item小于header的高度时候移动当前的header
            if (position + 1 < itemCount) {
                String nextData = callback.getData(position + 1);
                if (!currentDate.equals(nextData) && viewBottom < textY) {
                    textY = viewBottom;
                }
            }
            //不断的触发Canvas绘制,生成动态效果
            Rect rect = new Rect(left, (int) textY - topHead, right, (int) textY);
            c.drawRect(rect, paint);
            //绘制文字基线,文字的的绘制是从绘制的矩形底部开始的
            Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
            float baseline = (rect.bottom + rect.top - fontMetrics.bottom - fontMetrics.top) / 2;
            textPaint.setTextAlign(Paint.Align.CENTER);//文字居中
            //绘制文本
            c.drawText(textLine, rect.centerX(), baseline, textPaint);
        }
    }

    原理总结:

    浮在itemView上层的header被顶上去和被拉下来的效果,只需要当每组最后一个Item的bottom小于header的height时,让header跟随这个item就行,换句话说就是此时让header的bottom等于即将消失的Item的bottom。这里的核心代码如下:

    int viewBottom = view.getBottom();
    float textY = Math.max(topHead, view.getTop());
    //下一个和当前不一样,item小于header的高度时候移动当前的header
    if (position + 1 < itemCount) {
        String nextData = callback.getData(position + 1);
        if (!currentDate.equals(nextData) && viewBottom < textY) {
            textY = viewBottom;
        }
    }
    //不断的触发Canvas绘制,生成动态效果
    Rect rect = new Rect(left, (int) textY - topHead, right, (int) textY);

    1、viewBottom:即每个item的bottom距离屏幕的最上边的距离。

    2、textY:在设定的header的高度与每个item的top距离屏幕的最上边的距离之间取最大的。如果header<top会导致存在间隙;如果header>top,会存在下拉延迟,所以一般情况下topHead和view.getTop()相等。

    3、viewBottom < textY:滑动的viewBottom的距离小于header的距离,才使得header的y坐标发生变化,使得header的y坐标动态的等于viewBottom,这样就能实现上推效果。



源码地址:https://github.com/yoonerloop/StickyRecycleView 记得start点赞哦吐舌头点击打开链接


展开阅读全文

没有更多推荐了,返回首页