Android RecyclerView字母索引

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

一.效果展示

Android RecyclerView字母索引_第1张图片
AZ_RIGHT.gif
Android RecyclerView字母索引_第2张图片
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

你可能感兴趣的:(Android RecyclerView字母索引)