仿小米通讯录 右侧滑动条与带动画的悬停列表实现(二)

效果图

为了能一眼看出如何实现 看下图

上面的title就是用到了一个RecyclerView.ItemDecoration

从字面上翻译他就是一个recyclerview item 的装饰

如何使用？

自定义一个类（IndicatorDecoration ）继承 RecyclerView.ItemDecoration

IndicatorDecoration extends RecyclerView.ItemDecoration 

构造方法进行一些初始化 别忘了传入 Context

public IndicatorDecoration(Context ctx, List<? extends ContactsBean> data) {
        super();
        mContext = ctx;
        mData = data;

        final TypedArray a = mContext.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();

        mTitleHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, ctx
                .getResources().getDisplayMetrics());
        mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, ctx
                .getResources().getDisplayMetrics());
        //抗锯齿
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setTextSize(mTextSize);
    }

设置item的边框 其实就是设置个左上右下的边距 给要Draw的东西留下位置

//设置item周围边框的补偿
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State
            state) {
        super.getItemOffsets(outRect, view, parent, state);
        int position = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        if (position == 0) {
            outRect.set(0, mTitleHeight, 0, 0);//左上右下
        } else if (mData.get(position).index != null && mData.get(position).index != mData.get
                (position - 1).index) {
            //如果当前条目的index 也就是 拼音首字母 和上一个条目不同 则有title
            outRect.set(0, mTitleHeight, 0, 0);
        } else {
            outRect.set(0, 0, 0, 0);
        }
    }

开始画

RecyclerView的draw方法中会先通过super.draw()调用父类也就是View的draw方法，进而继续调用RecyclerView的OnDraw方法，ItemDecorations的onDraw方法就在此时会被调用

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

        int left;
        int top;
        int right;
        int bottom;

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams childParams = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            int position = childParams.getViewLayoutPosition();

            left = parent.getPaddingLeft();
            top = child.getTop() - childParams.topMargin - mTitleHeight;
            right = parent.getWidth() - parent.getPaddingRight();
            bottom = top + mTitleHeight;

            if (position == 0) {

                drawTitle(c, left, top, right, bottom, child, childParams, position);
            } else if (mData.get(position).index != null && !mData.get(position).index .equals(mData.get
                    (position - 1).index) ) {

                drawTitle(c, left, top, right, bottom, child, childParams, position);
            }
        }
    }
private void drawTitle(Canvas c, int left, int top, int right, int bottom, View child,
                           RecyclerView.LayoutParams
                                   params, int position) {

        mPaint.setColor(mContext.getResources().getColor(R.color.md_blue_300));
        c.drawRect(left, top, right, bottom, mPaint);
        mPaint.setColor(mContext.getResources().getColor(R.color.md_white_1000));

        float textHeight = getTextHeight(mData.get(position).name);

        // 将字母绘制到 title的中间
        c.drawText(mData.get(position).index, child.getPaddingLeft(), child.getTop() - params
                .topMargin - mTitleHeight / 2 + textHeight / 2, mPaint);

    }

返回文字的高

 /**
     * @param text
     * @return 返回文字的高
     */
    private float getTextHeight(String text) {
        Rect rect = new Rect();
        mPaint.getTextBounds(text, 0, text.length(), rect);
        return rect.height();
    }

动画效果实现 onDrawOver在OnDraw 方法结束后调用

当处于这种临界值 child.getTop() + child.getHeight() = mTitleHeight
下一步 上面的title将要上移 （注：getTop此时为负）
所以就将 canvas上移。

    @Override
 public void onDrawOver(Canvas c, final RecyclerView parent, RecyclerView.State state) {
        int firstPos = ((LinearLayoutManager) parent.getLayoutManager())
                .findFirstVisibleItemPosition();

        View child = parent.findViewHolderForAdapterPosition(firstPos).itemView;
        //canvas是否移动过的
        boolean flag = false;
        if (!mData.get(firstPos).index.equals(mData.get(firstPos + 1 ).index)) {
            if (child.getTop() + child.getHeight() < mTitleHeight) {
                //在canvas 移动前先保存他的状态
                c.save();
                flag = true;
                c.translate(0, child.getTop() + child.getHeight() - mTitleHeight);
            }

        }

        //mPaint.setColor(mContext.getResources().getColor(R.color.md_blue_300));
        mPaint.setColor(mContext.getResources().getColor(R.color.md_amber_900));


        c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent
                .getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint);
        mPaint.setColor(mContext.getResources().getColor(R.color.md_white_1000));

        float textHeight = getTextHeight(mData.get(firstPos).name);

        // 将字母绘制到 title的中间
        c.drawText(mData.get(firstPos).index, child.getPaddingLeft(), mTitleHeight - mTitleHeight
                / 2 + textHeight / 2, mPaint);

        //如果canvas 移动过 回到他保存前的状态
        if(flag){
            c.restore();
        }

    }

github:https://github.com/REIGE/AddressBook