Android RecyclerView字母索引

       移动开发中用列表来展示数据的情况还是比较多的．在列表使用的过程中，当列表项比较多的时候，当想找到其中某一项的时候可能就比较麻烦了，这个时候要是能有个字母的索引了就好多了。类似手机里面联系人列表展示。接下来咱们就来实现这一功能．

一．效果展示

AZ_RIGHT.gif

AZ_CENTER.gif

二．实现过程

       整体分为两部分：列表、字母索引bar。列表咱们就用RecyclerView来实现，因为ListView能实现RecyclerView也能实现，ListView不能实现的RecyclerView也能实现。字母索引bar这个就需要自定义View来实现了。

• 列表

       为了有一个更加完美的展示，我们在列表的基础功能之外还加入列表分组展示，并且在列表的滑动过程中固定分组在列表顶部的功能。关于分组固定的功能其实之前也有介绍过，有兴趣的可以参考 RecyclerView分组悬浮列表文章里面的具体实现。这次实现的过程也是一样的，也是借助RecyclerView.ItemDecoration来实现。在RecyclerView.ItemDecoration的getItemOffsets()函数中空出绘制标题的位置。在RecyclerView.ItemDecoration的onDraw()函数中绘制标题。在RecyclerView.ItemDecoration的onDrawOver()函数中绘制滑动过程中固定在顶部的标题。有兴趣的可以参考文章下面给出的代码里面的 AZTitleDecoration 类的具体实现。

• 字母索引bar

       字母索引bar这是一个自定义View，用来来列表的右边显示A-Z这些字母的bar，方便我们能快速的找到列表里面以某个字母开头的item。这里里我们规定索引bar显示在右边。并且自定义索引bar View在布局的时候要覆盖在RecyclerView的上面。关于自定义View的流程和主要的关注点，我们应该都知道．自定义View主要就是处理好几个函数的实现：测量onMeasure()、绘制onDraw()、事件dispatchTouchEvent()或者onTouchEvent()。

onMeasure()函数的实现

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mSlideBarRect == null) {
            mSlideBarRect = new RectF();
        }
        float contentLeft = getMeasuredWidth() - mBarWidth - mBarPadding;
        float contentRight = getMeasuredWidth() - mBarPadding;
        float contentTop = mBarPadding;
        float contentBottom = (float) (getMeasuredHeight() - mBarPadding);
        mSlideBarRect.set(contentLeft, contentTop, contentRight, contentBottom);

    }

       我们不去干扰View的测量，直接用系统的测量方式．当然你也可以更加自己的需求来改．里面mSlideBarRect是咱们索引字母要显示的区域．．

onDraw()函数的实现

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制slide bar 上字母列表
        drawLetters(canvas);
        //绘制选中时的提示信息(圆＋文字)
        drawHint(canvas);
        //绘制选中的slide bar上的那个文字
        drawSelect(canvas);
    }

       绘制分成三部分：绘制索引列表(A-Z从上到下排列)、绘制提示信息(当我们手指在索引上滑动的时候，提示当前选中的是哪个字母，比如效果图中当手指在索引字母上滑动的时候，在内容列表的中心有正方形，并且正方形中心绘制选中的字母)、绘制索引列表上选中的字母(比如效果索引列表中选中的文字是红色的)．

dispatchTouchEvent()函数的实现

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final float y = event.getY();
        final float x = event.getX();
        mPreSelect = mSelect;
        mNewSelect = (int) (y / (mSlideBarRect.bottom - mSlideBarRect.top) * mLetters.size());
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (x < mSlideBarRect.left || y < mSlideBarRect.top || y > mSlideBarRect.bottom) {
                    return false;
                }
                mTouchY = (int) y;
                startAnimator(1.0f);
                break;
            case MotionEvent.ACTION_MOVE:
                mTouchY = (int) y;
                if (mPreSelect != mNewSelect) {
                    if (mNewSelect >= 0 && mNewSelect < mLetters.size()) {
                        mSelect = mNewSelect;
                        if (mListener != null) {
                            mListener.onLetterChange(mLetters.get(mNewSelect));
                        }
                    }
                }
                invalidate();
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                startAnimator(0f);
                mSelect = -1;
                break;
            default:
                break;
        }
        return true;
    }

       这里咱们肯定要自己来处理事件的，如果MotionEvent.ACTION_DOWN的时候手指在索引列表的展示区域里面．这个事件我们要了．MotionEvent.ACTION_MOVE的时候我们要根据手指所在的的位置，得到选中的字母．并且实时的去更新选中的字母，并且让View重绘更新提示信息．

       自定义索引bar的代码就这么多．里面也没用到啥复杂的技术．大家可以仿照这种形式，根据自己的实际需求来自定义适合自己的索引bar View．

三．使用

       使用过程也非常简单．两步吧：布局、装载数据．

• 布局

       布局的时候把索引bar布局在RecyclerView之上．并且把索引bar的宽度和高度设置和RecyclerView的相同．例如：

• 装载数据

       先肯定是有一系列列表的数据．获取这些列表数据的拼音(这里我们默认实现字母索引)．并且按照拼音的首字母排序．然后把这些数据设置到RecyclerView里面去展示．

       最后给出效果图对应的源码链接: AZList