Android RecyclerView字母索引

超、凢脫俗 2022-05-28 02:10 256阅读 0赞

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

#### 一．效果展示 ####

![right][]  
  
![center][]

#### 二．实现过程 ####

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

*  列表

为了有一个更加完美的展示，我们在列表的基础功能之外还加入列表分组展示，并且在列表的滑动过程中固定分组在列表顶部的功能。关于分组固定的功能其实之前也有介绍过，有兴趣的可以参考 [RecyclerView分组悬浮列表][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的相同．例如：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <com.tuacy.azlist.azlist.AZSideBarView
            android:id="@+id/bar_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:hintShape="rectangle"/>
    
    </android.support.constraint.ConstraintLayout>

*  装载数据

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

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

[right]: /images/20220528/f2182f726d4245e3873b0d9bc2b9ab4f.png
[center]: /images/20220528/10cb168290ef4c8bad76e8657c078767.png
[RecyclerView]: https://www.jianshu.com/p/1558cbd20d17
[AZList]: https://github.com/tuacy/AZList