Recyclerview实现悬浮效果

之前做项目的时候都是直接用的网上找的，也没仔细研究，现在趁着闲暇时间，研究了一下如何实现。

先看下我们要实现的效果

demo.gif

实现方式

通过继承Recyclerview 的ItemDecoration来自定义分割线

相信大家对recyclerview的使用都很熟悉，这里就不在赘诉如果不熟悉的请看这里
Android RecyclerView 使用完全解析 体验艺术般的控件

ItemDecoration

我们先来了解下这个类

public class StickyDecoration extends RecyclerView.ItemDecoration {
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);
}

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

}
主要的方法就是这三个

getItemOffsets：通过Rect为每个Item设置偏移，用于绘制Decoration。

onDraw：通过该方法，在Canvas上绘制内容，在绘制Item之前调用。（如果没有通过getItemOffsets设置偏移的话，Item的内容会将其覆盖）

onDrawOver：通过该方法，在Canvas上绘制内容,在Item之后调用。(画的内容会覆盖在item的上层)

其之间的关系如下图所示
(图片是借用别人的0.0)

1F6151HP6-2109-1.png

搞清楚这三个方法是干什么的，就可以想怎么玩就怎么玩了。
我们要实现分隔条悬浮效果，首先要把分隔条给绘制出来。

/**
 * 自定义分割线 实现悬浮效果
 * Created by Administrator on 2018/3/28.
 */
public class StickyDecoration extends RecyclerView.ItemDecoration {

private final Paint paint;
private int mDecorationHeight = 40;
public StickyDecoration() {
    super();
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.parseColor("#FF4081"));
}

/**
 * 会在绘制item之前进行绘制 如果没有在getItemOffsets中设置偏移的话，会被item覆盖
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
    int childCount = parent.getChildCount();
    int left = parent.getLeft();
    int right = parent.getRight();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        int decorationBottom = child.getTop();  //item的top 也就是decoration的bottom
        int top = decorationBottom - mDecorationHeight; //计算出decoration的top
        c.drawRect(left,top,right,decorationBottom,paint); //绘制
    }
}

/**
 *在item 之后进行绘制， 会覆盖在item之上
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
    outRect.top = mDecorationHeight; //为每个decoration预留空间
}
}

l.gif

现在是实现了为每个item添加decoration的效果
如果要实现悬浮的效果应该怎么做？
重点就在drawOver方法中
因为它是绘制在item之上的，所以我们就可以控制decoration实现悬浮效果

接着来

/**
 * 自定义分割线 实现悬浮效果
 * Created by Administrator on 2018/3/28.
 */

public class StickyDecoration extends RecyclerView.ItemDecoration {


private final Paint paint;
private int mDecorationHeight = 40;
OnTagListener listener;
private final Paint mTextPaint;

public StickyDecoration(OnTagListener listener) {
    super();
    this.listener = listener;
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.parseColor("#FF4081"));
    mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mTextPaint.setColor(Color.parseColor("#ffffff"));
    mTextPaint.setTextSize(16);
}

/**
 * 会在绘制item之前进行绘制 如果没有在getItemOffsets中设置偏移的话，会被item覆盖
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
//因为在onDrawOver方法中，已经实现了绘制，所以这里就不需要了
  /*  int childCount = parent.getChildCount();
    int left = parent.getLeft();
    int right = parent.getRight();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        int decorationBottom = child.getTop();  //item的top 也就是decoration的bottom
        int top = decorationBottom - mDecorationHeight; //计算出decoration的top
        c.drawRect(left,top,right,decorationBottom,paint); //绘制
    }*/
}

/**
 *在item 之后进行绘制， 会覆盖在item之上
 * @param c
 * @param parent
 * @param state
 */
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);

    int itemCount = state.getItemCount();//获取所有item的数量
    int childCount = parent.getChildCount();//获取当前屏幕显示的item数量
    int left = parent.getLeft();
    int right = parent.getRight();
    String preTag;
    String curTag = null;
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        int position = parent.getChildAdapterPosition(child);//获取在列表中的位置
        preTag = curTag;
        curTag = listener.getTag(position);//获取当前位置tag
        if (curTag==null|| TextUtils.equals(preTag,curTag)) //如果两个item属于同一个tag，就不绘制
            continue;

        int bottom = child.getBottom(); //获取item 的bottom
        float tagBottom = Math.max(mDecorationHeight,child.getTop());//计算出tag的bottom
        if (position+1<itemCount)  //判断是否是最后一个
        {
            String nextTag = listener.getTag(position + 1); //获取下个tag
            if (!TextUtils.equals(curTag,nextTag)&&bottom<tagBottom) //被顶起来的条件 当前tag与下个tag不等且item的bottom已小于分割线高度
            {
                tagBottom = bottom; //将item的bottom值赋给tagBottom 就会实现被顶上去的效果
            }
        }
        c.drawRect(left,tagBottom-mDecorationHeight,right,tagBottom,paint); //绘制tag文字
        c.drawText(curTag,right/2,tagBottom-mDecorationHeight/2,mTextPaint); //将tag绘制出来
    }

}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
    outRect.top = mDecorationHeight;
}

public interface OnTagListener{
    String getTag(int position); //为了获取当前tag
}
}

实现顶上去效果的关键

判断当前tag与下个position的tag是否相同，以及当前item的bottom的变化

if (!TextUtils.equals(curTag,nextTag)&&bottom<tagBottom) //被顶起来的条件 当前tag与下个tag不等且item的bottom已小于分割线高度
        {
            tagBottom = bottom; //将item的bottom值赋给tagBottom 就会实现被顶上去的效果
        }

end.gif

ok，至此已实现我们想要的效果。

如有什么错误的地方还望各位大佬帮忙指正。

参考的博客

【Android】RecyclerView：打造悬浮效果