悬浮ItemDecoration

先来一个效果图：

思路步骤

1. 设置回调接口，用于判断每个item的类型，以及各个类型对应的名称

public interface DecorationListener{
    int getType(int position);//获得分组的type
    String getTypeText(int position);//获得该组的文字信息
}

2. 继承RecyclerView.ItemDecoration重写getItemOffsets将需要绘制分隔栏的地方设置偏移量，我们这里是采用分组的形式，即不同组之间才需要绘制分隔符。可以看看我的图片↑。
3. 重写onDraw
   在设置了偏移量的地方绘制分隔栏
4. 重写onDrawOver
   在头顶绘制悬浮分隔栏

调用顺序

首先会调用getItemOffsets，然后是onDraw，然后会绘制item本身，最后时onDrawOver，所以onDrawOver里面绘制的会覆盖掉你的view，所以这就是现实了悬浮在view之上！

代码实现

1. 定义好要用的变量

private Context mContext;
private int mTitleHeight;//分隔栏高度
private Paint mPaint;//画背景的画笔
private Paint mTextPaint;//画文字的画笔
private Rect mBounds;//文字边界
private int mTextSize;
private int mTextColor;
private int mBackgroundColor;
//用于得到type和type对应的Text
private DecorationListener mListener;

2. 初始化变量

    public FloatingDecoration(Context context,DecorationListener listener){
        mContext = context;
        mTitleHeight = 100;
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setColor(Color.GRAY);
        mBounds = new Rect();
        mListener = listener;

        mTextPaint = new Paint();
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setAntiAlias(true);//抗锯齿
        mTextPaint.setTextSize(sp2px(context,30));

    }

2. 设置偏移量

 @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int position =  parent.getChildLayoutPosition(view);
            if (position == 0) {//第0个肯定是新的一组
                outRect.set(0, mTitleHeight, 0, 0);
            } else {//其他的通过判断
                if (mListener.getType(position)!= mListener.getType(position-1)) {//通过接口来获得类型
                    outRect.set(0, mTitleHeight, 0, 0);//跟前一个tag不一样了，说明是新的分类，也要title
                } else {
                    outRect.set(0, 0, 0, 0);
                }
            }
    } 

3. 绘制分隔栏

 @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();
            int position = params.getViewLayoutPosition();
                if (position == 0) {//等于0肯定要有分组title的
                    drawTitleArea(c, left, right, child, params, position);
                }else {//其他的通过判断
                    if (mListener.getType(position)!= mListener.getType(position-1)) {
                        //且跟前一个tag不一样了，说明是新的分组，也要title
                        drawTitleArea(c, left, right, child, params, position);
                    }
                }
        }
    }

4. 绘制文字区域

 private void drawTitleArea(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) {//最先调用，绘制在最下层
        c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint);
        //绘制文字
        mTextPaint.getTextBounds(mListener.getTypeText(position), 0,mListener.getTypeText(position).length(), mBounds);
        Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
        //文字baseline计算方法： 矩形区域的top + bottom - fontMetrics.bottom - fontMetrics.top 除以 2
        int baseline = ( child.getTop() - mTitleHeight + child.getTop() - fontMetrics.bottom - fontMetrics.top) / 2;
        c.drawText(mListener.getTypeText(position), child.getPaddingLeft(), baseline, mTextPaint);
    } 

其实目前已经可以实现分组了！但是还没有悬浮的效果。

5. 绘制顶部的悬浮分隔栏
   来看一张原理图：

   
   原理图
   

   好，让我们来开始编码：

@Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {//最后调用 绘制在最上层
        //获得可见的第一个view的position
        int pos = ((LinearLayoutManager)(parent.getLayoutManager())).findFirstVisibleItemPosition();`
        //要绘制的文字
        String tag = mListener.getTypeText(pos);
        //获得在屏幕上能看到的第一个view
        View child = parent.getChildAt(0);

        if(mListener.getType(pos)!= mListener.getType(pos+1)){
            //这是最后一个
            int bottom = child.getBottom();
            if(bottom<mTitleHeight){
                //底部小于分隔栏的高度了  说明已经上去了
                //绘制背景  随着最后一个的bottom一起向上移动 
                //为了简洁我就没写各边的padding了
                c.drawRect(0, 0, parent.getRight(), bottom, mPaint);
                mPaint.getTextBounds(tag, 0, tag.length(), mBounds);

                //文字
                Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
                int baseline = (bottom + bottom -mTitleHeight - fontMetrics.bottom - fontMetrics.top) / 2;
                c.drawText(tag,child.getPaddingLeft(),baseline,mTextPaint);
                return;
            }
        }
        //如果不是最后一个 那就直接绘制在RecyclerView的顶部！
        //分隔线的背景
        c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint);

        //分组的文字
        mTextPaint.getTextBounds(tag, 0, tag.length(), mBounds);
        Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
        int baseline = (mTitleHeight - fontMetrics.bottom - fontMetrics.top) / 2;
        c.drawText(tag, child.getPaddingLeft(),baseline,   mTextPaint);
   }

结语：其实不绘制文字，还是很容易就搞定这个的，但是要绘制文字就要做许多计算！主要就是baseline（基线）的计算，文字是绘制在基线上边的。大家可以多看看文字绘制的方法，最好动手画画，就能理解了。