Android实现快速索引详解

画字母
        要实现这个效果, 先得把右侧的字母条画出来, 这里我们写个类, 继承自 View, 由于其内部不需要包含其他布局, 所以继承 View 即可, 无需继承 ViewGroup.

[java] view plain copy

1. public class QuickIndexBar extends View {  
2.     private static final String TAG = "TAG";  
3.     private static final String[] LETTERS = new String[]{  
4.         "A", "B", "C", "D", "E", "F",  
5.         "G", "H", "I", "J", "K", "L",  
6.         "M", "N", "O", "P", "Q", "R",  
7.         "S", "T", "U", "V", "W", "X",  
8.         "Y", "Z"};  
9.     private Paint mPaint;  
10.       
11.     public interface OnLetterChangeListener{  
12.         void OnLetterChange(String letter);  
13.     }  
14.     public QuickIndexBar(Context context) {  
15.         this(context, null);  
16.     }  
17.     public QuickIndexBar(Context context, AttributeSet attrs) {  
18.         this(context, attrs, 0);  
19.     }  
20.     public QuickIndexBar(Context context, AttributeSet attrs, int defStyle) {  
21.         super(context, attrs, defStyle);   
22.         // 初始化画笔  
23.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
24.         mPaint.setColor(Color.WHITE);  
25.         mPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 12f, getResources().getDisplayMetrics()));  
26.         mPaint.setTypeface(Typeface.DEFAULT_BOLD);  
27.     }    
28. }  

既然要画字母, 就要有画笔, 这里在构造方法里完成画笔的初始化, 创建一个抗锯齿, 颜色为白色, 大小12sp, 粗体的画笔. 有了画笔, 就要开始画了, 画法如图所示。

        这里面要注意的是, 使用 Canvas 画文字的时候, 是从左下角开始的.

[java] view plain copy

1. @Override  
2.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
3.         super.onSizeChanged(w, h, oldw, oldh);  
4.         mHeight = getMeasuredHeight();  
5.         mCellHeight = mHeight * 1.0f / LETTERS.length;  
6.         mCellWidth = getMeasuredWidth();  
7.     }    
8.     @Override  
9.     protected void onDraw(Canvas canvas) {  
10.         // 绘制字母  
11.         for (int i = 0; i < LETTERS.length; i++) {  
12.             String text = LETTERS[i];  
13.             // 求x坐标  
14.             int x = (int) (mCellWidth / 2.0f - mPaint.measureText(text) / 2.0f);  
15.             // 求y坐标  
16.             // 格子高度的一半 + 文字高度的一半 + 其上边所有格子高度  
17.             Rect bounds = new Rect();  
18.             mPaint.getTextBounds(text, 0, text.length(), bounds);  
19.             int y = (int) (mCellHeight / 2.0f + bounds.height() / 2.0f + mCellHeight * i);  
20.             canvas.drawText(text, x, y, mPaint);  
21.         }  
22.     }  

        这样一来, 字母就画出来了, 如果想要更自由一些的话, 可以使用自定义属性传入字体颜色. 

触摸事件和回调
        界面效果有了, 接下来就是处理触摸事件以及回调了, 处理触摸事件肯定是重写 onTouchEvent 方法了, 回调的话, 定义一个回调接口, 提供 get/set 方法, 在 onTouchEvent 相应的位置调用. onTouchEvent 代码如下:

[java] view plain copy

1. @Override  
2.     public boolean onTouchEvent(MotionEvent event) {  
3.         switch (MotionEventCompat.getActionMasked(event)) {  
4.             case MotionEvent.ACTION_DOWN:  
5.                 // 根据y值获取当前触摸到的字母  
6.                 float y = event.getY();  
7.                 int index = (int) (y / mCellHeight);  
8.                 // 如果字母索引发生变化  
9.                 if(index != touchIndex){  
10.                     if(index >= 0 && index < LETTERS.length){  
11.                         Log.d(TAG, LETTERS[index]);  
12.                         if(mLetterChangeListener != null){  
13.                             // 执行回调  
14.                             mLetterChangeListener.OnLetterChange(LETTERS[index]);  
15.                         }  
16.                     }  
17.                     touchIndex  = index;  
18.                 }  
19.                 break;  
20.             case MotionEvent.ACTION_MOVE:  
21.                 // 根据y值获取当前触摸到的字母  
22.                 int i = (int) (event.getY() / mCellHeight);  
23.                 // 如果字母索引发生变化  
24.                 if(i != touchIndex){  
25.                     if(i >= 0 && i < LETTERS.length){  
26.                         Log.d(TAG, LETTERS[i]);  
27.                         if(mLetterChangeListener != null){  
28.                             mLetterChangeListener.OnLetterChange(LETTERS[i]);  
29.                         }  
30.                     }  
31.                     touchIndex  = i;  
32.                 }  
33.                 break;  
34.             case MotionEvent.ACTION_UP:  
35.                 // 恢复默认索引值  
36.                 touchIndex = -1;  
37.                 break;  
38.             default:  
39.                 break;  
40.         }  
41.         invalidate();  
42.         return true;  
43.     }  

回调接口:

[java] view plain copy

1. public interface OnLetterChangeListener{  
2.     void OnLetterChange(String letter);  
3. }  
4. // 字母变化监听  
5. private OnLetterChangeListener mLetterChangeListener;  
6. public OnLetterChangeListener getLetterChangeListener() {  
7.     return mLetterChangeListener;  
8. }  
9. public void setLetterChangeListener(  
10.         OnLetterChangeListener mLetterChangeListener) {  
11.     this.mLetterChangeListener = mLetterChangeListener;  
12. }  

ListView 的处理
首先我们要获取一个所有名字的集合, 并且对它按照拼音顺序排序.

[java] view plain copy

1. private void fillAndSort(ArrayList<Friend> names) {  
2.         for (int i = 0; i < NAMES.length; i++) {  
3.             names.add(new Friend(NAMES[i]));  
4.         }  
5.         Collections.sort(names);  
6.     }    
7. Friend 类如下:  
8. public class Friend implements Comparable<Friend>{  
9.     private String name;  
10.     private String pinyin;  
11.     public Friend(String name) {  
12.         super();  
13.         this.name = name;  
14.         // 获取拼音  
15.         pinyin = PinyinUtils.getPinyin(name);  
16.     }  
17.     public String getName() {  
18.         return name;  
19.     }  
20.     public void setName(String name) {  
21.         this.name = name;  
22.     }  
23.     public String getPinyin() {  
24.         return pinyin;  
25.     }  
26.     public void setPinyin(String pinyin) {  
27.         this.pinyin = pinyin;  
28.     }  
29.     @Override  
30.     public int compareTo(Friend another) {  
31.         return pinyin.compareTo(another.getPinyin());  
32.     }  
33. }  

        那么接下来就是 ListView 的 Adapter 了, 这里要注意一点就是, 相同字母开头的名字, 只有第一个显示, 其他的不显示.

[java] view plain copy

1. @Override  
2.     public View getView(int position, View convertView, ViewGroup parent) {  
3.         View view = convertView;  
4.         if(convertView == null){  
5.             view = View.inflate(mContext, R.layout.item_list, null);  
6.         }  
7.         ViewHolder mViewHolder = ViewHolder.getHolder(view);  
8.         Friend friend = names.get(position);  
9.         // 跟上一个进行比较，如果不同，则显示。  
10.         String letter = null;  
11.         String currentLetter = friend.getPinyin().charAt(0) + "";  
12.         if(position == 0){  
13.             // 第一个人直接显示  
14.             letter = currentLetter;  
15.         }else {  
16.             // 获取上一个人的拼音  
17.             String preLetter = names.get(position - 1).getPinyin().charAt(0) + "";  
18.             if(!TextUtils.equals(preLetter, currentLetter)){  
19.                 letter = currentLetter;  
20.             }  
21.         }  
22.         mViewHolder.mIndex.setVisibility(letter == null ? View.GONE : View.VISIBLE);  
23.         if(letter != null){  
24.             mViewHolder.mIndex.setText(letter);  
25.         }  
26.         mViewHolder.mName.setText(friend.getName());  
27.         return view;  
28.     }  

每个 item 的布局如下:

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <TextView  
7.         android:id="@+id/tv_index"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="40dp"  
10.         android:background="#555555"  
11.         android:gravity="center_vertical"  
12.         android:paddingLeft="20dp"  
13.         android:visibility="gone"  
14.         android:text="A"  
15.         android:textColor="#ffffff"  
16.         android:textSize="20sp" />   
17.     <TextView  
18.         android:id="@+id/tv_name"  
19.         android:layout_width="match_parent"  
20.         android:layout_height="50dp"  
21.         android:gravity="center_vertical"  
22.         android:paddingLeft="20dp"  
23.         android:text="宋江"  
24.         android:textColor="#000000"  
25.         android:textSize="22sp" />  
26. </LinearLayout>  

        也就是说, 其实每个条目都是有个字母索引, 有个名字, 只是首字母相同的名字, 只有第一个显示索引。最后就是在索引条上滑动的时候移动到 ListView 相应的位置了, 这个就是实现它提供的回调:

[java] view plain copy

1. QuickIndexBar mQuickIndexBar = (QuickIndexBar) findViewById(R.id.quickIndex);  
2. mQuickIndexBar.setLetterChangeListener(new OnLetterChangeListener() {  
3.     @Override  
4.     public void OnLetterChange(String letter) {  
5.         Utils.showToast(getApplicationContext(), letter);  
6.         // 执行ListView的定位方法  
7.         for (int i = 0; i < names.size(); i++) {  
8.             Friend friend = names.get(i);  
9.             String l =friend.getPinyin().charAt(0) + "";  
10.             if(TextUtils.equals(letter, l)){  
11.                 // 中断循环，快速定位  
12.                 mListView.setSelection(i);  
13.                 break;  
14.             }  
15.         }  
16.           
17.     }  
18. });