移动开发中用列表来展示数据的情况还是比较多的．在列表使用的过程中，当列表项比较多的时候，当想找到其中某一项的时候可能就比较麻烦了，这个时候要是能有个字母的索引了就好多了。类似手机里面联系人列表展示。接下来咱们就来实现这一功能．
一．效果展示
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的相同．例如：
<?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里面去展示．
网友评论