android gridview字母索引,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的相同．例如：

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:id="@+id/recycler_list"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/bar_list"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:hintShape="rectangle"/>

装载数据

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

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