六.自定义View之城市列表快速检索

在城市列表的快速检索项目中，左侧的26个英文字母Bar是自己画出来的，因此暂且把这个小项目也归类到自定义View中吧。

项目逻辑：

1.左边是一个自定义从A-Z的快速索引，它能够获取到触摸它的时候获取到的字母的索引。

2.右边是一个ListView，按照字母分类排序里面的内容，并且根据触摸的字母，去自己列表找首字母和触摸字母相同的那个

item，然后让item放置到屏幕顶端(setSelection(position));

3.需要用到文字转拼音。

下面就开始来一步步的实现这个功能吧。

一、自定义26个字母索引View：QuickIndexBar

1）绘制文字：使用canvas.drawText(text,x,y,paint)来实现。其中x,y在默认情况下（Paint.Align.LEFT模式下）分别是所绘制的文字左下角的坐标。

通过上图可以分析出，画文字时的x,y坐标的值,x值就是自定义View宽度的一半：getMeasureWidth/2， y值是格子高度/2 + 文字高度/2 ,如果是B之后的字母，还需要加上格子的高度，因此，我们可以得到y值：格子高度/2 + 文字高度/2 + position*格子高度

在竖直方向上，我们要把26个字母平均分配到自定义View中，因此每个格子的高度是getMeasureHeight()/26,重点是求文本的高度。

获取x值和格子的高度：

在自定义View中用canvas绘制文字时，可以通过这样一个方法去获得文字的高度：

获取文字高度

定义一个矩形bounds，当这个方法执行完成之后，我们所要测量的文字就满满的填充在bounds之中，此时我们获取矩形的高度即可以得到文字的高度。

获取文本高度

高度获取之后，我们就可以来绘制文字了。

初始化画笔，可以设置文字的大小，颜色等。

初始化画笔

画出文字

效果图：

左侧索引栏

2）按下和移动时计算触摸字母Bar时对应的字母值。(int)按下的y值/cellHeight就是字母的position，移动时也是这样一个逻辑，但是手指在屏幕上移动会产生无数个移动事件，这里就需要控制一下，只有当position改变时，才获取字母的值。

实现每次选中的字母都会变色，在每一次移动，按下，抬起时都要重绘界面，在onDraw()中判断 lastIndex == i ，如果相等那么重绘时，把第i个字母的颜色改变，其他字母仍然是黑色。

3）设置回调，把每次获取的字母传出去，用于与外界的ListView的数据交互。

编写接口和setXXXListener()

在获取字母的地方，调用接口中的方法，把数据传递出去。

在外界获取数据。

这里有关于字母索引条的开发就完成了，下面开始左侧ListView的开发。

二、左侧ListView的开发

1)设置ListView的Item

左侧ListView的Item分为上下两部分，上部分是显示首字母，下部分是显示名称。如图，下部分填充的是姓名，上部分填充的是姓名的首字母。

2）将姓名转化成拼音，使用到的是pinyin4j.jar

把汉字转换成拼音

在Adapter中设置数据

此时效果图是这样的

3）对姓名进行排序

使用Collections中的sort()，但是该方法要求参数中的实体类必须实现 Comparable<T>接口，实现其中的compareTo()

4）对于相同首字母的条目，item上部分显示字母的部分只留一个，其它隐藏起来。跟上一个Item比较，如果是相同的首字母就要隐藏上半部分

此时的效果图

5）手指点击或移动到某个字母上，ListView会把相应首字母的Item放置屏幕的顶端

6）点击相应的字母，屏幕中间弹出对话框，这里屏幕中间的对话框使用TextView，没有点击的情况下，TextView是隐藏状态，当需要显示TextView时，显示出来

效果图：