实现ListView A~Z快速索引

ListView A~Z快速索引这种效果在通信录和城市列表中经常看到，方便用户查找，是一种增加用户体验的好方法。

实现步骤：

   1.自定义一个名叫SlideBar 的View。

   2.在布局文件中加入这个自定义的View。

   3. 在Activity中处理监听事件。

接下来讲讲我是怎样实现的：

先来看SlideBar这个类：

[java]  view plain copy print ?

1. package com.folyd.tuan.view;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.graphics.Typeface;  
   1. import android.util.AttributeSet;  
8. import android.view.MotionEvent;  
9. import android.view.View;  
10.   
11. /** 
12.  * 自定义的View，实现ListView A~Z快速索引效果 
13.  *  
14.  * @author Folyd 
15.  *  
16.  */  
17. public class SlideBar extends View {  
18.     private Paint paint = new Paint();  
19.     private OnTouchLetterChangeListenner listenner;  
20.     // 是否画出背景  
21.     private boolean showBg = false;  
22.     // 选中的项  
23.     private int choose = -1;  
24.     // 准备好的A~Z的字母数组  
25.     public static String[] letters = { "#", "A", "B", "C", "D", "E", "F", "G",  
26.             "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",  
27.             "U", "V", "W", "X", "Y", "Z" };  
28.   
29.     // 构造方法  
30.     public SlideBar(Context context) {  
31.         super(context);  
32.     }  
33.   
34.     public SlideBar(Context context, AttributeSet attrs) {  
35.         super(context, attrs);  
36.     }  
37.   
38.     @Override  
39.     protected void onDraw(Canvas canvas) {  
40.         super.onDraw(canvas);  
41.         // 获取宽和高  
42.         int width = getWidth();  
43.         int height = getHeight() - 30;  
44.         // 每个字母的高度  
45.         int singleHeight = height / letters.length;  
46.         if (showBg) {  
47.             // 画出背景  
48.             canvas.drawColor(Color.parseColor("#55000000"));  
49.         }  
50.         // 画字母  
51.         for (int i = 0; i < letters.length; i++) {  
52.             paint.setColor(Color.BLACK);  
53.             // 设置字体格式  
54.             paint.setTypeface(Typeface.DEFAULT_BOLD);  
55.             paint.setAntiAlias(true);  
56.             paint.setTextSize(20f);  
57.             // 如果这一项被选中，则换一种颜色画  
58.             if (i == choose) {  
59.                 paint.setColor(Color.parseColor("#F88701"));  
60.                 paint.setFakeBoldText(true);  
61.             }  
62.             // 要画的字母的x,y坐标  
63.             float posX = width / 2 - paint.measureText(letters[i]) / 2;  
64.             float posY = i * singleHeight + singleHeight;  
65.             // 画出字母  
66.             canvas.drawText(letters[i], posX, posY, paint);  
67.             // 重新设置画笔  
68.             paint.reset();  
69.         }  
70.     }  
71.   
72.     /** 
73.      * 处理SlideBar的状态 
74.      */  
75.     @Override  
76.     public boolean dispatchTouchEvent(MotionEvent event) {  
77.         final float y = event.getY();  
78.         // 算出点击的字母的索引  
79.         final int index = (int) (y / getHeight() * letters.length);  
80.         // 保存上次点击的字母的索引到oldChoose  
81.         final int oldChoose = choose;  
82.         switch (event.getAction()) {  
83.         case MotionEvent.ACTION_DOWN:  
84.             showBg = true;  
85.             if (oldChoose != index && listenner != null && index > 0  
86.                     && index < letters.length) {  
87.                 choose = index;  
88.                 listenner.onTouchLetterChange(event, letters[index]);  
89.                 invalidate();  
90.             }  
91.             break;  
92.   
93.         case MotionEvent.ACTION_MOVE:  
94.             if (oldChoose != index && listenner != null && index > 0  
95.                     && index < letters.length) {  
96.                 choose = index;  
97.                 listenner.onTouchLetterChange(event, letters[index]);  
98.                 invalidate();  
99.             }  
100.             break;  
101.         case MotionEvent.ACTION_UP:  
102.         default:  
103.             showBg = false;  
104.             choose = -1;  
105.             if (listenner != null && index > 0 && index < letters.length)  
106.                 listenner.onTouchLetterChange(event, letters[index]);  
107.             invalidate();  
108.             break;  
109.         }  
110.         return true;  
111.     }  
112.   
113.     /** 
114.      * 回调方法，注册监听器 
115.      *  
116.      * @param listenner 
117.      */  
118.     public void setOnTouchLetterChangeListenner(  
119.             OnTouchLetterChangeListenner listenner) {  
120.         this.listenner = listenner;  
121.     }  
122.   
123.     /** 
124.      * SlideBar 的监听器接口 
125.      *  
126.      * @author Folyd 
127.      *  
128.      */  
129.     public interface OnTouchLetterChangeListenner {  
130.   
131.         void onTouchLetterChange(MotionEvent event, String s);  
132.     }  
133.   
134. }  

然后在布局文件中加入这个自定义的控件：

[html]  view plain copy print ?

1. <!-- 上面的代码省略掉了-->  
2.   
3.   
4. <FrameLayout  
5.     android:layout_width="match_parent"  
6.     android:layout_height="wrap_content" >  
7.   
8.     <ListView  
9.         android:id="@android:id/list"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:divider="@drawable/line3" />  
13.   
14.     <TextView  
15.         android:id="@+id/float_letter"  
16.         android:layout_width="80dp"  
17.         android:layout_height="80dp"  
18.         android:layout_gravity="center"  
19.         android:background="#F88701"  
20.         android:gravity="center"  
21.         android:textSize="40sp"  
22.         android:visibility="gone" />  
23.   
24.     <com.folyd.tuan.view.SlideBar  
25.         android:id="@+id/slideBar"  
26.         android:layout_width="30dp"  
27.         android:layout_height="wrap_content"  
28.         android:layout_gravity="right|bottom" />  
29. </FrameLayout>  

然后在Activity中注册监听事件：

[java]  view plain copy print ?

1. mSlideBar  
2.                 .setOnTouchLetterChangeListenner(new OnTouchLetterChangeListenner() {  
3.   
4.                     @Override  
5.                     public void onTouchLetterChange(MotionEvent event, String s) {  
6.   
7.                         float_letter.setText(s);  
8.                         switch (event.getAction()) {  
9.                         case MotionEvent.ACTION_DOWN:  
10.                         case MotionEvent.ACTION_MOVE:  
11.                             float_letter.setVisibility(View.VISIBLE);  
12.                             break;  
13.   
14.                         case MotionEvent.ACTION_UP:  
15.                         default:  
16.                             float_letter.postDelayed(new Runnable() {  
17.   
18.                                 @Override  
19.                                 public void run() {  
20.                                     float_letter.setVisibility(View.GONE);  
21.                                 }  
22.                             }, 100);  
23.                             break;  
24.                         }  
25.                        int position  = array.indexOf(s);//这个array就是传给自定义Adapter的  
26.                        mListView.setSelection(position);//调用ListView的setSelection()方法就可实现了  
27.                     }  
28.                 });  

实现效果如下：

     

不过这样子有一个小小的Bug 。

请看图：

我的Bug是这样的：如果用户手指滑过A之后一直向上滑到，滑到切换城市的黄色标题栏（或滑过Z之后一直向下到滑划出屏幕），因为在整个FrameLayout内用户一直没有弹起手指，所以不能触发MotionEvent.ACTION_UP 这个状态，中间的TextView不能消失。可是我试了MotionEvent的其他一些状态，甚至在switch语句中后面加个default都没用。

---------------------------------------*******************************************************------------------------------------------------

我研究的时候发现只要showBg值为true，中间的字母就显示，而当showBg 的值为false的时候中间的字母就可以消失。只要SlideBar的状态为ACTION_DOWN和ACTION_MOVE 的时候showBg的值为true，而ACTION_UP的时候showBg的值就为false；

所以根据上面这个特征，我们只要把OnToucheLetterChange()这个回调函数的参数改一下就可以了。改成onTouchLetterChange(boolean isTouched, String s) 

boolean类型的参数直接把showBg传过去就可以了。

改进后的代码如下：

[java] view plain copy print ?

1. package com.folyd.tuan.view;  
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.graphics.Typeface;  
8. import android.util.AttributeSet;  
9. import android.view.MotionEvent;  
10. import android.view.View;  
12. /**
13.  * 自定义的View，实现ListView A~Z快速索引效果
14.  * 
15.  * @author Folyd
16.  * 
17.  */
18. publicclass SlideBar extends View {  
19. private Paint paint = new Paint();  
20. private OnTouchLetterChangeListenner listenner;  
21. // 是否画出背景
22. privateboolean showBg = false;  
23. // 选中的项
24. privateint choose = -1;  
25. // 准备好的A~Z的字母数组
26. publicstatic String[] letters = { "#", "A", "B", "C", "D", "E", "F", "G",  
27. "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",  
28. "U", "V", "W", "X", "Y", "Z" };  
30. // 构造方法
31. public SlideBar(Context context) {  
32. super(context);  
33.     }  
35. public SlideBar(Context context, AttributeSet attrs) {  
36. super(context, attrs);  
37.     }  
39. @Override
40. protectedvoid onDraw(Canvas canvas) {  
41. super.onDraw(canvas);  
42. // 获取宽和高
43. int width = getWidth();  
44. int height = getHeight();  
45. // 每个字母的高度
46. int singleHeight = height / letters.length;  
47. if (showBg) {  
48. // 画出背景
49.             canvas.drawColor(Color.parseColor("#55000000"));  
50.         }  
51. // 画字母
52. for (int i = 0; i < letters.length; i++) {  
53.             paint.setColor(Color.BLACK);  
54. // 设置字体格式
55.             paint.setTypeface(Typeface.DEFAULT_BOLD);  
56.             paint.setAntiAlias(true);  
57.             paint.setTextSize(20f);  
58. // 如果这一项被选中，则换一种颜色画
59. if (i == choose) {  
60.                 paint.setColor(Color.parseColor("#F88701"));  
61.                 paint.setFakeBoldText(true);  
62.             }  
63. // 要画的字母的x,y坐标
64. float posX = width / 2 - paint.measureText(letters[i]) / 2;  
65. float posY = i * singleHeight + singleHeight;  
66. // 画出字母
67.             canvas.drawText(letters[i], posX, posY, paint);  
68. // 重新设置画笔
69.             paint.reset();  
70.         }  
71.     }  
73. /**
74.      * 处理SlideBar的状态
75.      */
76. @Override
77. publicboolean dispatchTouchEvent(MotionEvent event) {  
78. finalfloat y = event.getY();  
79. // 算出点击的字母的索引
80. finalint index = (int) (y / getHeight() * letters.length);  
81. // 保存上次点击的字母的索引到oldChoose
82. finalint oldChoose = choose;  
83. switch (event.getAction()) {  
84. case MotionEvent.ACTION_DOWN:  
85.             showBg = true;  
86. if (oldChoose != index && listenner != null && index > 0
87.                     && index < letters.length) {  
88.                 choose = index;  
89.                 listenner.onTouchLetterChange(showBg, letters[index]);  
90.                 invalidate();  
91.             }  
92. break;  
94. case MotionEvent.ACTION_MOVE:  
95. if (oldChoose != index && listenner != null && index > 0
96.                     && index < letters.length) {  
97.                 choose = index;  
98.                 listenner.onTouchLetterChange(showBg, letters[index]);  
99.                 invalidate();  
100.             }  
101. break;  
102. case MotionEvent.ACTION_UP:  
103.             showBg = false;  
104.             choose = -1;  
105. if (listenner != null) {  
106. if (index <= 0) {  
107.                     listenner.onTouchLetterChange(showBg, "A");  
108.                 } elseif (index > 0 && index < letters.length) {  
109.                     listenner.onTouchLetterChange(showBg, letters[index]);  
110.                 } elseif (index >= letters.length) {  
111.                     listenner.onTouchLetterChange(showBg, "Z");  
112.                 }  
113.             }  
114.             invalidate();  
115. break;  
116.         }  
117. returntrue;  
118.     }  
120. /**
121.      * 回调方法，注册监听器
122.      * 
123.      * @param listenner
124.      */
125. publicvoid setOnTouchLetterChangeListenner(  
126.             OnTouchLetterChangeListenner listenner) {  
127. this.listenner = listenner;  
128.     }  
130. /**
131.      * SlideBar 的监听器接口
132.      * 
133.      * @author Folyd
134.      * 
135.      */
136. publicinterface OnTouchLetterChangeListenner {  
138. void onTouchLetterChange(boolean isTouched, String s);  
139.     }  
141. }  

Activity中就很容易处理了：

[java] view plain copy print ?

1. mSlideBar  
2.                 .setOnTouchLetterChangeListenner(new OnTouchLetterChangeListenner() {  
4. @Override
5. publicvoid onTouchLetterChange(boolean isTouched, String s) {  
7.                         float_letter.setText(s);  
8. if (isTouched) {  
9.                             float_letter.setVisibility(View.VISIBLE);  
10.                         } else {  
11.                             float_letter.postDelayed(new Runnable() {  
13. @Override
14. publicvoid run() {  
15.                                     float_letter.setVisibility(View.GONE);  
16.                                 }  
17.                             }, 100);  
18.                         }  
19. int position = array.indexOf(s);  
20.                         mListView.setSelection(position);  
21.                     }  
22.                 });  

这样就解决Bug了。哈哈。

良心的公众号，更多精品文章，不要忘记关注哈

《Android和Java技术栈》